Change navigation.

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