Update templates/menu.html

templates/menu.html

@@ -41,18 +41,18 @@
             font-size: 0.9rem;
             border-radius: 20px;
             width: 100px;
-            background-color: #5bbfc1; !important; /* Green color */
-            border-color: #28a745 !important;
+            background-color: #5bbfc1;
+            border-color: #28a745;
         }
         .btn-primary:hover {
-            background-color: #4a5d68; !important; /* Darker green on hover */
-            border-color: #1e7e34 !important;
+            background-color: #4a5d68;
+            border-color: #1e7e34;
         }
         .btn-primary:active,
         .btn-primary:focus {
-            background-color: #4a5d68 !important; /* Same as hover color */
-            border-color: #1e7e34 !important;
-            box-shadow: none !important; /* Removes Bootstrap's focus outline */
+            background-color: #4a5d68;
+            border-color: #1e7e34;
+            box-shadow: none;
         }
 
         .filter-container {
@@ -96,35 +96,61 @@
             justify-content: center;
         }
         .view-cart-button:hover {
-            background-color: #4a5d68; /* This is causing the blue hover effect */
+            background-color: #4a5d68;
             text-decoration: none;
         }
-        .view-cart-button:hover,
-        .view-cart-button:focus,
-        .view-cart-button:active {
-            background-color: #4a5d68 !important; /* Keep the original background */
-            color: #fff !important;
-            text-decoration: none;
-            box-shadow: none !important;
+
+        .avatar-dropdown-container {
+            position: relative;
         }
 
-        .new-link {
-            background-color: #4CAF50; /* Green background for the link */
+        .avatar-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #5bbfc1;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             color: white;
-            padding: 8px 16px;
-            border-radius: 25px;
-            text-decoration: none;
+            font-size: 20px;
             font-weight: bold;
-            font-size: 1rem;
-            transition: background-color 0.3s ease;
         }
 
-        .new-link:hover {
-            background-color: #45a049; /* Darker green on hover */
+        .dropdown-menu {
+            position: absolute;
+            right: 0;
+            top: 100%;
+            background-color: #fff;
+            border-radius: 5px;
+            width: 300px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            display: none;
         }
-        .view-cart-button:hover {
-            background-color: #0056b3;
-            text-decoration: none;
+
+        .avatar-dropdown-container:hover .dropdown-menu {
+            display: block;
+        }
+
+        .dropdown-menu .dropdown-item {
+            padding: 10px 15px;
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .dropdown-menu .dropdown-item:last-child {
+            border-bottom: none;
+        }
+
+        .dropdown-menu .dropdown-item:hover {
+            background-color: #f1f1f1;
+        }
+
+        .dropdown-column {
+            flex: 1;
+            padding: 5px;
         }
     </style>
 </head>
@@ -133,8 +159,6 @@
         <div>
             <h6>Referral Code: <span id="referral-code">{{ referral_code }}</span></h6>
         </div>
-        <!-- Include Bootstrap Icons -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
 
         <div class="d-flex align-items-center">
             <a href="{{ url_for('order_history') }}" class="text-white mx-2" title="Order History">
@@ -148,6 +172,34 @@
         <div>
             <h6>Reward Points: <span id="reward-points">{{ reward_points | round(1) }}</span></h6>
         </div>
+
+        <!-- Avatar and Dropdown -->
+        <div class="avatar-dropdown-container">
+            <div class="avatar-icon">
+                <span>A</span>
+            </div>
+            <div class="dropdown-menu">
+                <div class="d-flex">
+                    <!-- Customer Details Column -->
+                    <div class="dropdown-column">
+                        <h6>Customer Details</h6>
+                        <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
+                    </div>
+
+                    <!-- Orders Column -->
+                    <div class="dropdown-column">
+                        <h6>Orders</h6>
+                        <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
+                    </div>
+
+                    <!-- Logout Column -->
+                    <div class="dropdown-column">
+                        <h6>Logout</h6>
+                        <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <div class="container mt-4">
@@ -188,7 +240,6 @@
         {% endfor %}
     </div>
 
-
     <!-- View Cart Button -->
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
@@ -196,6 +247,11 @@
         </a>
     </div>
 
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+
+
     <!-- Modal for Item Details -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">