mobile friendly

2026-04-22 16:22:09 -05:00
parent cf3f8d6fd0
commit b5318abe0a
9 changed files with 107 additions and 38 deletions
@@ -1,5 +1,35 @@
 import '../style.css'

+// ---- Mobile sidebar toggle -----------------------------------------------
+
+const sidebar        = document.getElementById('admin-sidebar')
+const sidebarOverlay = document.getElementById('sidebar-overlay')
+const openBtn        = document.getElementById('sidebar-open-btn')
+
+function openSidebar() {
+  sidebar?.classList.remove('-translate-x-full')
+  sidebar?.classList.add('translate-x-0')
+  sidebarOverlay?.classList.remove('hidden')
+  document.body.style.overflow = 'hidden'
+}
+
+function closeSidebar() {
+  sidebar?.classList.add('-translate-x-full')
+  sidebar?.classList.remove('translate-x-0')
+  sidebarOverlay?.classList.add('hidden')
+  document.body.style.overflow = ''
+}
+
+openBtn?.addEventListener('click', openSidebar)
+sidebarOverlay?.addEventListener('click', closeSidebar)
+
+// Close sidebar on nav link click (mobile UX)
+document.querySelectorAll<HTMLAnchorElement>('#admin-sidebar .nav-link').forEach(link => {
+  link.addEventListener('click', () => {
+    if (window.innerWidth < 1024) closeSidebar()
+  })
+})
+
 // ---- Toast utility -------------------------------------------------------

 function showToast(msg: string, durationMs = 2500) {