Fix user dropdown accessibility in mobile/tablet menu

- Prevent sidebar from closing when clicking user dropdown toggle
- Exclude user dropdown from auto-close behavior on navigation clicks
- Position user dropdown modal correctly on mobile/tablet screens
- Increase z-index to ensure dropdown appears above mobile overlay
- Center dropdown modal on mobile/tablet for better accessibility
- Add proper event handling to prevent unwanted closures

static/js/sidebar.js

@@ -44,11 +44,16 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
-    // Close mobile sidebar when clicking on navigation links
+    // Close mobile sidebar when clicking on navigation links (but not user dropdown)
     if (sidebar) {
         const navLinks = sidebar.querySelectorAll('a');
         navLinks.forEach(link => {
-            link.addEventListener('click', function() {
+            link.addEventListener('click', function(e) {
+                // Don't close if clicking user dropdown toggle
+                if (link.id === 'user-dropdown-toggle' || link.closest('#user-dropdown-modal')) {
+                    return;
+                }
+                
                 if (window.innerWidth <= 1024) {
                     sidebar.classList.remove('mobile-open');
                     mobileOverlay.classList.remove('active');