Update templates/menu.html

templates/menu.html

@@ -143,19 +143,24 @@
         margin-top: 180px; /* Adjust spacing based on navbar and search bar */
     }
     .fixed-top-bar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 44px;
-        z-index: 1000; /* Ensures it stays on top of other elements */
-        background-color: #FF6B35; /* Updated header background */
-        color: white;
-        padding: 15px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 44px;
+    z-index: 1000;
+    background-color: #FF6B35;
+    color: white;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.avatar-dropdown-container {
+    position: relative;
+    margin-left: auto;  /* Align to the right */
+}
      
     .search-bar-container {
     margin-left: 20px;
@@ -365,6 +370,45 @@
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <!-- Item Image -->
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
+                    <!-- Item Name -->
+                    <h5 id="modal-name" class="fw-bold text-center"></h5>
+                    <!-- Item Price -->
+                    <p id="modal-price" class="text-muted text-center"></p>
+                    <!-- Item Description -->
+                    <p id="modal-description" class="text-secondary"></p>
+                    <!-- Add-ons -->
+                    <div id="modal-addons" class="modal-addons mt-4">
+                        <h6>Customization Options</h6>
+                        <div id="addons-list" class="addons-container">Loading customization options...</div>
+                    </div>
+
+
+                    <div class="mt-4">
+                        <h6>Custom Request</h6>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
+                    </div>
+                    <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- JavaScript -->
     <script>
         function showItemDetails(name, price, image, description, section, selectedCategory) {