Update templates/menu.html

templates/menu.html

@@ -463,24 +463,27 @@ form-check-input addon-option{
     </div>
 </div>
 
-<form method="get" action="/menu" class="text-center mb-4">
-    <label class="form-label fw-bold">Show Veg Items:</label>
+<form method="get" action="/menu" class="text-center mb-4" id="filter-form">
+    <label class="form-label fw-bold">Filters:</label>
+
+    <!-- Veg Toggle -->
     <div class="form-check form-check-inline">
-        <!-- Veg toggle switch -->
-        <input type="checkbox" id="veg-toggle" name="veg" 
-            {% if selected_category == "Veg" %}checked{% endif %} onchange="this.form.submit()" class="custom-toggle">
+        <input type="checkbox" id="veg-toggle" name="veg"
+            {% if selected_category == "Veg" %}checked{% endif %}
+            class="custom-toggle" onchange="handleToggle('veg')">
         <label class="form-check-label" for="veg-toggle">Veg Only</label>
     </div>
 
-    <!-- Customized Dish toggle (styled like a switch) -->
+    <!-- Customized Dish Toggle -->
     <div class="form-check form-check-inline">
         <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
-            class="custom-toggle"
-            {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
+            {% if selected_category == "Customized Dish" %}checked{% endif %}
+            class="custom-toggle" onchange="handleToggle('custom')">
         <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
     </div>
 </form>
 
+
 <!-- Show menu items only when Customized Dish is not selected -->
 <div class="container mt-4">
     <h1 class="text-center">Menu</h1>
@@ -647,6 +650,26 @@ form-check-input addon-option{
                 document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
             });
     }
+  function handleToggle(source) {
+        const form = document.getElementById("filter-form");
+        const veg = document.getElementById("veg-toggle");
+        const custom = document.getElementById("category-CustomizedDish");
+
+        if (source === 'veg') {
+            // If Veg is being turned ON, turn OFF Customized Dish
+            if (veg.checked) {
+                custom.checked = false;
+            }
+        } else if (source === 'custom') {
+            // If Customized Dish is being turned ON, turn OFF Veg
+            if (custom.checked) {
+                veg.checked = false;
+            }
+        }
+
+        // Submit form after toggling
+        form.submit();
+  }
 
     // Handle single-select/deselect logic for checkbox groups in all modals
     document.addEventListener('click', function(event) {