Fix mobile header background and sidebar toggle

- Add background-color to #nav-header in critical CSS (fixes
  transparent header on mobile while Tailwind loads)
- Add dark mode background for header in critical CSS
- Fix mobile sidebar toggle stretching to full content height by
  switching .documentation to flex-direction: column on mobile
- Change .mobile-sidebar-toggle to display:none by default, show
  only on mobile via media query
- Add click handler for #mobile-sidebar-toggle to open/close sidebar
  drawer and backdrop
- Remove duplicate .docs-nav display:none media query

Author: ronaldtse

_frontend/entrypoints/application.css

@@ -125,12 +125,6 @@
   margin: 0;
 }
 
-@media (max-width: 1023px) {
-  .docs-nav {
-    display: none;
-  }
-}
-
 /* ===== Sidebar navigation ===== */
 .docs-nav .nav-section {
   margin-bottom: 1.5rem;
@@ -286,7 +280,7 @@
 
 /* ===== Mobile sidebar toggle ===== */
 .mobile-sidebar-toggle {
-  display: flex;
+  display: none;
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
@@ -315,9 +309,12 @@
   background: #3730a3;
 }
 
-@media (min-width: 1024px) {
+@media (max-width: 1023px) {
+  .documentation {
+    flex-direction: column;
+  }
   .mobile-sidebar-toggle {
-    display: none;
+    display: flex;
   }
 }
 

_frontend/entrypoints/application.js

@@ -2,6 +2,23 @@ import '../js/theme.js'
 import '../js/navigation.js'
 
 document.addEventListener('DOMContentLoaded', function() {
+  // Mobile sidebar toggle (in-page button)
+  var sidebarToggle = document.getElementById('mobile-sidebar-toggle');
+  var sidebar = document.querySelector('.docs-nav');
+  var backdrop = document.querySelector('.docs-nav-backdrop');
+  if (sidebarToggle && sidebar) {
+    sidebarToggle.addEventListener('click', function() {
+      sidebar.classList.toggle('mobile-open');
+      if (backdrop) backdrop.classList.toggle('active');
+    });
+  }
+  if (backdrop) {
+    backdrop.addEventListener('click', function() {
+      sidebar.classList.remove('mobile-open');
+      backdrop.classList.remove('active');
+    });
+  }
+
   // Active header nav — highlight Standards/Resources/About
   var currentPath = window.location.pathname;
   document.querySelectorAll('[data-nav-section]').forEach(function(el) {

_includes/head.html

@@ -21,7 +21,8 @@
     html{scroll-behavior:smooth!important}
     body{font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff!important;color:#1e293b!important;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important;opacity:1!important}
     html.dark body{background-color:#0f172a!important;color:#f1f5f9!important}
-    #nav-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:50!important;height:64px!important}
+    #nav-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:50!important;height:64px!important;background-color:#fff!important}
+    html.dark #nav-header{background-color:#0f172a!important}
     main{padding-top:64px!important}
   </style>