Merge pull request #19 from rtk-ai/fix/uiux/responsive

fix(uiux): responsive navbar & clean legacy pages

Author: aeppling

public/assets/illustrations/viking-compare.webp

@@ -29,38 +29,20 @@ import IconGitHub from '../ui/icons/IconGitHub.astro'
       </a>
     </nav>
 
-    <!-- Mobile right: search + hamburger -->
+    <!-- Mobile right: search + sidebar toggle -->
     <div class="header-mobile-right">
       <button id="docs-search-trigger-mobile" class="header-icon-btn" aria-label="Search">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18" aria-hidden="true">
           <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
         </svg>
       </button>
-      <button class="header-icon-btn header-hamburger" id="docs-hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="docs-drawer">
+      <button class="header-icon-btn header-hamburger" id="docs-hamburger" aria-label="Open docs navigation" aria-expanded="false" aria-controls="starlight__sidebar">
         <span></span><span></span><span></span>
       </button>
     </div>
   </div>
 </header>
 
-<!-- Mobile drawer -->
-<div class="docs-drawer" id="docs-drawer" aria-hidden="true">
-  <div class="docs-drawer-inner">
-    <div class="docs-drawer-links">
-      <a href="/#problem">Why</a>
-      <a href="/#install">Install</a>
-      <a href="/guide/" class="active">Docs</a>
-    </div>
-    <div class="docs-drawer-actions">
-      <a href="https://github.com/rtk-ai/rtk" target="_blank" rel="noopener">
-        <IconGitHub size={14} />
-        GitHub
-      </a>
-    </div>
-  </div>
-</div>
-<div class="docs-overlay" id="docs-overlay"></div>
-
 <style>
   .site-header {
     position: fixed;
@@ -130,10 +112,6 @@ import IconGitHub from '../ui/icons/IconGitHub.astro'
     text-decoration: none;
   }
   .header-link--active { color: var(--text); }
-  .header-link--vox { color: #a78bfa; }
-  .header-link--vox:hover { color: #a78bfa; background: rgba(167,139,250,0.08); }
-  .header-link--icm { color: #38bdf8; }
-  .header-link--icm:hover { color: #38bdf8; background: rgba(56,189,248,0.08); }
 
   .header-btn-ghost {
     display: inline-flex;
@@ -203,8 +181,8 @@ import IconGitHub from '../ui/icons/IconGitHub.astro'
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 38px;
-    height: 38px;
+    width: 44px;
+    height: 44px;
     border-radius: 8px;
     border: 1px solid var(--border);
     background: rgba(15, 22, 41, 0.6);
@@ -241,140 +219,41 @@ import IconGitHub from '../ui/icons/IconGitHub.astro'
     transform: translateY(-7px) rotate(-45deg);
   }
 
-  /* Drawer */
-  .docs-drawer {
-    position: fixed;
-    top: 60px;
-    right: 0;
-    bottom: 0;
-    width: min(280px, 80vw);
-    background: var(--bg-alt);
-    border-left: 1px solid var(--border);
-    z-index: 200;
-    transform: translateX(100%);
-    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    display: none;
-  }
-  .docs-drawer.open {
-    transform: translateX(0);
-  }
-
-  .docs-drawer-inner {
-    display: flex;
-    flex-direction: column;
-    padding: 24px 20px;
-    height: 100%;
-    gap: 32px;
-  }
-
-  .docs-drawer-links {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  .docs-drawer-links a {
-    display: block;
-    padding: 12px 16px;
-    color: var(--text-muted);
-    font-size: 1rem;
-    font-weight: 500;
-    text-decoration: none;
-    border-radius: 8px;
-    transition: color 150ms ease, background 150ms ease;
-  }
-  .docs-drawer-links a:hover {
-    color: var(--text);
-    background: var(--bg-card);
-  }
-  .docs-drawer-links a.active {
-    color: var(--text);
-    background: rgba(255,255,255,0.04);
-  }
-
-  .docs-drawer-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .docs-drawer-actions a {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 16px;
-    color: var(--text-muted);
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-radius: 8px;
-    border: 1px solid var(--border);
-    text-decoration: none;
-    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
-  }
-  .docs-drawer-actions a:hover {
-    color: var(--text);
-    border-color: #243056;
-    background: var(--bg-card);
-  }
-
-  /* Overlay */
-  .docs-overlay {
-    display: none;
-    position: fixed;
-    inset: 60px 0 0 0;
-    background: rgba(6, 11, 24, 0.6);
-    backdrop-filter: blur(2px);
-    z-index: 199;
-  }
-  .docs-overlay.open { display: block; }
-
-  @media (max-width: 768px) {
+  @media (max-width: 50rem) {
     .header-inner {
       padding: 0 16px;
-      gap: 0;
+      gap: 8px;
     }
     .header-nav {
       display: none;
     }
     .header-mobile-right {
       display: flex;
     }
-    .docs-drawer {
-      display: block;
-    }
   }
 </style>
 
 <script>
   const hamburger = document.getElementById('docs-hamburger')
-  const drawer = document.getElementById('docs-drawer')
-  const overlay = document.getElementById('docs-overlay')
   const searchMobile = document.getElementById('docs-search-trigger-mobile')
   const searchDesktop = document.getElementById('search-trigger')
 
-  function openDrawer() {
-    drawer?.classList.add('open')
-    overlay?.classList.add('open')
-    hamburger?.setAttribute('aria-expanded', 'true')
-    drawer?.setAttribute('aria-hidden', 'false')
-    document.body.style.overflow = 'hidden'
-  }
+  const slEl = document.querySelector('starlight-menu-button')
 
-  function closeDrawer() {
-    drawer?.classList.remove('open')
-    overlay?.classList.remove('open')
-    hamburger?.setAttribute('aria-expanded', 'false')
-    drawer?.setAttribute('aria-hidden', 'true')
-    document.body.style.overflow = ''
+  if (slEl) {
+    const innerBtn = slEl.querySelector('button')
+    const syncState = () => {
+      const expanded = slEl.getAttribute('aria-expanded') === 'true'
+      hamburger?.setAttribute('aria-expanded', String(expanded))
+    }
+    hamburger?.addEventListener('click', () => innerBtn?.click())
+    new MutationObserver(syncState).observe(slEl, {
+      attributes: true,
+      attributeFilter: ['aria-expanded'],
+    })
+  } else if (hamburger) {
+    hamburger.style.display = 'none'
   }
 
-  hamburger?.addEventListener('click', () => {
-    drawer?.classList.contains('open') ? closeDrawer() : openDrawer()
-  })
-
-  overlay?.addEventListener('click', closeDrawer)
-  drawer?.querySelectorAll('a').forEach(link => link.addEventListener('click', closeDrawer))
-  searchMobile?.addEventListener('click', () => {
-    closeDrawer()
-    searchDesktop?.click()
-  })
-  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeDrawer() })
+  searchMobile?.addEventListener('click', () => searchDesktop?.click())
 </script>

public/og-vs.png

@@ -112,7 +112,6 @@ try {
         <h3 class="footer-col-title" style="margin-top:24px;">Explore</h3>
         <ul class="footer-col-links">
           <li><a href="/savings/">Token Savings</a></li>
-          <li><a href="/vs/">Compare Tools</a></li>
         </ul>
         <h3 class="footer-col-title" style="margin-top:24px;">Legal</h3>
         <ul class="footer-col-links">
@@ -319,8 +318,6 @@ try {
   border-radius: 50%;
   flex-shrink: 0;
 }
-.footer-product-dot--vox { background: var(--violet); }
-.footer-product-dot--icm { background: var(--cyan); }
 .footer-product-dot--cloud { background: var(--accent); opacity: 0.4; }
 
 .footer-badge-soon {