优化移动端

src/layouts/BaseLayout.astro

@@ -81,6 +81,7 @@ const consoleSites = [
           <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-drawer-backdrop" data-nav-backdrop></div>
         <div class="nav-menu" data-nav-menu>
           <div class="nav-links nav-center">
             {siteConfig.nav.map((item) => (
@@ -212,25 +213,43 @@ const consoleSites = [
         const nav = document.querySelector('.nav');
         const toggle = document.querySelector('[data-nav-toggle]');
         const menu = document.querySelector('[data-nav-menu]');
+        const backdrop = document.querySelector('[data-nav-backdrop]');
         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 ? '关闭菜单' : '打开菜单');
+          menu.setAttribute('aria-hidden', String(!open && window.innerWidth <= 720));
+          document.body.classList.toggle('has-nav-drawer', open);
         }
 
         toggle.addEventListener('click', () => {
           setMenu(!nav.classList.contains('is-open'));
         });
 
+        backdrop?.addEventListener('click', () => setMenu(false));
+
         menu.addEventListener('click', (event) => {
           if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
         });
 
+        document.addEventListener('click', (event) => {
+          if (!nav.classList.contains('is-open')) return;
+          if (event.target instanceof Node && nav.contains(event.target)) return;
+          setMenu(false);
+        });
+
+        document.addEventListener('keydown', (event) => {
+          if (event.key === 'Escape' && nav.classList.contains('is-open')) setMenu(false);
+        });
+
         window.addEventListener('resize', () => {
           if (window.innerWidth > 720) setMenu(false);
+          else menu.setAttribute('aria-hidden', String(!nav.classList.contains('is-open')));
         });
+
+        menu.setAttribute('aria-hidden', String(window.innerWidth <= 720));
       })();
 
       (() => {

src/styles/site/02-navigation.css

@@ -56,6 +56,10 @@
   display: contents;
 }
 
+.nav-drawer-backdrop {
+  display: none;
+}
+
 .nav-menu-toggle {
   position: relative;
   z-index: 1;

src/styles/site/13-responsive.css

@@ -87,11 +87,13 @@
     align-items: center;
     gap: 0 10px;
     border-radius: 24px;
+    overflow: visible;
   }
 
   .nav-menu-toggle {
     display: grid;
     justify-self: end;
+    z-index: 3;
   }
 
   .nav.is-open .nav-menu-open,
@@ -103,17 +105,65 @@
     display: inline-block;
   }
 
+  .has-nav-drawer {
+    overflow: hidden;
+  }
+
+  .nav-drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    background: rgba(28, 37, 42, 0.22);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    transition: opacity 0.2s ease;
+  }
+
+  .nav.is-open .nav-drawer-backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
   .nav-menu {
-    display: none;
+    position: fixed;
-    grid-column: 1 / -1;
+    top: calc(env(safe-area-inset-top, 0px) + 72px);
-    gap: 8px;
+    right: max(12px, var(--page-gutter));
-    margin-top: 10px;
+    z-index: 2;
-    border-top: 1px solid rgba(255, 255, 255, 0.46);
+    display: grid;
-    padding-top: 10px;
+    width: min(312px, calc(100vw - 32px));
+    max-height: calc(100dvh - 92px);
+    align-content: start;
+    gap: 10px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 1px solid rgba(255, 255, 255, 0.62);
+    border-radius: 22px;
+    padding: 14px;
+    background:
+      radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.78), transparent 34%),
+      linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 248, 241, 0.7)),
+      rgba(255, 253, 248, 0.92);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.82),
+      0 22px 64px rgba(44, 55, 63, 0.24);
+    backdrop-filter: blur(22px) saturate(170%);
+    -webkit-backdrop-filter: blur(22px) saturate(170%);
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(calc(100% + 24px)) scale(0.98);
+    transform-origin: top right;
+    transition:
+      opacity 0.18s ease,
+      transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
   .nav.is-open .nav-menu {
-    display: grid;
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0) scale(1);
   }
 
   .nav-links {
@@ -128,11 +178,11 @@
   }
 
   .nav-center {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr;
   }
 
   .nav-actions {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .nav-links a,
@@ -142,6 +192,33 @@
   .theme-toggle {
     width: 100%;
     justify-content: center;
+    min-height: 42px;
+    border-color: rgba(15, 118, 110, 0.1);
+    background: rgba(255, 255, 255, 0.42);
+  }
+
+  :root[data-theme='dark'] .nav-drawer-backdrop {
+    background: rgba(3, 10, 12, 0.36);
+  }
+
+  :root[data-theme='dark'] .nav-menu {
+    border-color: rgba(166, 184, 194, 0.2);
+    background:
+      radial-gradient(circle at 82% 0%, rgba(125, 211, 199, 0.16), transparent 36%),
+      linear-gradient(145deg, rgba(25, 35, 42, 0.94), rgba(10, 15, 20, 0.82)),
+      rgba(10, 15, 20, 0.88);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      0 22px 64px rgba(0, 0, 0, 0.46);
+  }
+
+  :root[data-theme='dark'] .nav-links a,
+  :root[data-theme='dark'] .nav-random,
+  :root[data-theme='dark'] .nav-search,
+  :root[data-theme='dark'] .nav-console,
+  :root[data-theme='dark'] .theme-toggle {
+    border-color: rgba(125, 211, 199, 0.16);
+    background: rgba(125, 211, 199, 0.08);
   }
 
   .control-console {

src/styles/site/14-animations.css

@@ -89,7 +89,9 @@
   }
 
   .random-post-transition,
-  .random-post-transition-card {
+  .random-post-transition-card,
+  .nav-drawer-backdrop,
+  .nav-menu {
     transition: none;
   }
 }