docs: add mobile docs navigation menu

2026-05-28 08:21:58 +03:00
parent 93c9dde572
commit ce19c7e2d1
2 changed files with 135 additions and 5 deletions
@@ -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);