Improve mobile sidebar UX

assets/theme.css

@@ -23,7 +23,9 @@ body {
   align-items: center;
   padding: 0.5rem 1rem;
   background: var(--sidebar-bg);
-  position: relative;
+  position: sticky;
+  top: 0;
+  z-index: 1100;
 }
 .search-input {
   margin-left: auto;
@@ -117,6 +119,20 @@ main {
   text-decoration: none;
   color: var(--text-color);
 }
+
+.sidebar-overlay {
+  display: none;
+}
+body.sidebar-open .sidebar-overlay {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
 @media (max-width: 768px) {
   .sidebar {
     position: fixed;

assets/theme.js

@@ -3,6 +3,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const themeToggle = document.getElementById('theme-toggle');
   const searchInput = document.getElementById('search-input');
   const searchResults = document.getElementById('search-results');
+  const sidebar = document.getElementById('sidebar');
+  const sidebarOverlay = document.getElementById('sidebar-overlay');
   const root = document.documentElement;
 
   function setTheme(theme) {
@@ -20,6 +22,10 @@ document.addEventListener('DOMContentLoaded', () => {
     document.body.classList.toggle('sidebar-open');
   });
 
+  sidebarOverlay?.addEventListener('click', () => {
+    document.body.classList.remove('sidebar-open');
+  });
+
   themeToggle?.addEventListener('click', () => {
     const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
     setTheme(next);
@@ -76,6 +82,15 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!searchResults.contains(e.target) && e.target !== searchInput) {
       searchResults.style.display = 'none';
     }
+    if (
+      window.innerWidth <= 768 &&
+      document.body.classList.contains('sidebar-open') &&
+      sidebar &&
+      !sidebar.contains(e.target) &&
+      e.target !== sidebarToggle
+    ) {
+      document.body.classList.remove('sidebar-open');
+    }
   });
 
   // breadcrumbs