44 lines
1.2 KiB
React
44 lines
1.2 KiB
React
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function ReaderNav({ chapterName }) {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 12);
|
|
onScroll();
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<nav className={`nav reader-nav${scrolled ? " scrolled" : ""}`}>
|
|
<div className="nav-in">
|
|
<Link className="logo" href="/">
|
|
AIBook<b>.</b>
|
|
<span className="dot">fun</span>
|
|
</Link>
|
|
|
|
<div className="nav-links reader-links">
|
|
{chapterName ? (
|
|
<>
|
|
<Link href="/read">Library</Link>
|
|
<span className="nav-current" aria-current="page">
|
|
{chapterName}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<span className="nav-current" aria-current="page">
|
|
Library
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<Link href="/#get" className="btn btn-primary nav-cta">
|
|
Get the preview
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|