手机端菜单

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 {