From 93ce0a1ea252e0580e501df544d68facac05d422 Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Sun, 26 Jul 2026 22:34:49 +0800
Subject: [PATCH] =?UTF-8?q?style(site):=20=E8=BF=98=E5=8E=9F=20Header=20?=
 =?UTF-8?q?=E7=BB=8F=E5=85=B8=E6=A0=87=E5=87=86=E5=B8=83=E5=B1=80=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=9D=E7=95=99=20Pireel=20=E7=B2=BE=E8=87=B4=E5=AD=97?=
 =?UTF-8?q?=E5=9E=8B=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 恢复经典通栏居中 Container Header 布局，移除悬浮胶囊框；
- 借鉴 Pireel 精致字型排版 (text-[13px] font-semibold text-slate-600 hover:text-emerald-700 font-sans tracking-tight)；
- 保留开源 / Open Source GitHub 胶囊标签。
---
 .../site/src/components/navbar/dropdown.astro |  10 +-
 apps/site/src/components/navbar/navbar.astro  | 101 ++++++------------
 2 files changed, 39 insertions(+), 72 deletions(-)

diff --git a/apps/site/src/components/navbar/dropdown.astro b/apps/site/src/components/navbar/dropdown.astro
index 2560ead4..248fb177 100644
--- a/apps/site/src/components/navbar/dropdown.astro
+++ b/apps/site/src/components/navbar/dropdown.astro
@@ -6,7 +6,7 @@ const { title, lastItem, children } = Astro.props;
 <li class="relative">
   <DropdownContainer class="group">
     <button
-      class="flex items-center gap-1.5 w-full lg:w-auto px-3 py-1.5 text-xs font-semibold text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/60 rounded-full transition-all duration-200">
+      class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-[13px] font-semibold text-slate-600 hover:text-emerald-700 transition-colors">
       <span>{title}</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -14,7 +14,7 @@ const { title, lastItem, children } = Astro.props;
         viewBox="0 0 24 24"
         stroke-width="2.5"
         stroke="currentColor"
-        class="w-3 h-3 text-slate-400 group-hover:text-emerald-600 group-open:rotate-180 transition-transform duration-200">
+        class="w-3 h-3 mt-0.5 group-open:rotate-180 transition-transform">
         <path
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -24,18 +24,18 @@ const { title, lastItem, children } = Astro.props;
     <DropdownItems>
       <div
         class:list={[
-          "lg:absolute w-full lg:w-52 z-50 mt-2",
+          "lg:absolute w-full lg:w-48 z-50 mt-1",
           lastItem
             ? "lg:right-0 origin-top-right"
             : "lg:left-0 origin-top-left",
         ]}>
         <div
-          class="p-1.5 lg:bg-white/95 lg:backdrop-blur-md lg:rounded-2xl lg:shadow-xl lg:border lg:border-slate-200/90 flex flex-col gap-0.5">
+          class="px-3 lg:py-2 lg:bg-white lg:rounded-xl lg:shadow-md lg:border lg:border-slate-200/80 flex flex-col gap-0.5">
           {
             children.map((item) => (
               <a
                 href={item.path}
-                class="px-3 py-2 text-xs font-medium text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/80 rounded-xl transition-colors">
+                class="py-1.5 text-[12.5px] font-medium text-slate-600 hover:text-emerald-700 transition-colors">
                 {item.title}
               </a>
             ))
diff --git a/apps/site/src/components/navbar/navbar.astro b/apps/site/src/components/navbar/navbar.astro
index 48419bff..b03374fa 100644
--- a/apps/site/src/components/navbar/navbar.astro
+++ b/apps/site/src/components/navbar/navbar.astro
@@ -1,4 +1,5 @@
 ---
+import Container from "@/components/container.astro";
 import Dropdown from "./dropdown.astro";
 import LanguageSwitcher from "./language-switcher.astro";
 import { Icon } from "astro-icon/components";
@@ -44,79 +45,29 @@ const menuitems = [
 ];
 ---
 
-<header class="sticky top-3 md:top-4 z-50 max-w-5xl mx-auto px-4">
-  <div class="relative rounded-full border border-slate-200/90 bg-white/85 backdrop-blur-md shadow-xs transition-all duration-300 hover:shadow-md hover:border-slate-300/90 px-4 py-2">
+<Container>
+  <header class="flex flex-col lg:flex-row justify-between items-center my-5">
     <Astronav>
-      <div class="flex items-center justify-between">
-        <!-- Logo Left -->
-        <a href={getLocalizedPath(locale, "/")} class="flex items-center gap-2 text-base select-none" aria-label={copy.homeAria}>
-          <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--edgeever-brand-logo-bg)] shadow-xs">
-            <svg class="h-5 w-5" viewBox="0 0 64 64" role="img" aria-hidden="true">
+      <div class="flex w-full lg:w-auto items-center justify-between">
+        <a href={getLocalizedPath(locale, "/")} class="flex items-center gap-2 text-lg" aria-label={copy.homeAria}>
+          <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--edgeever-brand-logo-bg)]">
+            <svg class="h-6 w-6" viewBox="0 0 64 64" role="img" aria-hidden="true">
               <rect x="14" y="10" width="36" height="44" rx="8" fill="var(--edgeever-brand-logo-mark)" />
               <path d="M24 23h18v5H30v5h11v5H30v6h13v5H24V23Z" fill="var(--edgeever-brand-surface)" />
               <path d="M19 16h26" stroke="var(--edgeever-brand-logo-accent)" stroke-width="3" stroke-linecap="round" />
             </svg>
           </span>
-          <span class="font-bold text-slate-800 tracking-tight text-sm md:text-base">
-            Edge<span class="text-emerald-700">Ever</span>
+          <span>
+            <span class="font-bold text-slate-800 tracking-tight">Edge</span><span class="text-slate-500">Ever</span>
           </span>
         </a>
-
-        <!-- Desktop Navigation Items Center -->
-        <MenuItems class="hidden lg:flex items-center gap-1">
-          <ul class="flex items-center gap-1">
-            {
-              menuitems.map((item, index) => (
-                <>
-                  {item.children && (
-                    <Dropdown
-                      title={item.title}
-                      children={item.children}
-                      lastItem={index === menuitems.length - 1}
-                    />
-                  )}
-
-                  {!item.children && (
-                    <li>
-                      <a
-                        href={item.path}
-                        class="px-3 py-1.5 text-xs font-semibold text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/60 rounded-full transition-all duration-200"
-                      >
-                        <span>{item.title}</span>
-                      </a>
-                    </li>
-                  )}
-                </>
-              ))
-            }
-          </ul>
-        </MenuItems>
-
-        <!-- Right Side Actions: Language Switcher & Open Source GitHub Button -->
-        <div class="hidden lg:flex items-center gap-3">
-          <LanguageSwitcher pathname={Astro.url.pathname} />
-          <a
-            href="https://github.com/tianma-if/edgeever"
-            target="_blank"
-            rel="noopener"
-            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:text-emerald-700 bg-white hover:bg-emerald-50/50 border border-slate-200/90 hover:border-emerald-400 rounded-full transition-all duration-200 shadow-2xs"
-            aria-label="GitHub"
-          >
-            <Icon class="h-4 w-4 text-slate-800" name="bx:bxl-github" />
-            <span>{copy.openSource}</span>
-          </a>
-        </div>
-
-        <!-- Mobile Menu Toggle Button -->
-        <div class="flex items-center gap-2 lg:hidden">
-          <LanguageSwitcher pathname={Astro.url.pathname} compact />
-          <MenuIcon class="w-5 h-5 text-slate-700 cursor-pointer p-0.5 rounded-md hover:bg-slate-100 transition-colors" />
+        <div class="block lg:hidden">
+          <MenuIcon class="w-4 h-4 text-gray-800" />
         </div>
       </div>
 
-      <!-- Mobile Dropdown Menu -->
-      <MenuItems class="hidden w-full lg:hidden pt-3 pb-2 border-t border-slate-100 mt-2">
-        <ul class="flex flex-col gap-1">
+      <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
+        <ul class="flex flex-col lg:flex-row lg:gap-1">
           {
             menuitems.map((item, index) => (
               <>
@@ -132,8 +83,7 @@ const menuitems = [
                   <li>
                     <a
                       href={item.path}
-                      class="block px-3 py-2 text-xs font-semibold text-slate-600 hover:text-emerald-700 hover:bg-emerald-50/60 rounded-xl transition-all"
-                    >
+                      class="flex lg:px-3 py-2 items-center text-[13px] font-semibold text-slate-600 hover:text-emerald-700 transition-colors">
                       <span>{item.title}</span>
                     </a>
                   </li>
@@ -142,7 +92,7 @@ const menuitems = [
             ))
           }
         </ul>
-        <div class="flex items-center mt-3 pt-2 border-t border-slate-100 gap-3">
+        <div class="lg:hidden flex items-center mt-3 gap-4">
           <a
             href="https://github.com/tianma-if/edgeever"
             target="_blank"
@@ -153,8 +103,25 @@ const menuitems = [
             <Icon class="h-4 w-4 text-slate-800" name="bx:bxl-github" />
             <span>{copy.openSource}</span>
           </a>
+          <LanguageSwitcher pathname={Astro.url.pathname} compact />
         </div>
       </MenuItems>
     </Astronav>
-  </div>
-</header>
+
+    <div>
+      <div class="hidden lg:flex items-center gap-4">
+        <LanguageSwitcher pathname={Astro.url.pathname} />
+        <a
+          href="https://github.com/tianma-if/edgeever"
+          target="_blank"
+          rel="noopener"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-200 hover:border-slate-300 rounded-full transition-all duration-200 shadow-2xs"
+          aria-label="GitHub"
+        >
+          <Icon class="h-4 w-4 text-slate-800" name="bx:bxl-github" />
+          <span>{copy.openSource}</span>
+        </a>
+      </div>
+    </div>
+  </header>
+</Container>