Update templates/menu.html

templates/menu.html

@@ -174,23 +174,21 @@
         }
 
 /* styel */
-          .button-group {
+      .radio-button-group {
         display: flex;
-        gap: 10px;
+        gap: 20px;
         margin-top: 10px;
+        align-items: center;
     }
 
-    .btn {
-        padding: 10px 20px;
-        background-color: #007bff;
-        color: white;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
+    label {
+        font-size: 16px;
+        display: flex;
+        align-items: center;
     }
 
-    .btn:hover {
-        background-color: #0056b3;
+    input[type="radio"] {
+        margin-right: 5px;
     }
 
 
@@ -219,7 +217,7 @@
         </div>
 
         <!-- Avatar and Dropdown -->
-        <!-- <div class="avatar-dropdown-container">
+         <!-- <div class="avatar-dropdown-container">
             <div class="avatar-icon">
                 <!-- Use the first letter of the user's name for the avatar -->
                 <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
@@ -230,18 +228,26 @@
                 <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
                 <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
-        </div> --
-           <div class="avatar-dropdown-container">
+        </div>  -->
+<div class="avatar-dropdown-container">
     <div class="avatar-icon">
         <!-- Use the first letter of the user's name for the avatar -->
         <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
     </div>
-    <div class="button-group">
-        <!-- Replace the dropdown menu with buttons -->
-        <button class="btn filter-btn" onclick="filterItems('all')">All</button>
-        <button class="btn filter-btn" onclick="filterItems('veg')">Veg</button>
-        <button class="btn filter-btn" onclick="filterItems('non-veg')">Non-Veg</button>
-    </div>
+    <form id="filter-form" method="get">
+        <div class="radio-button-group">
+            <!-- Radio buttons with href-like behavior through form submission -->
+            <label>
+                <input type="radio" name="food-type" value="all" onclick="location.href='{{ url_for('all_items') }}'"> All
+            </label>
+            <label>
+                <input type="radio" name="food-type" value="veg" onclick="location.href='{{ url_for('veg_items') }}'"> Veg
+            </label>
+            <label>
+                <input type="radio" name="food-type" value="non-veg" onclick="location.href='{{ url_for('non_veg_items') }}'"> Non-Veg
+            </label>
+        </div>
+    </form>
 </div>