yiekheng
06dcf0a649
Replaces the fixed-position reader with a sticky layout that works correctly on iPhone Safari and Edge, while also auto-appending the next chapter's pages when the current one finishes. Layout - Swap all position:fixed for sticky (Header, BottomNav, reader top nav) — fixed-positioning quirks broke the bottom nav in Edge and prevented Safari's URL bar from collapsing on scroll - Viewport: viewport-fit=cover + interactiveWidget=overlays-content so manga extends edge-to-edge and the URL bar overlays content without resizing the viewport - Add pt-safe / pb-safe utilities; apply on nav bars so chrome respects the notch and home-indicator - Drop fixed-positioning bottom padding now that BottomNav is in flow Continuous reading - PageReader now receives the full chapter manifest (id + totalPages) and auto-fetches the next chapter when the current one is done - Subtle chapter divider strip appears between chapters in the scroll - Top nav chapter title updates as the user scrolls into a new chapter (rAF-throttled scroll listener, cached offsetTop) - Double-tap on left/right viewport half navigates prev/next chapter - End-of-manga footer fills the viewport with a Back-to-Manga action Theme polish - Light theme: white body/background, blue accent preserved for chapter numbers, badges, active states - Modern chapter drawer: white sheet, rounded-t-3xl, two-column rows with chapter-number badge, blue highlight for current chapter - Suppress hydration warnings for extension-injected attributes on <html> and the search input - Manga detail CTA localized to 开始阅读 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const navItems = [
|
|
{
|
|
href: "/",
|
|
label: "Home",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" fill={active ? "currentColor" : "none"} stroke="currentColor" strokeWidth={active ? 0 : 2} className="w-6 h-6">
|
|
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
{!active && <polyline points="9 22 9 12 15 12 15 22" />}
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "/genre",
|
|
label: "Genres",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" fill={active ? "currentColor" : "none"} stroke="currentColor" strokeWidth={active ? 0 : 2} className="w-6 h-6">
|
|
<rect x="3" y="3" width="7" height="7" rx="1" />
|
|
<rect x="14" y="3" width="7" height="7" rx="1" />
|
|
<rect x="3" y="14" width="7" height="7" rx="1" />
|
|
<rect x="14" y="14" width="7" height="7" rx="1" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "/search",
|
|
label: "Search",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={active ? 2.5 : 2} className="w-6 h-6">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.3-4.3" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export function BottomNav() {
|
|
const pathname = usePathname();
|
|
|
|
// Hide bottom nav on chapter reader for immersive reading
|
|
if (pathname.match(/^\/manga\/[^/]+\/\d+$/)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<nav className="sticky bottom-0 z-50 bg-background text-foreground backdrop-blur-xl shadow-[0_-1px_3px_rgba(0,0,0,0.08)] sm:hidden pb-safe">
|
|
<div className="flex items-center justify-around h-14">
|
|
{navItems.map((item) => {
|
|
const isActive =
|
|
item.href === "/"
|
|
? pathname === "/"
|
|
: pathname.startsWith(item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex flex-col items-center gap-0.5 px-5 py-1.5 transition-colors ${
|
|
isActive ? "text-accent" : "text-muted"
|
|
}`}
|
|
>
|
|
{item.icon(isActive)}
|
|
<span className="text-[10px] font-semibold">{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|