feat: 添加移动端下拉菜单和主题色设置

- 新增 MobileMenu 组件，小屏幕使用汉堡菜单替代多个按钮
- 重构 LanguageSettings 为统一下拉框样式
- 新增设置页面，支持主题色切换
- 翻译页添加源语言选择器
- 更新 8 种语言的 i18n 翻译

src/components/layout/Navbar.tsx

@@ -1,11 +1,18 @@
-import Image from "next/image";
-import { IMAGES } from "@/config/images";
-import { Compass, Folder, Heart, Home, User } from "lucide-react";
+import { Compass, Folder, Heart, Home, Settings, User, Github } from "lucide-react";
 import { LanguageSettings } from "./LanguageSettings";
+import { MobileMenu } from "./MobileMenu";
 import { auth } from "@/auth";
 import { headers } from "next/headers";
 import { getTranslations } from "next-intl/server";
 import { GhostLightButton } from "@/design-system/base/button";
+import type { ReactNode } from "react";
+
+export interface NavigationItem {
+  label: string;
+  href: string;
+  icon?: ReactNode;
+  external?: boolean;
+}
 
 export async function Navbar() {
   const t = await getTranslations("navbar");
@@ -13,49 +20,38 @@ export async function Navbar() {
     headers: await headers()
   });
 
+  const mobileMenuItems: NavigationItem[] = [
+    { label: t("folders"), href: "/folders", icon: <Folder size={18} /> },
+    { label: t("explore"), href: "/explore", icon: <Compass size={18} /> },
+    ...(session ? [{ label: t("favorites"), href: "/favorites", icon: <Heart size={18} /> }] : []),
+    { label: t("sourceCode"), href: "https://github.com/GoddoNebianU/learn-languages", icon: <Github size={18} />, external: true },
+    { label: t("settings"), href: "/settings", icon: <Settings size={18} /> },
+    ...(session
+      ? [{ label: t("profile"), href: "/profile", icon: <User size={18} /> }]
+      : [{ label: t("sign_in"), href: "/login", icon: <User size={18} /> }]
+    ),
+  ];
+
   return (
     <div className="flex justify-between items-center w-full h-16 px-4 md:px-8 bg-primary-500 text-white">
       <GhostLightButton href="/" className="border-b hidden! md:block!" size="md">
         {t("title")}
       </GhostLightButton>
-      <GhostLightButton className="block! md:hidden!" size="md" href={"/"}>
+      <GhostLightButton className="block! md:hidden!" size="md" href="/">
         <Home size={20} />
       </GhostLightButton>
       <div className="flex gap-0.5 justify-center items-center">
         <LanguageSettings />
-        <GhostLightButton
-          className="md:hidden! block!"
-          size="md"
-          href="https://github.com/GoddoNebianU/learn-languages"
-        >
-          <Image
-            src={IMAGES.github_mark_white}
-            alt="GitHub"
-            width={20}
-            height={20}
-          />
-        </GhostLightButton>
         <GhostLightButton href="/folders" className="md:block! hidden!" size="md">
           {t("folders")}
         </GhostLightButton>
-        <GhostLightButton href="/folders" className="md:hidden! block!" size="md">
-          <Folder size={20} />
-        </GhostLightButton>
         <GhostLightButton href="/explore" className="md:block! hidden!" size="md">
           {t("explore")}
         </GhostLightButton>
-        <GhostLightButton href="/explore" className="md:hidden! block!" size="md">
-          <Compass size={20} />
-        </GhostLightButton>
         {session && (
-          <>
-            <GhostLightButton href="/favorites" className="md:block! hidden!" size="md">
-              {t("favorites")}
-            </GhostLightButton>
-            <GhostLightButton href="/favorites" className="md:hidden! block!" size="md">
-              <Heart size={20} />
-            </GhostLightButton>
-          </>
+          <GhostLightButton href="/favorites" className="md:block! hidden!" size="md">
+            {t("favorites")}
+          </GhostLightButton>
         )}
         <GhostLightButton
           className="hidden! md:block!"
@@ -64,23 +60,21 @@ export async function Navbar() {
         >
           {t("sourceCode")}
         </GhostLightButton>
-        {
-          (() => {
-            return session &&
-              <>
-                <GhostLightButton href="/profile" className="hidden! md:block!" size="md">{t("profile")}</GhostLightButton>
-                <GhostLightButton href="/profile" className="md:hidden! block!" size="md">
-                  <User size={20} />
-                </GhostLightButton>
-              </>
-              || <>
-                <GhostLightButton href="/login" className="hidden! md:block!" size="md">{t("sign_in")}</GhostLightButton>
-                <GhostLightButton href="/login" className="md:hidden! block!" size="md">
-                  <User size={20} />
-                </GhostLightButton>
-              </>;
-          })()
-        }
+        <GhostLightButton href="/settings" className="hidden! md:block!" size="md">
+          {t("settings")}
+        </GhostLightButton>
+        {session ? (
+          <GhostLightButton href="/profile" className="hidden! md:block!" size="md">
+            {t("profile")}
+          </GhostLightButton>
+        ) : (
+          <GhostLightButton href="/login" className="hidden! md:block!" size="md">
+            {t("sign_in")}
+          </GhostLightButton>
+        )}
+        <div className="md:hidden!">
+          <MobileMenu items={mobileMenuItems} />
+        </div>
       </div>
     </div>
   );