Update navigation layout and assets
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { FiList, FiChevronRight } from 'react-icons/fi';
|
||||
import { FiList, FiX } from 'react-icons/fi';
|
||||
import { PostToc } from './post-toc';
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
@@ -12,40 +12,99 @@ function cn(...inputs: ClassValue[]) {
|
||||
}
|
||||
|
||||
export function PostLayout({ children, hasToc = true, contentKey }: { children: React.ReactNode; hasToc?: boolean; contentKey?: string }) {
|
||||
const [isTocOpen, setIsTocOpen] = useState(hasToc);
|
||||
const [isTocOpen, setIsTocOpen] = useState(false); // Default closed on mobile
|
||||
const [isDesktopTocOpen, setIsDesktopTocOpen] = useState(hasToc); // Separate state for desktop
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const mobileToc = isTocOpen && hasToc && mounted
|
||||
// Lock body scroll when mobile TOC is open
|
||||
useEffect(() => {
|
||||
if (isTocOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isTocOpen]);
|
||||
|
||||
const mobileToc = hasToc && mounted
|
||||
? createPortal(
|
||||
<div className="toc-mobile fixed bottom-24 right-4 z-[1150] w-72 rounded-2xl border border-white/20 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90 lg:hidden">
|
||||
<div className="max-h-[60vh] overflow-y-auto">
|
||||
<PostToc contentKey={contentKey} onLinkClick={() => setIsTocOpen(false)} />
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 z-[1140] bg-black/40 backdrop-blur-sm transition-opacity duration-300 lg:hidden",
|
||||
isTocOpen ? "opacity-100" : "opacity-0 pointer-events-none"
|
||||
)}
|
||||
onClick={() => setIsTocOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Drawer */}
|
||||
<div
|
||||
className={cn(
|
||||
"fixed bottom-0 left-0 right-0 z-[1150] flex max-h-[85vh] flex-col rounded-t-2xl border-t border-white/20 bg-white/95 shadow-2xl backdrop-blur-xl transition-transform duration-300 ease-snappy dark:border-white/10 dark:bg-slate-900/95 lg:hidden",
|
||||
isTocOpen ? "translate-y-0" : "translate-y-full"
|
||||
)}
|
||||
>
|
||||
{/* Handle / Header */}
|
||||
<div className="flex items-center justify-between border-b border-slate-200/50 px-6 py-4 dark:border-slate-700/50" onClick={() => setIsTocOpen(false)}>
|
||||
<div className="flex items-center gap-2 font-semibold text-slate-900 dark:text-slate-100">
|
||||
<FiList className="h-5 w-5 text-slate-500" />
|
||||
<span>目錄</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsTocOpen(false)}
|
||||
className="rounded-full p-1 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
<FiX className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-6">
|
||||
<PostToc
|
||||
contentKey={contentKey}
|
||||
onLinkClick={() => setIsTocOpen(false)}
|
||||
showTitle={false}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
</>,
|
||||
document.body
|
||||
)
|
||||
: null;
|
||||
|
||||
const tocButton = hasToc && mounted ? (
|
||||
<button
|
||||
onClick={() => setIsTocOpen(!isTocOpen)}
|
||||
onClick={() => setIsTocOpen(true)}
|
||||
className={cn(
|
||||
"toc-button fixed bottom-20 right-4 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-white/80 px-4 py-2.5 shadow-lg backdrop-blur-md hover:bg-white dark:border-white/10 dark:bg-slate-900/80 dark:hover:bg-slate-900",
|
||||
"text-sm font-medium text-slate-600 dark:text-slate-300",
|
||||
"lg:bottom-8 lg:right-20" // Adjust position for desktop
|
||||
"fixed bottom-6 right-16 z-40 flex h-9 items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 text-sm font-medium text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 lg:hidden",
|
||||
isTocOpen ? "opacity-0 pointer-events-none" : "opacity-100"
|
||||
)}
|
||||
aria-label="Toggle Table of Contents"
|
||||
aria-label="Open Table of Contents"
|
||||
>
|
||||
{isTocOpen ? (
|
||||
<FiChevronRight className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<FiList className="h-3.5 w-3.5" />
|
||||
<FiList className="h-4 w-4" />
|
||||
<span>目錄</span>
|
||||
</button>
|
||||
) : null;
|
||||
|
||||
const desktopTocButton = hasToc && mounted ? (
|
||||
<button
|
||||
onClick={() => setIsDesktopTocOpen(!isDesktopTocOpen)}
|
||||
className={cn(
|
||||
"fixed bottom-6 right-16 z-40 hidden h-9 items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 text-sm font-medium text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 lg:flex",
|
||||
)}
|
||||
<span>{isTocOpen ? 'Hide' : 'Menu'}</span>
|
||||
aria-label={isDesktopTocOpen ? "Close Table of Contents" : "Open Table of Contents"}
|
||||
>
|
||||
<FiList className="h-4 w-4" />
|
||||
<span>{isDesktopTocOpen ? '隱藏目錄' : '顯示目錄'}</span>
|
||||
</button>
|
||||
) : null;
|
||||
|
||||
@@ -53,11 +112,11 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
|
||||
<div className="relative">
|
||||
<div className={cn(
|
||||
"group grid gap-8 transition-all duration-500 ease-snappy",
|
||||
isTocOpen && hasToc ? "lg:grid-cols-[1fr_16rem] toc-open" : "lg:grid-cols-[1fr_0rem]"
|
||||
isDesktopTocOpen && hasToc ? "lg:grid-cols-[1fr_16rem] toc-open" : "lg:grid-cols-[1fr_0rem]"
|
||||
)}>
|
||||
{/* Main Content Area */}
|
||||
<div className="min-w-0">
|
||||
<div className={cn("mx-auto transition-all duration-500 ease-snappy", isTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}>
|
||||
<div className={cn("mx-auto transition-all duration-500 ease-snappy", isDesktopTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +124,7 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
|
||||
{/* Desktop Sidebar (TOC) */}
|
||||
<aside className="hidden lg:block">
|
||||
<div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
|
||||
{isTocOpen && hasToc && (
|
||||
{isDesktopTocOpen && hasToc && (
|
||||
<div className="toc-sidebar h-full overflow-y-auto pr-2">
|
||||
<PostToc contentKey={contentKey} />
|
||||
</div>
|
||||
@@ -77,8 +136,14 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
|
||||
{/* Mobile TOC Overlay */}
|
||||
{mobileToc}
|
||||
|
||||
{/* Toggle Button - Rendered via Portal */}
|
||||
{tocButton && createPortal(tocButton, document.body)}
|
||||
{/* Toggle Buttons - Rendered via Portal */}
|
||||
{mounted && createPortal(
|
||||
<>
|
||||
{tocButton}
|
||||
{desktopTocButton}
|
||||
</>,
|
||||
document.body
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user