Add admin dropdown menu in navbar for admin users, moving train, cluster...

Add admin dropdown menu in navbar for admin users, moving train, cluster tokens, cluster nodes, and configurations links

templates/base.html

@@ -21,6 +21,13 @@
         .user-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
         .user-dropdown a:last-child { border-bottom: none; color: #dc2626; }
         .user-dropdown a:hover { background: #f8fafc; }
+        .admin-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
+        .admin-icon { cursor: pointer; padding: 0.5rem; border-radius: 4px; background: #f8fafc; transition: background 0.2s; }
+        .admin-icon:hover { background: #e2e8f0; }
+        .admin-dropdown { display: none; position: absolute; top: 100%; left: 0; background: white; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; }
+        .admin-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
+        .admin-dropdown a:last-child { border-bottom: none; }
+        .admin-dropdown a:hover { background: #f8fafc; }
 
         /* Notification styles */
         .notification-container {
@@ -73,13 +80,17 @@
             <nav class="nav">
                 <a href="/dashboard" {% if active_page == 'dashboard' %}class="active"{% endif %}>Dashboard</a>
                 <a href="/analyze" {% if active_page == 'analyze' %}class="active"{% endif %}>Analyze</a>
-                {% if user.get('role') == 'admin' %}
-                <a href="/admin/train" {% if active_page == 'train' %}class="active"{% endif %}>Train</a>
-                {% endif %}
                 <a href="/history" {% if active_page == 'history' %}class="active"{% endif %}>History</a>
                 {% if user.get('role') == 'admin' %}
-                <a href="/admin/cluster_tokens" {% if active_page == 'cluster_tokens' %}class="active"{% endif %}>Cluster Tokens</a>
-                <a href="/admin/cluster_nodes" {% if active_page == 'cluster_nodes' %}class="active"{% endif %}>Cluster Nodes</a>
+                <div class="admin-menu">
+                    <div class="admin-icon" onclick="toggleAdminMenu()">Admin</div>
+                    <div id="adminDropdown" class="admin-dropdown">
+                        <a href="/admin/train" {% if active_page == 'train' %}class="active"{% endif %}>Train</a>
+                        <a href="/admin/cluster_tokens" {% if active_page == 'cluster_tokens' %}class="active"{% endif %}>Cluster Tokens</a>
+                        <a href="/admin/cluster_nodes" {% if active_page == 'cluster_nodes' %}class="active"{% endif %}>Cluster Nodes</a>
+                        <a href="/admin/config" {% if active_page == 'config' %}class="active"{% endif %}>Configurations</a>
+                    </div>
+                </div>
                 {% endif %}
             </nav>
             <div class="user-menu">
@@ -95,7 +106,6 @@
                     <a href="/admin/api">Admin API Documentation</a>
                     <a href="/admin/users">Users</a>
                     <a href="/api_tokens">Linked Apps</a>
-                    <a href="/admin/config">Configurations</a>
                     {% endif %}
                     <a href="/logout">Logout</a>
                 </div>
@@ -126,6 +136,11 @@
             dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
         }
 
+        function toggleAdminMenu() {
+            const dropdown = document.getElementById('adminDropdown');
+            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
+        }
+
         // Close dropdown when clicking outside
         window.onclick = function(event) {
             const dropdown = document.getElementById('userDropdown');
@@ -133,6 +148,11 @@
             if (!icon.contains(event.target) && !dropdown.contains(event.target)) {
                 dropdown.style.display = 'none';
             }
+            const adminDropdown = document.getElementById('adminDropdown');
+            const adminIcon = document.querySelector('.admin-icon');
+            if (adminDropdown && adminIcon && !adminIcon.contains(event.target) && !adminDropdown.contains(event.target)) {
+                adminDropdown.style.display = 'none';
+            }
         }
 
         // Notification functions