yiekheng/sunnymh-manga-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reader: nav hover reveals transiently, restores pre-hover state on leave

Browse Source 
Previously hover both revealed (on enter) AND hid (on leave) via the
persistent showUI state — so tapping the nav visible and then moving the
mouse away would hide it. Now hover toggles a separate transient
hoveringNav state; the nav is visible when (showUI || hoveringNav). On
mouseleave, hoveringNav clears and the nav returns to whatever showUI
was before — visible if the user tapped to show it, hidden if it was
scroll-auto-hidden.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
yiekheng 2026-04-15 22:25:37 +08:00
parent f3d71a5423
commit 6eff1f68fc
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/PageReader.tsx
View File

@ -83,6 +83,7 @@ export function PageReader({
// scrolled) doesn't overwrite prior bookmark for a different chapter.
const hasScrolledRef = useRef(false);
const [canHover, setCanHover] = useState(false);
const [hoveringNav, setHoveringNav] = useState(false);
useEffect(() => {
setCanHover(window.matchMedia("(hover: hover)").matches);
}, []);
@ -543,18 +544,18 @@ export function PageReader({
return (
<div className="min-h-dvh bg-background">
{canHover && !showUI && (
{canHover && !showUI && !hoveringNav && (
<div
className="fixed top-0 left-0 right-0 h-16 z-40"
onMouseEnter={() => setShowUI(true)}
onMouseEnter={() => setHoveringNav(true)}
/>
)}
<div
className={`sticky top-0 z-50 bg-background backdrop-blur-sm shadow-sm transition-transform duration-300 pt-safe ${
showUI ? "translate-y-0" : "-translate-y-full"
showUI || hoveringNav ? "translate-y-0" : "-translate-y-full"
}`}
onMouseEnter={canHover ? () => setShowUI(true) : undefined}
onMouseLeave={canHover ? () => setShowUI(false) : undefined}
onMouseEnter={canHover ? () => setHoveringNav(true) : undefined}
onMouseLeave={canHover ? () => setHoveringNav(false) : undefined}
>
<div className="flex items-center gap-3 px-4 h-12 max-w-4xl mx-auto">
<Link