Update templates/menu.html

templates/menu.html

@@ -177,7 +177,7 @@
     display: flex;
     justify-content: flex-start; /* Align items to the left */
     align-items: center; /* Vertically center */
-    width: 300px; /* Adjust width as needed */
+    width: 250px; /* Adjust width as needed */
 }
 .search-bar-container input {
     width: 100%;
@@ -186,6 +186,13 @@
     border-radius: 20px;
     border: none;
 }
+
+.search-icon {
+    position: absolute;
+    left: 10px; /* Position the icon inside the input box */
+    font-size: 20px;
+    color: #888; /* Icon color */
+}
     /* Style for customization sections */
     .addon-section {
         background-color: #f8f9fa; /* Light gray background */
@@ -305,6 +312,10 @@
         <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
     </div>
 </div>
+<div class="search-bar-container">
+    <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
+    <i class="bi bi-search search-icon"></i> <!-- Search icon -->
+</div>
 
 <!-- Category Filter with Custom Radio Buttons -->
 <form method="get" action="/menu" class="text-center mb-4">