Change navigation.

app.py

@@ -144,6 +144,11 @@ def register():
     
     return render_template('register.html', title='Register')
 
+@app.route('/admin/dashboard')
+@admin_required
+def admin_dashboard():
+    return render_template('admin_dashboard.html', title='Admin Dashboard')
+
 @app.route('/admin/users')
 @admin_required
 def admin_users():

static/css/style.css

@@ -17,8 +17,11 @@ header {
 
 nav ul {
     display: flex;
+    justify-content: flex-start;
+    align-items: center;
     list-style: none;
-    justify-content: center;
+    padding: 0;
+    margin: 0;
 }
 
 nav ul li {
@@ -30,6 +33,61 @@ nav ul li a {
     text-decoration: none;
 }
 
+/* Dropdown menu styles */
+nav ul li.dropdown {
+    position: relative;
+}
+
+nav ul li.admin-dropdown {
+    margin-left: auto; /* Push to the right */
+}
+
+nav ul li.dropdown .dropdown-toggle {
+    cursor: pointer;
+    padding: 10px 15px;
+    display: block;
+    color: #fff;
+    text-decoration: none;
+}
+
+nav ul li.dropdown .dropdown-menu {
+    display: none;
+    position: absolute;
+    right: 0; /* Align to the right for admin dropdown */
+    background-color: #333;
+    min-width: 180px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1000;
+    padding: 10px 0;
+    border-radius: 4px;
+    margin-top: 5px;
+}
+
+/* Show dropdown on hover and keep it visible when hovering over the menu */
+nav ul li.dropdown:hover .dropdown-menu,
+nav ul li.dropdown .dropdown-menu:hover {
+    display: block;
+}
+
+nav ul li.dropdown .dropdown-menu li {
+    display: block;
+    padding: 0;
+    width: 100%;
+}
+
+nav ul li.dropdown .dropdown-menu li a {
+    padding: 10px 20px;
+    display: block;
+    text-align: left;
+    color: #fff;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+}
+
+nav ul li.dropdown .dropdown-menu li a:hover {
+    background-color: #444;
+}
+
 main {
     max-width: 1200px;
     margin: 2rem auto;
@@ -413,4 +471,36 @@ input[type="time"]::-webkit-datetime-edit {
     color: #666;
     margin-top: 4px;
     font-style: italic;
+}
+
+/* Admin Dashboard Styles */
+.admin-panel {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.admin-card {
+    background-color: #f8f9fa;
+    border-radius: 5px;
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    width: 300px;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.admin-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.admin-card h2 {
+    margin-top: 0;
+    color: #333;
+}
+
+.admin-card p {
+    color: #666;
+    margin-bottom: 20px;
 }

static/js/script.js

@@ -142,24 +142,24 @@ document.addEventListener('DOMContentLoaded', function() {
             const parent = this.parentElement;
             const menu = parent.querySelector('.dropdown-menu');
             
-            // Close all other open dropdowns
-            document.querySelectorAll('.dropdown-menu').forEach(item => {
-                if (item !== menu && item.classList.contains('show')) {
-                    item.classList.remove('show');
-                }
-            });
-            
-            // Toggle current dropdown
-            menu.classList.toggle('show');
+            // Toggle the display of the dropdown menu
+            if (menu.style.display === 'block') {
+                menu.style.display = 'none';
+            } else {
+                // Close all other open dropdowns first
+                document.querySelectorAll('.dropdown-menu').forEach(m => {
+                    if (m !== menu) m.style.display = 'none';
+                });
+                menu.style.display = 'block';
+            }
         });
     });
     
-    // Close dropdown when clicking outside
+    // Close dropdowns when clicking outside
     document.addEventListener('click', function(e) {
-        if (!e.target.matches('.dropdown-toggle')) {
-            const dropdowns = document.querySelectorAll('.dropdown-menu.show');
-            dropdowns.forEach(dropdown => {
-                dropdown.classList.remove('show');
+        if (!e.target.closest('.dropdown')) {
+            document.querySelectorAll('.dropdown-menu').forEach(menu => {
+                menu.style.display = 'none';
             });
         }
     });

templates/admin_dashboard.html

@@ -0,0 +1,32 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="admin-container">
+    <h1>Admin Dashboard</h1>
+    
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+            {% for category, message in messages %}
+                <div class="alert alert-{{ category }}">{{ message }}</div>
+            {% endfor %}
+        {% endif %}
+    {% endwith %}
+    
+    <div class="admin-panel">
+        <div class="admin-card">
+            <h2>User Management</h2>
+            <p>Manage user accounts, permissions, and roles.</p>
+            <a href="{{ url_for('admin_users') }}" class="btn btn-primary">Manage Users</a>
+        </div>
+        
+        <!-- You can add more admin cards here in the future -->
+        <!-- For example:
+        <div class="admin-card">
+            <h2>System Settings</h2>
+            <p>Configure application-wide settings.</p>
+            <a href="#" class="btn btn-primary">Configure</a>
+        </div>
+        -->
+    </div>
+</div>
+{% endblock %}

templates/layout.html

@@ -15,20 +15,18 @@
                     <li><a href="{{ url_for('history') }}">History</a></li>
                     <li><a href="{{ url_for('config') }}">Config</a></li>
                     <li><a href="{{ url_for('about') }}">About</a></li>
-                    <li><a href="{{ url_for('contact') }}">Contact</a></li>
                     
-                    <!-- Add Admin dropdown menu here -->
+                    <!-- Admin dropdown menu moved to the rightmost position -->
                     {% if g.user.is_admin %}
-                    <li class="dropdown">
+                    <li class="dropdown admin-dropdown">
                         <a href="#" class="dropdown-toggle">Admin</a>
                         <ul class="dropdown-menu">
-                            <li><a href="{{ url_for('admin_users') }}">User Management</a></li>
+                            <li><a href="{{ url_for('profile') }}">Profile</a></li>
+                            <li><a href="{{ url_for('admin_dashboard') }}">Dashboard</a></li>
+                            <li><a href="{{ url_for('logout') }}">Logout</a></li>
                         </ul>
                     </li>
                     {% endif %}
-                    
-                    <li><a href="{{ url_for('profile') }}">Profile</a></li>
-                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
                 {% else %}
                     <li><a href="{{ url_for('login') }}">Login</a></li>
                     <li><a href="{{ url_for('register') }}">Register</a></li>