Reader: hover-reveal / hover-hide top nav on desktop
When the nav is hidden (auto-hidden after scrolling past 50px), a fixed-position hover sensor at the top of the viewport catches mouseenter and slides the nav back in. Moving the mouse away from the nav slides it back out. Gated by `@media (hover: hover)` via JS matchMedia so touch devices are unaffected — the existing single-tap toggle stays the only way to show the nav there. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
6ea021d284
commit
f3d71a5423
@ -82,6 +82,10 @@ export function PageReader({
|
||||
// Guards progress writes so an empty session (opened chapter, never
|
||||
// scrolled) doesn't overwrite prior bookmark for a different chapter.
|
||||
const hasScrolledRef = useRef(false);
|
||||
const [canHover, setCanHover] = useState(false);
|
||||
useEffect(() => {
|
||||
setCanHover(window.matchMedia("(hover: hover)").matches);
|
||||
}, []);
|
||||
|
||||
const imagesRef = useRef(images);
|
||||
const chapterMetasRef = useRef(chapterMetas);
|
||||
@ -539,10 +543,18 @@ export function PageReader({
|
||||
|
||||
return (
|
||||
<div className="min-h-dvh bg-background">
|
||||
{canHover && !showUI && (
|
||||
<div
|
||||
className="fixed top-0 left-0 right-0 h-16 z-40"
|
||||
onMouseEnter={() => setShowUI(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"
|
||||
}`}
|
||||
onMouseEnter={canHover ? () => setShowUI(true) : undefined}
|
||||
onMouseLeave={canHover ? () => setShowUI(false) : undefined}
|
||||
>
|
||||
<div className="flex items-center gap-3 px-4 h-12 max-w-4xl mx-auto">
|
||||
<Link
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user