Update templates/menu.html

templates/menu.html

@@ -335,6 +335,7 @@ form-check-input addon-option{
 }
      /* Custom Toggle Switch Styling */
 
+/* Flex container to align toggle buttons */
 /* Flex container to align toggle buttons */
 .toggle-container {
     display: flex;
@@ -378,7 +379,6 @@ form-check-input addon-option{
 }
 
 
-
 /* Optional: Style the labels */
 .form-check-label {
     font-size: 16px;
@@ -468,23 +468,23 @@ form-check-input addon-option{
 
     <!-- Wrapper for the toggle buttons -->
     <div class="toggle-container">
-        <!-- Veg Toggle Button -->
+        <!-- Veg Toggle Button (Checkbox styled as toggle) -->
         <div class="form-check form-check-inline">
-            <input type="radio" id="category-Veg" name="category" value="Veg"
+            <input type="checkbox" id="category-Veg" name="category" value="Veg"
                 class="custom-toggle"
                 {% if selected_category == "Veg" %}checked{% endif %} onchange="this.form.submit()">
             <label class="form-check-label" for="category-Veg">Veg</label>
         </div>
 
-        <!-- Customized Dish Toggle Button -->
+        <!-- Customized Dish Toggle Button (Checkbox styled as toggle) -->
         <div class="form-check form-check-inline">
-            <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
+            <input type="checkbox" id="category-CustomizedDish" name="category" value="Customized Dish"
                 class="custom-toggle"
                 {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
             <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
         </div>
     </div>
-
+    
     <!-- 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>
@@ -494,6 +494,7 @@ form-check-input addon-option{
 
 
 
+
   
   <!-- Show menu items only when Customized Dish is not selected -->
     <div class="container mt-4">
@@ -713,26 +714,14 @@ form-check-input addon-option{
     });
 }
   
-    // 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';
-            }
-        });
-    };
+// JavaScript to manage toggles being turned off independently
+document.querySelectorAll('.custom-toggle').forEach(toggle => {
+    toggle.addEventListener('click', function() {
+        // If clicked, toggle its checked state (on or off)
+        this.checked = !this.checked;
+    });
+});
+
 
 
 function addToCartFromModal() {