Mobile fixes for docs site

Author: SirStig

site-src/assets/app.js

@@ -21,24 +21,51 @@ const sidebar = document.getElementById("sidebar");
 const overlay = document.getElementById("sidebarOverlay");
 const menuBtn = document.getElementById("menuBtn");
 
-function openSidebar() {
-  sidebar?.classList.add("open");
-  overlay?.classList.add("visible");
+function drawerOpen() {
+  return Boolean(sidebar?.classList.contains("open"));
 }
-function closeSidebar() {
-  sidebar?.classList.remove("open");
-  overlay?.classList.remove("visible");
+
+function setDrawerOpen(open) {
+  if (!sidebar || !overlay) return;
+  sidebar.classList.toggle("open", open);
+  overlay.classList.toggle("visible", open);
+  document.body.classList.toggle("nav-drawer-open", open);
+  overlay.setAttribute("aria-hidden", open ? "false" : "true");
+  if (menuBtn) {
+    menuBtn.setAttribute("aria-expanded", open ? "true" : "false");
+    menuBtn.setAttribute("aria-label", open ? "Close menu" : "Open menu");
+  }
+}
+
+if (menuBtn && sidebar) {
+  menuBtn.setAttribute("aria-controls", "sidebar");
+  menuBtn.setAttribute("aria-expanded", "false");
 }
 
-menuBtn?.addEventListener("click", openSidebar);
-overlay?.addEventListener("click", closeSidebar);
+menuBtn?.addEventListener("click", () => {
+  if (!sidebar || !overlay) return;
+  setDrawerOpen(!drawerOpen());
+});
+
+overlay?.addEventListener("click", () => setDrawerOpen(false));
 
 sidebar?.querySelectorAll(".sidebar-link").forEach((link) => {
   link.addEventListener("click", () => {
-    if (window.innerWidth < 900) closeSidebar();
+    if (window.innerWidth < 900) setDrawerOpen(false);
   });
 });
 
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && drawerOpen()) {
+    setDrawerOpen(false);
+    menuBtn?.focus();
+  }
+});
+
+window.addEventListener("resize", () => {
+  if (window.innerWidth >= 900 && drawerOpen()) setDrawerOpen(false);
+});
+
 function attachCopyButton(pre) {
   if (pre.parentElement?.classList.contains("code-block")) return;
 

site-src/assets/style.css

@@ -219,17 +219,21 @@ li strong { color: var(--text); }
   cursor: pointer;
   color: var(--text);
   flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
 }
 .menu-btn svg { display: block; }
 
+body.nav-drawer-open {
+  overflow: hidden;
+}
+
 /* ===== LAYOUT ===== */
 .page-layout {
   display: grid;
   grid-template-columns: var(--sidebar-w) 1fr;
   min-height: 100vh;
   padding-top: var(--header-h);
   position: relative;
-  z-index: 1;
 }
 
 /* ===== SIDEBAR ===== */
@@ -496,9 +500,16 @@ tbody tr:hover td { background: var(--glass); }
   background: rgba(0,0,0,0.55);
   z-index: 150;
   backdrop-filter: blur(2px);
+  -webkit-tap-highlight-color: transparent;
 }
 .sidebar-overlay.visible { display: block; }
 
+@media (min-width: 901px) {
+  .sidebar.sidebar--standalone {
+    display: none;
+  }
+}
+
 /* ===== LANDING ===== */
 .landing { position: relative; z-index: 1; padding-top: var(--header-h); }
 
@@ -817,15 +828,21 @@ tbody tr:hover td { background: var(--glass); }
     position: fixed;
     top: 0; left: 0;
     height: 100vh;
-    width: var(--sidebar-w);
+    width: min(var(--sidebar-w), 88vw);
+    max-width: 100%;
     z-index: 160;
     transform: translateX(-100%);
     transition: transform 0.24s cubic-bezier(0.4,0,0.2,1);
     padding-top: calc(var(--header-h) + 0.75rem);
     border-right: 1px solid var(--border-md);
+    -webkit-overflow-scrolling: touch;
   }
   .sidebar.open { transform: translateX(0); }
 
+  .sidebar.sidebar--standalone {
+    display: block;
+  }
+
   .menu-btn { display: flex; }
   .content { padding: 1.75rem 1.25rem 3rem; }
 
@@ -841,6 +858,23 @@ tbody tr:hover td { background: var(--glass); }
   .hero h1 { font-size: 1.7rem; }
   .hero-sub { font-size: 0.95rem; }
   .header-nav a:not(.header-badge) { display: none; }
+  .site-header {
+    padding: 0 0.75rem;
+    gap: 0.5rem;
+  }
+  .header-nav {
+    gap: 0.05rem;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+  .header-nav .header-badge {
+    padding: 0.24rem 0.5rem;
+    font-size: 0.72rem;
+  }
+  .header-nav .theme-btn {
+    padding: 0.28rem 0.45rem;
+    font-size: 0.74rem;
+  }
 }
 
 /* ===== DOC PAGES (long-form readability) ===== */

site-src/templates/changelog.html.jinja2

@@ -77,6 +77,17 @@
     </button>
   </header>
 
+  <aside class="sidebar sidebar--standalone" id="sidebar" aria-label="Site navigation">
+    <div class="sidebar-group">
+      <span class="sidebar-label">Navigate</span>
+      <a class="sidebar-link" href="getting-started.html">Documentation</a>
+      <a class="sidebar-link" href="api/index.html">API reference</a>
+      <a class="sidebar-link active" href="changelog.html" aria-current="page">Changelog</a>
+      <a class="sidebar-link sidebar-ext" href="https://pypi.org/project/yokedcache/" target="_blank" rel="noopener">PyPI</a>
+      <a class="sidebar-link sidebar-ext" href="{{ github_repo }}" target="_blank" rel="noopener">GitHub</a>
+    </div>
+  </aside>
+
   <div style="position:relative;z-index:1;padding-top:var(--header-h)">
     <div class="changelog-wrap">
       <h1 class="page-title">Changelog</h1>

site-src/templates/index.html.jinja2

@@ -80,6 +80,17 @@
     </button>
   </header>
 
+  <aside class="sidebar sidebar--standalone" id="sidebar" aria-label="Site navigation">
+    <div class="sidebar-group">
+      <span class="sidebar-label">Navigate</span>
+      <a class="sidebar-link" href="getting-started.html">Documentation</a>
+      <a class="sidebar-link" href="api/index.html">API reference</a>
+      <a class="sidebar-link" href="changelog.html">Changelog</a>
+      <a class="sidebar-link sidebar-ext" href="https://pypi.org/project/yokedcache/" target="_blank" rel="noopener">PyPI</a>
+      <a class="sidebar-link sidebar-ext" href="{{ github_repo }}" target="_blank" rel="noopener">GitHub</a>
+    </div>
+  </aside>
+
   <div class="landing">
     <section class="hero">
       <div class="hero-eyebrow">Open source · MIT License</div>
@@ -192,6 +203,7 @@
     </footer>
   </div>
 
+  <div class="sidebar-overlay" id="sidebarOverlay" aria-hidden="true"></div>
   <script src="assets/app.js"></script>
 </body>
 </html>