's'

app/components/CityCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { memo, useState } from "react";
 import { City } from "../data/cities";
 
 function ratingToPercent(rating: string): number {
@@ -20,17 +20,14 @@ function getBarColor(p: number): string {
   return "#ef4444";
 }
 
-function ScoreBar({
-  icon,
-  label,
-  percent,
-  animate,
-}: {
+interface ScoreBarProps {
   icon: string;
   label: string;
   percent: number;
   animate: boolean;
-}) {
+}
+
+const ScoreBar = memo(function ScoreBar({ icon, label, percent, animate }: ScoreBarProps) {
   return (
     <div className="flex items-center gap-2 sm:gap-3">
       <span className="text-white/80 text-xs sm:text-sm w-14 sm:w-16 shrink-0 flex items-center gap-1">
@@ -48,17 +45,15 @@ function ScoreBar({
       </div>
     </div>
   );
-}
+});
 
-export default function CityCard({
-  city,
-  rank,
-  onClick,
-}: {
+interface CityCardProps {
   city: City;
   rank: number;
   onClick?: () => void;
-}) {
+}
+
+function CityCardComponent({ city, rank, onClick }: CityCardProps) {
   const [hovered, setHovered] = useState(false);
 
   const scores = [
@@ -194,3 +189,5 @@ export default function CityCard({
     </div>
   );
 }
+
+export default memo(CityCardComponent);

app/components/FilterBar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { allTags } from "../data/cities";
+import { memo } from "react";
+import { allTags, FILTER_OPTIONS } from "../data/cities";
 
 interface FilterBarProps {
   activeFilter: string;
@@ -10,16 +11,6 @@ interface FilterBarProps {
   resultCount: number;
 }
 
-const sortOptions = [
-  { value: "score", label: "综合评分" },
-  { value: "cost-asc", label: "费用最低" },
-  { value: "cost-desc", label: "费用最高" },
-  { value: "internet", label: "网速最快" },
-  { value: "safety", label: "最安全" },
-  { value: "nomads", label: "游民最多" },
-  { value: "temperature", label: "最温暖" },
-];
-
 const tagIcons: Record<string, string> = {
   全部: "🌍",
   热门: "🔥",
@@ -40,7 +31,7 @@ const tagIcons: Record<string, string> = {
   户外运动: "🏄",
 };
 
-export default function FilterBar({
+function FilterBarComponent({
   activeFilter,
   onFilterChange,
   sortBy,
@@ -52,21 +43,21 @@ export default function FilterBar({
       {/* Top bar: result count + sort */}
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
-          <h2 className="text-lg font-bold text-gray-900">
+          <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">
             发现目的地
           </h2>
-          <span className="text-sm text-gray-400">
+          <span className="text-sm text-gray-400 dark:text-gray-500">
             {resultCount} 个城市
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-xs text-gray-400 hidden sm:block">排序:</span>
+          <span className="text-xs text-gray-400 dark:text-gray-500 hidden sm:block">排序:</span>
           <select
             value={sortBy}
             onChange={(e) => onSortChange(e.target.value)}
-            className="text-sm bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-200 cursor-pointer"
+            className="text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-700 cursor-pointer"
           >
-            {sortOptions.map((opt) => (
+            {FILTER_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>
                 {opt.label}
               </option>
@@ -83,8 +74,8 @@ export default function FilterBar({
             onClick={() => onFilterChange(tag)}
             className={`filter-btn shrink-0 flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium border transition-all ${
               activeFilter === tag
-                ? "active border-gray-900"
-                : "border-gray-200 text-gray-600 hover:border-gray-300"
+                ? "active border-gray-900 dark:border-gray-100"
+                : "border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600"
             }`}
           >
             <span className="text-xs">{tagIcons[tag] || "🏷️"}</span>
@@ -95,3 +86,5 @@ export default function FilterBar({
     </div>
   );
 }
+
+export default memo(FilterBarComponent);

app/components/Footer.tsx

@@ -1,59 +1,18 @@
 "use client";
 
+import { memo } from "react";
 import { Link, useTranslation } from "@/i18n/navigation";
+import { FOOTER_SECTIONS } from "@/config";
 
-const footerSections = [
-  {
-    titleKey: "community" as const,
-    links: [
-      { labelKey: "join" as const, href: "/join" },
-      { labelKey: "meetups" as const, href: "/meetups" },
-      { labelKey: "dating" as const, href: "/dating" },
-      { labelKey: "map" as const, href: "#" },
-    ],
-  },
-  {
-    titleKey: "tools" as const,
-    links: [
-      { labelKey: "dashboard" as const, href: "/dashboard" },
-      { labelKey: "cost" as const, href: "/tools" },
-      { labelKey: "ai" as const, href: "/ai" },
-      { labelKey: "coworking" as const, href: "#" },
-      { labelKey: "compare" as const, href: "#" },
-    ],
-  },
-  {
-    titleKey: "resources" as const,
-    links: [
-      { labelKey: "guide" as const, href: "#" },
-      { labelKey: "cityGuide" as const, href: "#" },
-      { labelKey: "stories" as const, href: "#" },
-      { labelKey: "report" as const, href: "/report" },
-      { labelKey: "faq" as const, href: "#" },
-    ],
-  },
-  {
-    titleKey: "about" as const,
-    links: [
-      { labelKey: "aboutUs" as const, href: "/about" },
-      { labelKey: "pricing" as const, href: "/pricing" },
-      { labelKey: "gigs" as const, href: "/gigs" },
-      { labelKey: "recruit" as const, href: "/jobs" },
-      { labelKey: "terms" as const, href: "#" },
-      { labelKey: "privacy" as const, href: "#" },
-      { labelKey: "contact" as const, href: "#" },
-    ],
-  },
-];
-
-export default function Footer() {
+function FooterComponent() {
   const { t } = useTranslation("footer");
+  const { t: tCommon } = useTranslation("common");
 
   return (
     <footer className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
       <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-10 sm:py-12">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mb-8">
-          {footerSections.map((section) => (
+          {FOOTER_SECTIONS.map((section) => (
             <div key={section.titleKey}>
               <h4 className="font-bold text-gray-900 dark:text-gray-100 text-sm mb-3">
                 {t(section.titleKey)}
@@ -85,13 +44,13 @@ export default function Footer() {
         <div className="pt-8 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
           <div className="flex items-center gap-2">
             <span className="text-xl">🌏</span>
-            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">游牧中国</span>
+            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{tCommon("siteNameShort")}</span>
           </div>
           <p className="text-xs text-gray-400 dark:text-gray-500">
             {t("copyright")}
           </p>
           <div className="flex items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
-            <span>CNY ¥</span>
+            <span>{tCommon("currency") || "CNY ¥"}</span>
             <span>°C</span>
           </div>
         </div>
@@ -99,3 +58,5 @@ export default function Footer() {
     </footer>
   );
 }
+
+export default memo(FooterComponent);

app/components/Navbar.tsx

@@ -1,47 +1,40 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/i18n/navigation";
 import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
+import { getNavLinks } from "@/config";
 import AuthModal from "./AuthModal";
 import ThemeToggle from "./ThemeToggle";
+import SiteMenu from "./SiteMenu";
 
-const navLinks = [
-  { labelKey: "cities" as const, icon: "🏙️", href: "/" },
-  { labelKey: "dashboard" as const, icon: "📍", href: "/dashboard" },
-  { labelKey: "travel" as const, icon: "✈️", href: "/meetups" },
-  { labelKey: "community" as const, icon: "💬", href: "/dating" },
-  { labelKey: "tools" as const, icon: "📊", href: "/tools" },
-  { labelKey: "ai" as const, icon: "🤖", href: "/ai" },
-  { labelKey: "gigs" as const, icon: "💰", href: "/gigs" },
-  { labelKey: "pricing" as const, icon: "👑", href: "/pricing" },
-  { labelKey: "explore" as const, icon: "🎒", href: "/#community" },
-];
-
-export default function Navbar() {
+export default function NavbarComponent() {
   const { t } = useTranslation("common");
   const { t: tNav } = useTranslation("nav");
   const locale = useLocale();
   const pathname = usePathname();
   const router = useRouter();
   const [mobileOpen, setMobileOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
   const [authOpen, setAuthOpen] = useState(false);
   const [userEmail, setUserEmail] = useState<string | null>(null);
 
+  const navLinks = getNavLinks();
+
   useEffect(() => {
     setUserEmail(getStoredUserEmail());
   }, []);
 
-  const handleLogout = () => {
+  const handleLogout = useCallback(() => {
     pbLogout();
     setUserEmail(null);
-  };
+  }, []);
 
-  function isActive(href: string) {
+  const isActive = useCallback((href: string) => {
     if (href.startsWith("/#")) return false;
     if (href === "/") return pathname === "/";
     return pathname.startsWith(href);
-  }
+  }, [pathname]);
 
   return (
     <nav className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-100 dark:border-gray-800">
@@ -53,24 +46,41 @@ export default function Navbar() {
           </span>
         </Link>
 
-        <div className="hidden md:flex items-center gap-1 overflow-x-auto max-w-[calc(100vw-280px)] scrollbar-hide">
-          {navLinks.map((link) => (
+        <div className="hidden lg:flex items-center gap-1 overflow-x-auto max-w-[calc(100vw-400px)] scrollbar-hide">
+          <button
+            onClick={() => setMenuOpen(true)}
+            className="flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border border-gray-200 dark:border-gray-700 whitespace-nowrap"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+            <span className="hidden xl:inline">{tNav("menu")}</span>
+          </button>
+          {navLinks.slice(0, 5).map((link) => (
             <Link
               key={link.labelKey}
               href={link.href}
-              className={`flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+              className={`flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap ${
                 isActive(link.href)
                   ? "text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800"
                   : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800"
               }`}
             >
               <span>{link.icon}</span>
-              <span>{tNav(link.labelKey)}</span>
+              <span className="hidden 2xl:inline">{tNav(link.labelKey)}</span>
             </Link>
           ))}
         </div>
 
-        <div className="flex items-center gap-2 sm:gap-3">
+        <div className="flex items-center gap-1 sm:gap-2">
+          <button
+            className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
+            onClick={() => setMenuOpen(true)}
+          >
+            <svg className="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
           {userEmail ? (
             <div className="flex items-center gap-2">
               <span className="hidden sm:block max-w-[120px] truncate text-sm text-gray-600 dark:text-gray-400">
@@ -78,7 +88,7 @@ export default function Navbar() {
               </span>
               <button
                 onClick={handleLogout}
-                className="rounded-full border border-gray-200 dark:border-gray-700 px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                className="rounded-full border border-gray-200 dark:border-gray-700 px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors whitespace-nowrap"
               >
                 {t("logout")}
               </button>
@@ -86,7 +96,7 @@ export default function Navbar() {
           ) : (
             <button
               onClick={() => setAuthOpen(true)}
-              className="hidden sm:block text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-full hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+              className="hidden md:block text-xs sm:text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-2 sm:px-3 py-2 rounded-full hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors whitespace-nowrap"
             >
               {t("loginRegister")}
             </button>
@@ -94,7 +104,7 @@ export default function Navbar() {
           <button
             type="button"
             onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
-            className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
             aria-label={locale === "zh" ? "Switch to English" : "切换到中文"}
             title={locale === "zh" ? "EN" : "中文"}
           >
@@ -103,7 +113,7 @@ export default function Navbar() {
           <ThemeToggle />
           <Link
             href="/join"
-            className="text-sm bg-[#ff4d4f] text-white px-4 py-2 rounded-full hover:bg-[#ff7a45] transition-colors font-medium"
+            className="text-xs sm:text-sm bg-[#ff4d4f] text-white px-3 sm:px-4 py-2 rounded-full hover:bg-[#ff7a45] transition-colors font-medium whitespace-nowrap"
           >
             {t("explore")}
           </Link>
@@ -172,6 +182,11 @@ export default function Navbar() {
         onClose={() => setAuthOpen(false)}
         onSuccess={(email) => setUserEmail(email)}
       />
+      <SiteMenu
+        isOpen={menuOpen}
+        onClose={() => setMenuOpen(false)}
+        onLoginClick={() => { setMenuOpen(false); setAuthOpen(true); }}
+      />
     </nav>
   );
 }

app/components/SiteMenu.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import { memo, useState, useEffect, useRef } from "react";
+import { Link, usePathname, useTranslation } from "@/i18n/navigation";
+import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
+import ThemeToggle from "./ThemeToggle";
+
+interface MenuItem {
+  labelKey: string;
+  href: string;
+  icon: string;
+  new?: boolean;
+  ad?: boolean;
+}
+
+interface MenuSection {
+  titleKey: string;
+  items: MenuItem[];
+}
+
+export default memo(function SiteMenu({
+  isOpen,
+  onClose,
+  onLoginClick,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onLoginClick: () => void;
+}) {
+  const { t } = useTranslation("menu");
+  const pathname = usePathname();
+  const ref = useRef<HTMLDivElement>(null);
+  const [search, setSearch] = useState("");
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+
+  useEffect(() => {
+    setUserEmail(getStoredUserEmail());
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  const sections: MenuSection[] = [
+    {
+      titleKey: "community",
+      items: [
+        { labelKey: "dating", href: "/dating", icon: "❤️" },
+        { labelKey: "chat", href: "/join", icon: "💬" },
+        { labelKey: "hostMeetup", href: "/meetups", icon: "🎤", new: true },
+        { labelKey: "friendFinder", href: "/dating", icon: "💛" },
+        { labelKey: "membersMap", href: "#", icon: "🌐" },
+        { labelKey: "attendMeetup", href: "/meetups", icon: "🍹" },
+      ],
+    },
+    {
+      titleKey: "tools",
+      items: [
+        { labelKey: "explore", href: "/", icon: "📍" },
+        { labelKey: "nextStop", href: "/dashboard", icon: "🗺️" },
+        { labelKey: "climateFinder", href: "/tools", icon: "🌤️" },
+        { labelKey: "fireCalculator", href: "/tools", icon: "🌱" },
+        { labelKey: "aiAssistant", href: "/ai", icon: "🤖", new: true },
+        { labelKey: "yearInReview", href: "/report", icon: "🥂" },
+        { labelKey: "nomadStats", href: "/report", icon: "📊", new: true },
+        { labelKey: "gigBoard", href: "/gigs", icon: "💰" },
+        { labelKey: "costCalculator", href: "/tools", icon: "💱" },
+      ],
+    },
+    {
+      titleKey: "help",
+      items: [
+        { labelKey: "ideasBugs", href: "#", icon: "💡" },
+        { labelKey: "faq", href: "#", icon: "🆘" },
+        { labelKey: "terms", href: "#", icon: "📄" },
+        { labelKey: "changelog", href: "#", icon: "🚀" },
+      ],
+    },
+    {
+      titleKey: "other",
+      items: [
+        { labelKey: "remoteJobs", href: "#", icon: "💼" },
+        { labelKey: "coworking", href: "#", icon: "🏢" },
+      ],
+    },
+  ];
+
+  const profileItems: MenuItem[] = [
+    { labelKey: "yourProfile", href: "/join", icon: "👤" },
+    { labelKey: "settings", href: "/join", icon: "⚙️" },
+    { labelKey: "favorites", href: "/", icon: "❤️" },
+    { labelKey: "pricing", href: "/pricing", icon: "👑" },
+    { labelKey: "nomadInsurance", href: "#", icon: "🛡️", ad: true },
+  ];
+
+  const filteredSections = sections.map((sec) => ({
+    ...sec,
+    items: search
+      ? sec.items.filter((i) =>
+          t(i.labelKey).toLowerCase().includes(search.toLowerCase())
+        )
+      : sec.items,
+  })).filter((sec) => sec.items.length > 0);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm md:bg-transparent md:backdrop-blur-none" aria-hidden />
+      <div
+        ref={ref}
+        className="fixed left-4 right-4 top-20 md:left-auto md:right-4 md:top-16 md:w-[480px] z-50 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl overflow-hidden"
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-gray-100 dark:border-gray-800 space-y-3">
+          <div className="flex items-center gap-2">
+            {userEmail ? (
+              <div className="flex items-center gap-2 flex-1 min-w-0">
+                <div className="w-9 h-9 rounded-full bg-gradient-to-br from-[#ff4d4f] to-orange-500 flex items-center justify-center text-white text-sm font-bold shrink-0">
+                  {userEmail[0].toUpperCase()}
+                </div>
+                <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                  {userEmail}
+                </span>
+              </div>
+            ) : (
+              <button
+                onClick={onLoginClick}
+                className="px-4 py-2 rounded-lg bg-[#ff4d4f] text-white text-sm font-medium hover:bg-[#ff3333] transition-colors"
+              >
+                {t("login")}
+              </button>
+            )}
+            <Link
+              href="/dashboard"
+              onClick={onClose}
+              className="px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            >
+              {t("filters")}
+            </Link>
+            <Link
+              href="/join"
+              onClick={onClose}
+              className="w-9 h-9 rounded-full bg-[#ff4d4f] text-white flex items-center justify-center hover:bg-[#ff3333] transition-colors shrink-0"
+              aria-label={t("add")}
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+            </Link>
+          </div>
+          <div className="relative">
+            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={t("searchPlaceholder")}
+              className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f]"
+            />
+          </div>
+        </div>
+
+        {/* Profile + Dark mode */}
+        <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex flex-wrap items-center gap-2">
+          {profileItems.map((item) => (
+            <Link
+              key={item.labelKey}
+              href={item.href}
+              onClick={onClose}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+            >
+              <span>{item.icon}</span>
+              <span>{t(item.labelKey)}</span>
+            </Link>
+          ))}
+          <div className="ml-auto flex items-center gap-2">
+            <span className="text-xs text-gray-500 dark:text-gray-400">{t("darkMode")}</span>
+            <ThemeToggle />
+          </div>
+        </div>
+
+        {/* Sections */}
+        <div className="max-h-[60vh] overflow-y-auto p-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            {filteredSections.map((section) => (
+              <div key={section.titleKey}>
+                <h3 className="text-xs font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">
+                  {t(section.titleKey)}
+                </h3>
+                <ul className="space-y-1">
+                  {section.items.map((item) => (
+                    <li key={item.labelKey}>
+                      <Link
+                        href={item.href}
+                        onClick={onClose}
+                        className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+                          item.href !== "#" && (pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href)))
+                            ? "bg-[#ff4d4f]/10 text-[#ff4d4f]"
+                            : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
+                        }`}
+                      >
+                        <span className="w-5 text-center">{item.icon}</span>
+                        <span className="flex-1">{t(item.labelKey)}</span>
+                        {item.new && (
+                          <span className="px-2 py-0.5 rounded-full bg-[#ff4d4f] text-white text-[10px] font-medium">
+                            NEW
+                          </span>
+                        )}
+                        {item.ad && (
+                          <span className="px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-[10px] text-gray-500">
+                            Ad
+                          </span>
+                        )}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Footer */}
+        {userEmail && (
+          <div className="p-4 border-t border-gray-100 dark:border-gray-800">
+            <button
+              onClick={() => {
+                pbLogout();
+                onClose();
+              }}
+              className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+            >
+              <span>🚪</span>
+              <span>{t("logout")}</span>
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});

app/components/ThemeToggle.tsx

@@ -1,19 +1,38 @@
 "use client";
 
-import { useTheme } from "../context/ThemeContext";
+import { useTheme } from "@/app/context/ThemeContext";
+import { useState, useEffect } from "react";
 
 export default function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
+  const isDark = theme === "dark";
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+        aria-label="切换主题"
+      >
+        <div className="h-5 w-5" />
+      </button>
+    );
+  }
 
   return (
     <button
       type="button"
       onClick={toggleTheme}
       className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-      aria-label={theme === "dark" ? "切换到日间模式" : "切换到夜间模式"}
-      title={theme === "dark" ? "日间模式" : "夜间模式"}
+      aria-label={isDark ? "切换到日间模式" : "切换到夜间模式"}
+      title={isDark ? "日间模式" : "夜间模式"}
     >
-      {theme === "dark" ? (
+      {isDark ? (
         <svg
           className="h-5 w-5"
           fill="none"