Add documentations dropdown menu in navbar, moving API documentation and admin...

Add documentations dropdown menu in navbar, moving API documentation and admin API documentation links

templates/base.html

@@ -28,6 +28,13 @@
         .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; }
+        .docs-menu { display: flex; align-items: center; gap: 1rem; position: relative; }
+        .docs-icon { cursor: pointer; padding: 0.5rem; border-radius: 4px; background: #f8fafc; transition: background 0.2s; }
+        .docs-icon:hover { background: #e2e8f0; }
+        .docs-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; }
+        .docs-dropdown a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #374151; border-bottom: 1px solid #f1f5f9; }
+        .docs-dropdown a:last-child { border-bottom: none; }
+        .docs-dropdown a:hover { background: #f8fafc; }
 
         /* Notification styles */
         .notification-container {
@@ -81,6 +88,15 @@
                 <a href="/dashboard" {% if active_page == 'dashboard' %}class="active"{% endif %}>Dashboard</a>
                 <a href="/analyze" {% if active_page == 'analyze' %}class="active"{% endif %}>Analyze</a>
                 <a href="/history" {% if active_page == 'history' %}class="active"{% endif %}>History</a>
+                <div class="docs-menu">
+                    <div class="docs-icon" onclick="toggleDocsMenu()">Documentations</div>
+                    <div id="docsDropdown" class="docs-dropdown">
+                        <a href="/api">API Documentation</a>
+                        {% if user.get('role') == 'admin' %}
+                        <a href="/admin/api">Admin API Documentation</a>
+                        {% endif %}
+                    </div>
+                </div>
                 {% if user.get('role') == 'admin' %}
                 <div class="admin-menu">
                     <div class="admin-icon" onclick="toggleAdminMenu()">Admin</div>
@@ -99,11 +115,9 @@
                 </div>
                 <div id="userDropdown" class="user-dropdown">
                     <a href="/account">Account</a>
-                    <a href="/api">API Documentation</a>
                     {% if user.get('role') != 'admin' %}
                     <a href="/api_tokens">Linked Apps</a>
                     {% else %}
-                    <a href="/admin/api">Admin API Documentation</a>
                     <a href="/admin/users">Users</a>
                     <a href="/api_tokens">Linked Apps</a>
                     {% endif %}
@@ -141,6 +155,11 @@
             dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
         }
 
+        function toggleDocsMenu() {
+            const dropdown = document.getElementById('docsDropdown');
+            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
+        }
+
         // Close dropdown when clicking outside
         window.onclick = function(event) {
             const dropdown = document.getElementById('userDropdown');
@@ -153,6 +172,11 @@
             if (adminDropdown && adminIcon && !adminIcon.contains(event.target) && !adminDropdown.contains(event.target)) {
                 adminDropdown.style.display = 'none';
             }
+            const docsDropdown = document.getElementById('docsDropdown');
+            const docsIcon = document.querySelector('.docs-icon');
+            if (docsDropdown && docsIcon && !docsIcon.contains(event.target) && !docsDropdown.contains(event.target)) {
+                docsDropdown.style.display = 'none';
+            }
         }
 
         // Notification functions