Update templates/menu.html

templates/menu.html

@@ -472,8 +472,7 @@ form-check-input addon-option{
         <div class="form-check form-check-inline">
             <input type="radio" id="category-Veg" name="category" value="Veg"
                 class="custom-toggle"
-                {% if selected_category == "Veg" %}checked{% endif %}
-                onchange="toggleCategory(this)">
+                {% if selected_category == "Veg" %}checked{% endif %} onchange="this.form.submit()">
             <label class="form-check-label" for="category-Veg">Veg</label>
         </div>
 
@@ -481,20 +480,20 @@ form-check-input addon-option{
         <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="toggleCategory(this)">
+                {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
             <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
         </div>
     </div>
 
-    <!-- Hidden field to handle showing all items when no category is selected -->
-    <input type="hidden" name="category" value="{% if selected_category == '' %}All{% endif %}">
+    <!-- Non-Veg logic handled in backend but not displayed in UI -->
+    <input type="hidden" name="category" value="{% if selected_category == 'Non-Veg' %}Non-Veg{% endif %}">
 </form>
 
 
 
 
 
+
   
   <!-- Show menu items only when Customized Dish is not selected -->
     <div class="container mt-4">
@@ -713,17 +712,29 @@ form-check-input addon-option{
         }
     });
 }
- function toggleCategory(element) {
-        // Check if the category is toggled off
-        if (element.checked) {
-            // If the category is Veg or Customized Dish, keep the form submit behavior as usual
-            this.form.submit();
-        } else {
-            // If neither Veg nor Customized Dish is selected, reset to show all
-            // It will show all items automatically when no specific category is selected
-            this.form.submit();
-        }
-    }
+  
+    // This script will run when the page loads
+    window.onload = function () {
+        const vegToggle = document.getElementById('category-Veg');
+        const customizedDishToggle = document.getElementById('category-CustomizedDish');
+
+        // Add event listeners to both toggle buttons
+        vegToggle.addEventListener('change', function () {
+            if (!vegToggle.checked && !customizedDishToggle.checked) {
+                // Reset to show all items when neither toggle is selected
+                window.location.href = '/menu?category=All';
+            }
+        });
+
+        customizedDishToggle.addEventListener('change', function () {
+            if (!vegToggle.checked && !customizedDishToggle.checked) {
+                // Reset to show all items when neither toggle is selected
+                window.location.href = '/menu?category=All';
+            }
+        });
+    };
+
+
 function addToCartFromModal() {
     const itemName = document.getElementById('modal-name').innerText;
     let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));