docs: add mobile docs navigation menu

docs-site/src/components/Header.astro

@@ -64,10 +64,7 @@ function navIcon(href: string) {
     <SiteTitle />
   </div>
   <nav
-    class:list={[
-      'flex flex-1 flex-row gap-4 overflow-x-auto py-3 pr-4 pl-4 text-sm font-medium xl:gap-6 xl:pl-6',
-      hasSidebar && 'max-md:**:hidden',
-    ]}
+    class="hidden flex-1 flex-row gap-4 overflow-x-auto py-3 pr-4 pl-4 text-sm font-medium md:flex xl:gap-6 xl:pl-6"
   >
     {
       nav.map((item) => {
@@ -90,9 +87,38 @@ function navIcon(href: string) {
       })
     }
   </nav>
-  <div class="flex md:max-w-60 md:flex-1 print:hidden">
+  <div class="minishop-header-search flex md:max-w-60 md:flex-1 print:hidden">
     <Search />
   </div>
+  {
+    !hasSidebar && nav.length > 0 && (
+      <details class="minishop-mobile-nav md:hidden print:hidden">
+        <summary aria-label="Menu">
+          <span aria-hidden="true" />
+        </summary>
+        <div class="minishop-mobile-nav-panel">
+          {nav.map((item) => {
+            const href = getI18nText(item.href, route)
+            const label = getI18nText(item.label, route)
+            const icon = navIcon(href)
+
+            return (
+              <a
+                class:list={[
+                  'minishop-mobile-nav-link',
+                  icon && 'minishop-header-link inline-flex items-center',
+                ]}
+                href={href}
+              >
+                {icon && <Icon name={icon} size="1rem" color="currentColor" />}
+                <span>{label}</span>
+              </a>
+            )
+          })}
+        </div>
+      </details>
+    )
+  }
   <div class="hidden items-center gap-2 md:flex print:hidden">
     <SocialIcons />
     <LanguageSelect />

docs-site/src/styles/custom.css

@@ -30,6 +30,110 @@
     flex-shrink: 0;
   }
 
+  .minishop-header-search {
+    margin-left: auto;
+  }
+
+  @media (min-width: 48rem) {
+    .minishop-header-search {
+      margin-left: 0;
+    }
+  }
+
+  .minishop-mobile-nav {
+    position: relative;
+    z-index: 30;
+    flex: 0 0 auto;
+  }
+
+  .minishop-mobile-nav summary {
+    display: grid;
+    width: 2.25rem;
+    height: 2.25rem;
+    place-items: center;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 7px;
+    color: var(--sl-color-gray-2);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .minishop-mobile-nav summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .minishop-mobile-nav summary span,
+  .minishop-mobile-nav summary span::before,
+  .minishop-mobile-nav summary span::after {
+    display: block;
+    width: 1rem;
+    height: 2px;
+    border-radius: 999px;
+    background: currentColor;
+    content: '';
+  }
+
+  .minishop-mobile-nav summary span {
+    position: relative;
+  }
+
+  .minishop-mobile-nav summary span::before,
+  .minishop-mobile-nav summary span::after {
+    position: absolute;
+    left: 0;
+  }
+
+  .minishop-mobile-nav summary span::before {
+    top: -0.34rem;
+  }
+
+  .minishop-mobile-nav summary span::after {
+    top: 0.34rem;
+  }
+
+  .minishop-mobile-nav[open] summary {
+    border-color: #00fe7a;
+    color: #00fe7a;
+  }
+
+  .minishop-mobile-nav-panel {
+    position: absolute;
+    z-index: 30;
+    top: calc(100% + 0.55rem);
+    right: 0;
+    display: grid;
+    min-width: min(17rem, calc(100vw - 2rem));
+    gap: 0.25rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 8px;
+    padding: 0.5rem;
+    background: var(--sl-color-black);
+    box-shadow: 0 18px 60px rgb(0 0 0 / 32%);
+  }
+
+  .minishop-mobile-nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    border-radius: 6px;
+    padding: 0.65rem 0.75rem;
+    color: var(--sl-color-gray-2);
+    font-size: 0.95rem;
+    font-weight: 650;
+    text-decoration: none;
+  }
+
+  .minishop-mobile-nav-link:hover,
+  .minishop-mobile-nav-link:focus-visible {
+    color: var(--sl-color-white);
+    background: var(--sl-color-gray-6);
+  }
+
+  :root[data-theme='light'] .minishop-mobile-nav-panel {
+    background: var(--sl-color-white);
+    box-shadow: 0 18px 60px rgb(15 23 42 / 16%);
+  }
+
   .hero {
     gap: clamp(2rem, 6vw, 5rem);
     padding-block: clamp(3.5rem, 10vw, 6.5rem);