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');

static/js/user-dropdown.js

@@ -31,6 +31,10 @@ document.addEventListener('DOMContentLoaded', function() {
     // Close dropdown when clicking outside
     document.addEventListener('click', function(e) {
         if (userDropdownModal && !userDropdownModal.contains(e.target) && !userDropdownToggle.contains(e.target)) {
+            // Don't close if we're clicking on the mobile overlay
+            if (e.target.id === 'mobile-nav-overlay' || e.target.classList.contains('mobile-overlay')) {
+                return;
+            }
             userDropdownModal.classList.remove('active');
         }
     });