添加汉堡菜单

src/styles/global.css

@@ -59,6 +59,32 @@ a {
   white-space: nowrap;
 }
 
+.nav-toggle {
+  display: none;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  align-content: center;
+  justify-items: center;
+  gap: 5px;
+  border: 1px solid rgba(255, 253, 247, 0.36);
+  border-radius: 8px;
+  background: rgba(31, 43, 42, 0.2);
+  color: #fffdf7;
+  backdrop-filter: blur(12px);
+  cursor: pointer;
+}
+
+.nav-toggle span {
+  width: 20px;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+  transition:
+    transform 180ms ease,
+    opacity 180ms ease;
+}
+
 .nav {
   display: flex;
   gap: clamp(12px, 2vw, 26px);
@@ -752,12 +778,71 @@ footer {
 
 @media (max-width: 820px) {
   .site-header {
-    align-items: flex-start;
     position: absolute;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding-block: 12px;
+  }
+
+  .nav-toggle {
+    display: grid;
   }
 
   .nav {
-    display: none;
+    position: fixed;
+    top: 68px;
+    left: 16px;
+    right: 16px;
+    display: grid;
+    gap: 4px;
+    padding: 10px;
+    border: 1px solid rgba(255, 253, 247, 0.22);
+    border-radius: 8px;
+    background: rgba(31, 43, 42, 0.94);
+    box-shadow: 0 18px 44px rgba(13, 20, 19, 0.28);
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-8px);
+    transition:
+      opacity 180ms ease,
+      transform 180ms ease;
+    backdrop-filter: blur(16px);
+  }
+
+  .nav a {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 7px;
+    opacity: 1;
+  }
+
+  .nav a:hover {
+    background: rgba(255, 253, 247, 0.12);
+  }
+
+  .site-header.is-open {
+    background: linear-gradient(180deg, rgba(22, 30, 29, 0.72), rgba(22, 30, 29, 0));
+  }
+
+  .site-header.is-open .nav {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  .site-header.is-open .nav-toggle span:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+  }
+
+  .site-header.is-open .nav-toggle span:nth-child(2) {
+    opacity: 0;
+  }
+
+  .site-header.is-open .nav-toggle span:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
   }
 
   .hero {