diff --git a/_frontend/entrypoints/application.css b/_frontend/entrypoints/application.css index 66b07cf..39f949e 100644 --- a/_frontend/entrypoints/application.css +++ b/_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; } } diff --git a/_frontend/entrypoints/application.js b/_frontend/entrypoints/application.js index a1045ef..4914832 100644 --- a/_frontend/entrypoints/application.js +++ b/_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) { diff --git a/_includes/head.html b/_includes/head.html index ed6c5f4..cffb03f 100755 --- a/_includes/head.html +++ b/_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}