's'

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