From 9a5a5b99e6b50faecd7475d406d9c2655ecf9166 Mon Sep 17 00:00:00 2001
From: Snowykami <snowykami@outlook.com>
Date: Mon, 28 Jul 2025 14:06:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E6=9C=AA?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=E5=AF=BC=E5=85=A5=E5=92=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96Navbar=E7=BB=84=E4=BB=B6=E7=9A=84=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/blog-home.tsx |   1 -
 web/src/components/blog-post.tsx |   6 +-
 web/src/components/navbar.tsx    | 101 ++++++++++++++-----------------
 3 files changed, 51 insertions(+), 57 deletions(-)

diff --git a/web/src/components/blog-home.tsx b/web/src/components/blog-home.tsx
index 5e4f94f..be27d4d 100644
--- a/web/src/components/blog-home.tsx
+++ b/web/src/components/blog-home.tsx
@@ -14,7 +14,6 @@ import { useStoredState } from '@/hooks/use-storage-state';
 import { listLabels } from "@/api/label";
 import { POST_SORT_TYPE } from "@/localstore";
 
-
 // 定义排序类型
 type SortType = 'latest' | 'popular';
 
diff --git a/web/src/components/blog-post.tsx b/web/src/components/blog-post.tsx
index 8e7fa14..f172abb 100644
--- a/web/src/components/blog-post.tsx
+++ b/web/src/components/blog-post.tsx
@@ -4,6 +4,7 @@ import { Calendar, Clock, FileText, Flame, Heart, MessageCircle, PenLine, Square
 import { MDXRemote } from "next-mdx-remote-client/rsc";
 import ScrollToTop from "@/components/scroll-to-top.client";
 import { RenderMarkdown } from "@/components/markdown";
+import { isMobileByUA } from "@/utils/server/device";
 
 function PostMeta({ post }: { post: Post }) {
   return (
@@ -59,9 +60,10 @@ function PostMeta({ post }: { post: Post }) {
   );
 }
 
-function PostHeader({ post }: { post: Post }) {
+async function PostHeader({ post }: { post: Post }) {
+  const isMobile = await isMobileByUA();
   return (
-    <div className="relative py-32">
+    <div className={`relative ${isMobile ? "py-16" : "py-32"}`}>
       {/* 背景层 */}
       <div
         className="pointer-events-none absolute inset-0 left-1/2 right-1/2 w-screen -translate-x-1/2 bg-gradient-to-bl from-blue-700 to-purple-700 dark:from-blue-500 dark:to-purple-500"
diff --git a/web/src/components/navbar.tsx b/web/src/components/navbar.tsx
index dfe05a6..81bfad1 100644
--- a/web/src/components/navbar.tsx
+++ b/web/src/components/navbar.tsx
@@ -15,7 +15,7 @@ import {
 import GravatarAvatar from "@/components/gravatar"
 import { useDevice } from "@/contexts/device-context"
 import config from "@/config"
-import { useState, useEffect } from "react"
+import { useState } from "react"
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
 import { Menu } from "lucide-react"
 import { Switch } from "./ui/switch"
@@ -64,10 +64,8 @@ export function Navbar() {
 }
 
 function NavMenuCenter() {
-    const { isMobile } = useDevice()
-    if (isMobile) return null
     return (
-        <NavigationMenu viewport={false}>
+        <NavigationMenu viewport={false} className="hidden md:block">
             <NavigationMenuList className="flex space-x-1">
                 {navbarMenuComponents.map((item) => (
                     <NavigationMenuItem key={item.title}>
@@ -123,62 +121,57 @@ function ListItem({
 }
 
 function SidebarMenuClientOnly() {
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => setMounted(true), []);
-    if (!mounted) return null;
     return <SidebarMenu />;
 }
 
 function SidebarMenu() {
     const [open, setOpen] = useState(false)
-    const { isMobile } = useDevice()
-
-    if (!isMobile) return null
-
     return (
-        <Sheet open={open} onOpenChange={setOpen}>
-            <SheetTrigger asChild>
-                <button
-                    aria-label="打开菜单"
-                    className="p-2 rounded-md hover:bg-accent transition-colors"
-                >
-                    <Menu className="w-6 h-6" />
-                </button>
-            </SheetTrigger>
-            <SheetContent side="right" className="p-0 w-64">
-                {/* 可访问性要求的标题，视觉上隐藏 */}
-                <SheetTitle className="sr-only">侧边栏菜单</SheetTitle>
-                <nav className="flex flex-col gap-2 p-4">
-                    {navbarMenuComponents.map((item) =>
-                        item.href ? (
-                            <Link
-                                key={item.title}
-                                href={item.href}
-                                className="py-2 px-3 rounded hover:bg-accent font-bold transition-colors"
-                                onClick={() => setOpen(false)}
-                            >
-                                {item.title}
-                            </Link>
-                        ) : item.children ? (
-                            <div key={item.title} className="mb-2">
-                                <div className="font-bold px-3 py-2">{item.title}</div>
-                                <div className="flex flex-col pl-4">
-                                    {item.children.map((child) => (
-                                        <Link
-                                            key={child.title}
-                                            href={child.href}
-                                            className="py-2 px-3 rounded hover:bg-accent transition-colors"
-                                            onClick={() => setOpen(false)}
-                                        >
-                                            {child.title}
-                                        </Link>
-                                    ))}
+        <div className="md:hidden">
+            <Sheet open={open} onOpenChange={setOpen}>
+                <SheetTrigger asChild>
+                    <button
+                        aria-label="打开菜单"
+                        className="p-2 rounded-md hover:bg-accent transition-colors"
+                    >
+                        <Menu className="w-6 h-6" />
+                    </button>
+                </SheetTrigger>
+                <SheetContent side="right" className="p-0 w-64">
+                    {/* 可访问性要求的标题，视觉上隐藏 */}
+                    <SheetTitle className="sr-only">侧边栏菜单</SheetTitle>
+                    <nav className="flex flex-col gap-2 p-4">
+                        {navbarMenuComponents.map((item) =>
+                            item.href ? (
+                                <Link
+                                    key={item.title}
+                                    href={item.href}
+                                    className="py-2 px-3 rounded hover:bg-accent font-bold transition-colors"
+                                    onClick={() => setOpen(false)}
+                                >
+                                    {item.title}
+                                </Link>
+                            ) : item.children ? (
+                                <div key={item.title} className="mb-2">
+                                    <div className="font-bold px-3 py-2">{item.title}</div>
+                                    <div className="flex flex-col pl-4">
+                                        {item.children.map((child) => (
+                                            <Link
+                                                key={child.title}
+                                                href={child.href}
+                                                className="py-2 px-3 rounded hover:bg-accent transition-colors"
+                                                onClick={() => setOpen(false)}
+                                            >
+                                                {child.title}
+                                            </Link>
+                                        ))}
+                                    </div>
                                 </div>
-                            </div>
-                        ) : null
-                    )}
-                </nav>
-            </SheetContent>
-        </Sheet>
+                            ) : null
+                        )}
+                    </nav>
+                </SheetContent>
+            </Sheet></div>
+
     )
 }
\ No newline at end of file