Update templates/menu.html

templates/menu.html

@@ -183,66 +183,67 @@
         <h1 class="text-center">Menu</h1>
 
         <!-- Category Filter -->
-        <form method="get" action="/menu" class="text-center mb-4">
-            <label for="category" class="form-label fw-bold">Filter by Category:</label>
-            <select id="category" name="category" class="form-select" onchange="this.form.submit()">
-                {% for category in categories %}
-                    <option value="{{ category }}" {% if selected_category == category %}selected{% endif %}>
-                        {{ category }}
-                    </option>
-                {% endfor %}
-                <option value="Customized Dish" {% if selected_category == "Customized Dish" %}selected{% endif %}>
-                    Customized Dish
-                </option>
-            </select>
-        </form>
-
-        <!-- Display text boxes for Customized Dish -->
-        {% if selected_category == "Customized Dish" %}
-            <div id="custom-dish-form" class="mt-4">
-                <h3>Create Your Custom Dish</h3>
-                <form method="POST" action="/generate_custom_dish">
-                    <div class="mb-3">
-                        <label for="custom-dish-name" class="form-label">Dish Name</label>
-                        <input type="text" class="form-control" id="custom-dish-name" name="name" required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="custom-dish-description" class="form-label">Dish Description</label>
-                        <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Submit</button>
-                </form>
+        <!-- Category Filter -->
+<form method="get" action="/menu" class="text-center mb-4">
+    <label for="category" class="form-label fw-bold">Filter by Category:</label>
+    <select id="category" name="category" class="form-select" onchange="this.form.submit()">
+        {% for category in categories %}
+            <option value="{{ category }}" {% if selected_category == category %}selected{% endif %}>
+                {{ category }}
+            </option>
+        {% endfor %}
+        <option value="Customized Dish" {% if selected_category == "Customized Dish" %}selected{% endif %}>
+            Customized Dish
+        </option>
+    </select>
+</form>
+
+<!-- Display text boxes for Customized Dish -->
+{% if selected_category == "Customized Dish" %}
+    <div id="custom-dish-form" class="mt-4">
+        <h3>Create Your Custom Dish</h3>
+        <form method="POST" action="/generate_custom_dish">
+            <div class="mb-3">
+                <label for="custom-dish-name" class="form-label">Dish Name</label>
+                <input type="text" class="form-control" id="custom-dish-name" name="name" required>
             </div>
-        {% endif %}
-
-        <div class="fixed-search-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
-        </div>
+            <div class="mb-3">
+                <label for="custom-dish-description" class="form-label">Dish Description</label>
+                <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+    </div>
+{% else %}
+    <!-- Show menu items only when Customized Dish is not selected -->
+    <div class="container mt-4">
+        <h1 class="text-center">Menu</h1>
 
+        <!-- Menu Sections -->
         {% for section, items in ordered_menu.items() %}
-        <div class="menu-section">
-            <h3 class="mt-4">{{ section }}</h3>
+            <h3>{{ section }}</h3>
             <div class="row">
-
                 {% for item in items %}
-                <div class="col-md-6 mb-4">
-                    <div class="card menu-card">
-                        <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                        <div class="card-body">
-                            <h5 class="card-title">{{ item.Name }}</h5>
-                            <p class="card-text">${{ item.Price__c }}</p>
-                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{item.Section__c}}','{{ selected_category }}')">
-                                Add +
-                            </button>
+                    <div class="col-md-6 mb-4">
+                        <div class="card menu-card">
+                            <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                            <div class="card-body">
+                                <h5 class="card-title">{{ item.Name }}</h5>
+                                <p class="card-text">${{ item.Price__c }}</p>
+                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
+                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
+                                    Add +
+                                </button>
+                            </div>
                         </div>
                     </div>
-                </div>
                 {% endfor %}
             </div>
-        </div>
         {% endfor %}
     </div>
+{% endif %}
+
+    </div>
 
     <!-- View Cart Button -->
     <div class="view-cart-container">