admin: fix mobile sidebar menu inaccessible in portrait mode (#8556)

* admin: fix mobile sidebar menu inaccessible in portrait mode

The hamburger button only toggled the user dropdown, leaving the
sidebar navigation inaccessible on mobile devices in portrait mode.

Add a dedicated sidebar toggle button (visible only on mobile), give
the sidebar an id so Bootstrap collapse can target it, add a backdrop
overlay for the open state, and auto-close the sidebar when a nav
link is clicked.

Fixes #8550

* admin: address review feedback on mobile sidebar

- Remove redundant JS show/hide.bs.collapse listeners; CSS sibling
  selector already handles backdrop visibility
- Use const instead of var for non-reassigned variables
- Move inline style on user icon to CSS class

* admin: add aria attributes to user-menu toggler, use CSS variable for navbar height

- Add aria-controls, aria-expanded, and aria-label to the user-menu
  toggle button for assistive technology
- Extract hard-coded 56px navbar height into --navbar-height CSS
  custom property used by sidebar and backdrop positioning

* admin: extract hideSidebar helper, use toggler visibility for breakpoint check

- Extract duplicated collapse-hide logic into a hideSidebar helper
- Replace hardcoded window.innerWidth < 768 with a check on the
  sidebar toggler's computed display, decoupling JS from CSS breakpoints
- Add aria-expanded="false" to sidebar toggle button

---------

Co-authored-by: Copilot <copilot@github.com>

weed/admin/static/css/admin.css

@@ -1,5 +1,9 @@
 /* SeaweedFS Dashboard Custom Styles */
 
+:root {
+    --navbar-height: 56px;
+}
+
 /* Link colors - muted */
 a {
     color: #5b7c99;
@@ -12,7 +16,7 @@ a:hover {
 /* Sidebar Styles */
 .sidebar {
     position: fixed;
-    top: 56px;
+    top: var(--navbar-height);
     bottom: 0;
     left: 0;
     z-index: 100;
@@ -51,13 +55,32 @@ main {
 
 @media (max-width: 767.98px) {
     .sidebar {
-        top: 5rem;
+        top: var(--navbar-height);
+        padding-top: 0;
+        width: 240px;
+        background-color: #f8f9fa !important;
+        z-index: 1050;
+    }
+    .sidebar.show ~ .sidebar-backdrop {
+        display: block;
     }
     main {
         margin-left: 0;
     }
 }
 
+/* Sidebar backdrop for mobile overlay */
+.sidebar-backdrop {
+    display: none;
+    position: fixed;
+    top: var(--navbar-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1040;
+}
+
 /* Custom card styles */
 .border-left-primary {
     border-left: 0.25rem solid #6b8caf !important;
@@ -262,6 +285,11 @@ main {
     box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
 }
 
+/* Navbar user icon color */
+.navbar-toggler .fa-user {
+    color: rgba(255, 255, 255, 0.75);
+}
+
 /* Collapsible menu styles */
 .nav-link[data-bs-toggle="collapse"] {
     position: relative;