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