From 3d5eb000f1927ca3ff6981662fb076576a3f4170 Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Fri, 19 Jun 2026 07:36:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |  4 +-
 src/layouts/BaseLayout.astro | 69 ++++++++++++++++++-------
 src/styles/site.css          | 97 ++++++++++++++++++++++++++++++++----
 3 files changed, 139 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 7929bff..312b0e5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "astro-site",
-  "version": "0.0.0",
+  "name": "Bi's Blog",
+  "version": "0.20.0",
   "private": true,
   "scripts": {
     "prebuild": "node scripts/generate-abbrlinks.mjs",
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 1a22942..9a0240e 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -39,24 +39,30 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
     <header class="site-header">
       <nav class="nav">
         <a class="brand" href="/">{siteConfig.site.name}</a>
-        <div class="nav-links nav-center">
-          {siteConfig.nav.map((item) => (
-            <a href={item.href}><i class={`${item.icon} nav-icon`} aria-hidden="true"></i><span>{item.label}</span></a>
-          ))}
-        </div>
-        <div class="nav-links nav-actions">
-          <button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章">
-            <i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i>
-            <span>随机文章</span>
-          </button>
-          <button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索">
-            <i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i>
-            <span>搜索</span>
-          </button>
-          <button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
-            <i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i>
-            <i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i>
-          </button>
+        <button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle>
+          <i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i>
+          <i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i>
+        </button>
+        <div class="nav-menu" data-nav-menu>
+          <div class="nav-links nav-center">
+            {siteConfig.nav.map((item) => (
+              <a href={item.href}><i class={`${item.icon} nav-icon`} aria-hidden="true"></i><span>{item.label}</span></a>
+            ))}
+          </div>
+          <div class="nav-links nav-actions">
+            <button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章">
+              <i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i>
+              <span>随机文章</span>
+            </button>
+            <button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索">
+              <i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i>
+              <span>搜索</span>
+            </button>
+            <button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
+              <i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i>
+              <i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i>
+            </button>
+          </div>
         </div>
       </nav>
     </header>
@@ -98,7 +104,7 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
             <p>{siteConfig.site.domain} | {siteConfig.site.license}</p>
           </div>
           <div class="footer-meta">
-            <p>本站已苟活：<span id="site-runtime">计算中...</span></p>
+            <p>本站已运行：<span id="site-runtime">计算中...</span></p>
             <p>
               {siteConfig.footer.poweredBy.map((item, index) => (
                 <>
@@ -118,6 +124,31 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
     <script is:inline src="/js/search/typesense-search.js"></script>
     <script is:inline src="/js/external-links.js"></script>
     <script is:inline>
+      (() => {
+        const nav = document.querySelector('.nav');
+        const toggle = document.querySelector('[data-nav-toggle]');
+        const menu = document.querySelector('[data-nav-menu]');
+        if (!nav || !toggle || !menu) return;
+
+        function setMenu(open) {
+          nav.classList.toggle('is-open', open);
+          toggle.setAttribute('aria-expanded', String(open));
+          toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
+        }
+
+        toggle.addEventListener('click', () => {
+          setMenu(!nav.classList.contains('is-open'));
+        });
+
+        menu.addEventListener('click', (event) => {
+          if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
+        });
+
+        window.addEventListener('resize', () => {
+          if (window.innerWidth > 720) setMenu(false);
+        });
+      })();
+
       (() => {
         const storageKey = 'site-theme';
         const root = document.documentElement;
diff --git a/src/styles/site.css b/src/styles/site.css
index bed691d..73e7646 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -119,6 +119,35 @@ a {
   font-weight: 800;
 }
 
+.nav-menu {
+  display: contents;
+}
+
+.nav-menu-toggle {
+  position: relative;
+  z-index: 1;
+  display: none;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  color: var(--muted);
+  font: inherit;
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.nav-menu-close {
+  display: none;
+}
+
 .nav-links {
   position: relative;
   z-index: 1;
@@ -200,7 +229,8 @@ a {
 .nav-links a:hover,
 .nav-random:hover,
 .nav-search:hover,
-.theme-toggle:hover {
+.theme-toggle:hover,
+.nav-menu-toggle:hover {
   border-color: rgba(255, 255, 255, 0.62);
   background: rgba(255, 255, 255, 0.38);
   box-shadow:
@@ -233,7 +263,8 @@ a {
 :root[data-theme='dark'] .nav-links a:hover,
 :root[data-theme='dark'] .nav-random:hover,
 :root[data-theme='dark'] .nav-search:hover,
-:root[data-theme='dark'] .theme-toggle:hover {
+:root[data-theme='dark'] .theme-toggle:hover,
+:root[data-theme='dark'] .nav-menu-toggle:hover {
   border-color: rgba(114, 222, 210, 0.26);
   background: rgba(114, 222, 210, 0.12);
   box-shadow:
@@ -3022,25 +3053,71 @@ meting-js {
   }
 
   .nav {
-    display: flex;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 40px;
     min-height: auto;
-    padding: 12px 14px;
-    align-items: flex-start;
-    flex-direction: column;
+    padding: 10px 12px;
+    align-items: center;
+    gap: 0 10px;
     border-radius: 24px;
   }
 
+  .nav-menu-toggle {
+    display: grid;
+    justify-self: end;
+  }
+
+  .nav.is-open .nav-menu-open,
+  .nav-menu-close {
+    display: none;
+  }
+
+  .nav.is-open .nav-menu-close {
+    display: inline-block;
+  }
+
+  .nav-menu {
+    display: none;
+    grid-column: 1 / -1;
+    gap: 8px;
+    margin-top: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.46);
+    padding-top: 10px;
+  }
+
+  .nav.is-open .nav-menu {
+    display: grid;
+  }
+
   .nav-links {
     width: 100%;
-    overflow-x: auto;
     gap: 6px;
-    padding-bottom: 2px;
+    overflow: visible;
+    padding-bottom: 0;
+  }
+
+  .nav-menu .nav-links {
+    display: grid;
+  }
+
+  .nav-center {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .nav-actions {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .nav-links a,
   .nav-random,
-  .nav-search {
-    flex: 0 0 auto;
+  .nav-search,
+  .theme-toggle {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .theme-toggle {
+    min-height: 38px;
   }
 
   .hero {