FIx menu bar

web/static/js/app.js

@@ -52,6 +52,33 @@ class MailingListApp {
             this.logout();
         });
 
+        // User dropdown functionality
+        const userDropdownTrigger = document.getElementById('userDropdownTrigger');
+        const userDropdown = document.getElementById('userDropdown');
+        
+        userDropdownTrigger.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            userDropdown.classList.toggle('active');
+            userDropdownTrigger.classList.toggle('active');
+        });
+
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!userDropdown.contains(e.target)) {
+                userDropdown.classList.remove('active');
+                userDropdownTrigger.classList.remove('active');
+            }
+        });
+
+        // Close dropdown on escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                userDropdown.classList.remove('active');
+                userDropdownTrigger.classList.remove('active');
+            }
+        });
+
         // Bulk import button
         document.getElementById('showBulkImportBtn').addEventListener('click', () => {
             uiManager.showBulkImportModal();
@@ -61,6 +88,15 @@ class MailingListApp {
         document.getElementById('addUserBtn').addEventListener('click', () => {
             uiManager.showUserModal();
         });
+
+        // User management dropdown item
+        document.getElementById('userManagementBtn').addEventListener('click', () => {
+            // Close the dropdown
+            userDropdown.classList.remove('active');
+            userDropdownTrigger.classList.remove('active');
+            // Switch to users tab
+            this.switchToUsersTab();
+        });
     }
 
     /**
@@ -214,10 +250,13 @@ class MailingListApp {
         if (this.currentUser) {
             document.getElementById('currentUsername').textContent = this.currentUser.username;
             document.getElementById('currentUserRole').textContent = this.currentUser.role;
+            document.getElementById('dropdownUsername').textContent = this.currentUser.username;
+            document.getElementById('dropdownUserRole').textContent = this.currentUser.role;
             
             // Show/hide admin-only features
             const isAdmin = this.currentUser.role === 'administrator';
-            document.getElementById('usersTab').style.display = isAdmin ? 'block' : 'none';
+            document.getElementById('userManagementBtn').style.display = isAdmin ? 'block' : 'none';
+            document.getElementById('userManagementDivider').style.display = isAdmin ? 'block' : 'none';
             
             // Show/hide write access features
             const hasWriteAccess = this.currentUser.role === 'administrator' || this.currentUser.role === 'operator';
@@ -250,6 +289,28 @@ class MailingListApp {
         document.getElementById('showBulkImportBtn').setAttribute('data-requires-write', '');
     }
 
+    /**
+     * Switch to users tab (triggered from user dropdown)
+     */
+    switchToUsersTab() {
+        // Switch to users tab programmatically
+        const tabButtons = document.querySelectorAll('.tab-btn');
+        const tabContents = document.querySelectorAll('.tab-content');
+        
+        // Remove active class from all tabs and contents
+        tabButtons.forEach(btn => btn.classList.remove('active'));
+        tabContents.forEach(content => content.classList.remove('active'));
+        
+        // Show users tab content
+        const usersTab = document.getElementById('users-tab');
+        if (usersTab) {
+            usersTab.classList.add('active');
+        }
+        
+        // Load users data if needed
+        this.loadUsers();
+    }
+
     /**
      * Load all data from API
      */