Update templates/menu.html

templates/menu.html

@@ -628,15 +628,34 @@ form-check-input addon-option{
 }
 
 /* Ensure that the buttons do not stretch too much or shrink too much */
-.category-container > .category-btn {
+/* Ensures all buttons stay in the same row */
+.category-container {
+    display: flex;
+    justify-content: space-between; /* Aligns buttons in a row */
+    gap: 15px; /* Space between buttons */
+    margin-top: 20px; /* Space above the button row */
+}
+
+/* Style for the buttons */
+.category-btn {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    padding: 10px 20px;
+    border: 2px solid #ccc;
+    border-radius: 25px;
+    background-color: white;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+    width: 120px; /* Ensures buttons are of equal width */
+    text-align: center;
 }
 
-/* Ensure equal size and padding */
-.category-container button {
-    width: 100%; /* Ensures that all buttons take the same width */
+/* Icons styling */
+.category-btn .icon {
+    margin-right: 8px; /* Space between icon and text */
+    font-size: 20px; /* Icon size */
 }
 
 /* Hover effect for buttons */
@@ -652,6 +671,21 @@ form-check-input addon-option{
     border: 2px solid #ff7043;
 }
 
+/* Example icons from Font Awesome, adjust based on your icon class */
+.category-btn .icon.all {
+    content: '\f0f6'; /* FontAwesome icon code for "All" */
+}
+.category-btn .icon.veg {
+    content: '\f4cd'; /* FontAwesome icon code for "Veg" */
+}
+.category-btn .icon.nonveg {
+    content: '\f0f6'; /* FontAwesome icon code for "Non Veg" */
+}
+.category-btn .icon.customized {
+    content: '\f0c0'; /* FontAwesome icon code for "Customized" */
+}
+
+
 
 
 
@@ -699,7 +733,7 @@ form-check-input addon-option{
         <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
     </div> -->
 <!-- </form>  --> 
-<form method="get" action="/menu" class="text-center mb-4">
+<!-- <form method="get" action="/menu" class="text-center mb-4">
     <!-- <label class="form-label fw-bold">Select a Category:</label> -->
     
     <div class="form-check form-check-inline category-container">
@@ -717,9 +751,28 @@ form-check-input addon-option{
             Customized Dish
         </button>
     </div>
+</form> -->
+  <form method="get" action="/menu" class="text-center mb-4">
+    <div class="category-container">
+        {% for category in categories %}
+            <button type="submit" name="category" value="{{ category }}" class="category-btn
+                {% if selected_category == category %}active-btn{% endif %}">
+                <i class="icon {{ category | lower }}"></i> <!-- Example icon class -->
+                {{ category }}
+            </button>
+        {% endfor %}
+        
+        <!-- Customized Dish button -->
+        <button type="submit" name="category" value="Customized Dish" class="category-btn
+            {% if selected_category == "Customized Dish" %}active-btn{% endif %}">
+            <i class="icon customized"></i> <!-- Example icon class -->
+            Customized Dish
+        </button>
+    </div>
 </form>
 
 
+