Update navigation layout and assets

components/nav-menu.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useRef, FocusEvent } from 'react';
+import { useState, useRef, FocusEvent, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import {
   FiMenu,
   FiX,
@@ -15,9 +16,11 @@ import {
   FiServer,
   FiCpu,
   FiList,
-  FiChevronDown
+  FiChevronDown,
+  FiChevronRight
 } from 'react-icons/fi';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 export type IconKey =
   | 'home'
@@ -61,10 +64,35 @@ interface NavMenuProps {
 export function NavMenu({ items }: NavMenuProps) {
   const [open, setOpen] = useState(false);
   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
+  const [expandedMobileItems, setExpandedMobileItems] = useState<string[]>([]);
+  const [mounted, setMounted] = useState(false);
   const closeTimer = useRef<number | null>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Lock body scroll when menu is open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [open]);
+
+  // Close menu on route change
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname]);
 
   const toggle = () => setOpen((val) => !val);
   const close = () => setOpen(false);
+
   const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
     if (!event.currentTarget.contains(event.relatedTarget as Node)) {
       setActiveDropdown(null);
@@ -88,7 +116,13 @@ export function NavMenu({ items }: NavMenuProps) {
     closeTimer.current = window.setTimeout(() => setActiveDropdown(null), 180);
   };
 
-  const renderChild = (item: NavLinkItem) => {
+  const toggleMobileItem = (key: string) => {
+    setExpandedMobileItems(prev =>
+      prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
+    );
+  };
+
+  const renderDesktopChild = (item: NavLinkItem) => {
     const Icon = ICON_MAP[item.iconKey] ?? FiFile;
     return item.href ? (
       <Link
@@ -103,20 +137,115 @@ export function NavMenu({ items }: NavMenuProps) {
     ) : null;
   };
 
+  const renderMobileItem = (item: NavLinkItem, depth = 0) => {
+    const Icon = ICON_MAP[item.iconKey] ?? FiFile;
+    const hasChildren = item.children && item.children.length > 0;
+    const isExpanded = expandedMobileItems.includes(item.key);
+
+    if (hasChildren) {
+      return (
+        <div key={item.key} className="flex flex-col">
+          <button
+            onClick={() => toggleMobileItem(item.key)}
+            className="flex w-full items-center justify-between rounded-xl px-4 py-3 text-base font-medium text-slate-700 transition-colors active:bg-slate-100 dark:text-slate-200 dark:active:bg-slate-800"
+          >
+            <div className="flex items-center gap-3">
+              <Icon className="h-5 w-5 text-slate-400" />
+              <span>{item.label}</span>
+            </div>
+            <FiChevronRight
+              className={`h-5 w-5 text-slate-400 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
+            />
+          </button>
+          <div
+            className={`grid transition-all duration-200 ease-in-out ${isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+              }`}
+          >
+            <div className="overflow-hidden">
+              <div className="flex flex-col gap-1 pl-4 pt-1">
+                {item.children!.map(child => renderMobileItem(child, depth + 1))}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return item.href ? (
+      <Link
+        key={item.key}
+        href={item.href}
+        className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-base font-medium text-slate-700 transition-colors active:bg-slate-100 dark:text-slate-200 dark:active:bg-slate-800"
+        onClick={close}
+      >
+        <Icon className="h-5 w-5 text-slate-400" />
+        <span>{item.label}</span>
+      </Link>
+    ) : null;
+  };
+
   return (
-    <div className="relative z-50 flex items-center gap-3">
+    <>
+      {/* Mobile Menu Trigger */}
       <button
         type="button"
-        className="sm:hidden inline-flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition duration-180 ease-snappy hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800"
+        className="relative z-50 inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800 sm:hidden"
         aria-label={open ? '關閉選單' : '開啟選單'}
         aria-expanded={open}
         onClick={toggle}
       >
-        {open ? <FiX className="h-4 w-4" /> : <FiMenu className="h-4 w-4" />}
+        <div className="relative h-5 w-5">
+          <span
+            className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? 'rotate-45' : '-translate-y-1.5'
+              }`}
+          />
+          <span
+            className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? 'opacity-0' : 'opacity-100'
+              }`}
+          />
+          <span
+            className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? '-rotate-45' : 'translate-y-1.5'
+              }`}
+          />
+        </div>
       </button>
-      <nav
-        className={`${open ? 'flex' : 'hidden'} flex-col gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3`}
-      >
+
+      {/* Mobile Menu Overlay - Portaled */}
+      {mounted && createPortal(
+        <div
+          className={`fixed inset-0 z-[100] flex flex-col bg-white/95 backdrop-blur-xl transition-all duration-300 ease-snappy dark:bg-gray-950/95 sm:hidden ${open ? 'visible opacity-100' : 'invisible opacity-0 pointer-events-none'
+            }`}
+        >
+          {/* Close button area */}
+          <div className="flex items-center justify-end px-4 py-3">
+            <button
+              type="button"
+              className="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800"
+              onClick={close}
+              aria-label="Close menu"
+            >
+              <div className="relative h-5 w-5">
+                <span className="absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 rotate-45 bg-current" />
+                <span className="absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 -rotate-45 bg-current" />
+              </div>
+            </button>
+          </div>
+
+          <div className="container mx-auto flex flex-1 flex-col px-4 pb-8">
+            <div className="flex flex-1 flex-col gap-2 overflow-y-auto pt-4">
+              {items.map(item => renderMobileItem(item))}
+            </div>
+
+            <div className="mt-auto pt-8 text-center text-xs text-slate-400">
+              <p>© {new Date().getFullYear()} All rights reserved.</p>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Desktop Menu */}
+      <nav className="hidden sm:flex sm:items-center sm:gap-3">
         {items.map((item) => {
           if (item.children && item.children.length > 0) {
             const Icon = ICON_MAP[item.iconKey] ?? FiFile;
@@ -141,23 +270,16 @@ export function NavMenu({ items }: NavMenuProps) {
                   <FiChevronDown className="h-3 w-3 text-slate-400 transition group-hover:text-accent" />
                 </button>
 
-                {/* Desktop dropdown */}
                 <div
-                  className={`absolute left-0 top-full hidden min-w-[12rem] rounded-2xl border border-slate-200 bg-white p-2 shadow-lg transition duration-200 ease-snappy dark:border-slate-800 dark:bg-slate-900 sm:block z-50 ${
-                    isOpen ? 'pointer-events-auto translate-y-2 opacity-100' : 'pointer-events-none translate-y-1 opacity-0'
-                  }`}
+                  className={`absolute left-0 top-full z-50 hidden min-w-[12rem] rounded-2xl border border-slate-200 bg-white p-2 shadow-lg transition duration-200 ease-snappy dark:border-slate-800 dark:bg-slate-900 sm:block ${isOpen ? 'pointer-events-auto translate-y-2 opacity-100' : 'pointer-events-none translate-y-1 opacity-0'
+                    }`}
                   role="menu"
                   aria-label={item.label}
                 >
                   <div className="flex flex-col gap-1">
-                    {item.children.map((child) => renderChild(child))}
+                    {item.children.map((child) => renderDesktopChild(child))}
                   </div>
                 </div>
-
-                {/* Mobile inline list */}
-                <div className="sm:hidden ml-3 mt-1 flex flex-col gap-1">
-                  {item.children.map((child) => renderChild(child))}
-                </div>
               </div>
             );
           }
@@ -178,6 +300,6 @@ export function NavMenu({ items }: NavMenuProps) {
           ) : null;
         })}
       </nav>
-    </div>
+    </>
   );
 }

components/post-layout.tsx

@@ -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>
     );
 }

components/post-toc.tsx

@@ -9,7 +9,17 @@ interface TocItem {
   depth: number;
 }
 
-export function PostToc({ onLinkClick, contentKey }: { onLinkClick?: () => void; contentKey?: string }) {
+export function PostToc({
+  onLinkClick,
+  contentKey,
+  showTitle = true,
+  className
+}: {
+  onLinkClick?: () => void;
+  contentKey?: string;
+  showTitle?: boolean;
+  className?: string;
+}) {
   const [items, setItems] = useState<TocItem[]>([]);
   const [activeId, setActiveId] = useState<string | null>(null);
   const listRef = useRef<HTMLDivElement | null>(null);
@@ -126,11 +136,13 @@ export function PostToc({ onLinkClick, contentKey }: { onLinkClick?: () => void;
   if (items.length === 0) return null;
 
   return (
-    <nav className="not-prose sticky top-20 text-slate-500 dark:text-slate-400">
-      <div className="mb-2 inline-flex items-center gap-2 font-semibold text-slate-700 dark:text-slate-200">
-        <FiList className="h-4 w-4 text-slate-400" />
-        目錄
-      </div>
+    <nav className={`not-prose text-slate-500 dark:text-slate-400 ${className || 'sticky top-20'}`}>
+      {showTitle && (
+        <div className="mb-2 inline-flex items-center gap-2 font-semibold text-slate-700 dark:text-slate-200">
+          <FiList className="h-4 w-4 text-slate-400" />
+          目錄
+        </div>
+      )}
       <div className="relative pl-4">
         <span className="absolute left-1 top-0 h-full w-px bg-slate-200 dark:bg-slate-800" aria-hidden="true" />
         <span
@@ -155,11 +167,10 @@ export function PostToc({ onLinkClick, contentKey }: { onLinkClick?: () => void;
               <a
                 href={`#${item.id}`}
                 onClick={handleClick(item.id)}
-                className={`line-clamp-2 inline-flex items-center pl-2 hover:text-blue-600 dark:hover:text-blue-400 ${
-                  item.id === activeId
+                className={`line-clamp-2 inline-flex items-center py-1 pl-2 hover:text-blue-600 dark:hover:text-blue-400 ${item.id === activeId
                     ? 'text-blue-600 dark:text-blue-400 font-semibold'
                     : ''
-                }`}
+                  }`}
               >
                 {item.text}
               </a>

components/timeline-wrapper.tsx

@@ -9,20 +9,20 @@ interface TimelineWrapperProps {
 export function TimelineWrapper({ children, className }: TimelineWrapperProps) {
   const items = Children.toArray(children);
   return (
-    <div className={clsx('relative pl-8', className)}>
+    <div className={clsx('relative pl-6 md:pl-8', className)}>
       <span
-        className="pointer-events-none absolute left-3 top-0 h-full w-[2px] rounded-full bg-blue-400 shadow-[0_0_10px_rgba(59,130,246,0.35)] dark:bg-cyan-300"
+        className="pointer-events-none absolute left-2 top-0 h-full w-[2px] rounded-full bg-blue-400 shadow-[0_0_10px_rgba(59,130,246,0.35)] dark:bg-cyan-300 md:left-3"
         aria-hidden="true"
       />
       <span
-        className="pointer-events-none absolute left-3 top-0 h-full w-[8px] rounded-full bg-blue-500/15 blur-[14px]"
+        className="pointer-events-none absolute left-2 top-0 h-full w-[8px] rounded-full bg-blue-500/15 blur-[14px] md:left-3"
         aria-hidden="true"
       />
 
       <div className="space-y-4">
         {items.map((child, index) => (
-          <div key={index} className="relative pl-6 sm:pl-8">
-            <span className="pointer-events-none absolute left-0 top-1/2 h-px w-8 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-transparent via-blue-300/80 to-transparent dark:via-cyan-200/80" aria-hidden="true" />
+          <div key={index} className="relative pl-5 sm:pl-8">
+            <span className="pointer-events-none absolute left-0 top-1/2 h-px w-5 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-transparent via-blue-300/80 to-transparent dark:via-cyan-200/80 sm:w-8" aria-hidden="true" />
             {child}
           </div>
         ))}