Update templates/menu.html

templates/menu.html

@@ -172,29 +172,32 @@
      
 .search-bar-container {
     position: absolute;
-    left: 20px; /* Move the search bar to the left */
-    top: 50%; /* Vertically center it */
-    transform: translateY(-50%); /* Adjust vertical position */
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
-    justify-content: flex-start; /* Align items to the left */
-    align-items: center; /* Vertically center */
+    justify-content: flex-start;
+    align-items: center;
     width: 300px; /* Adjust width as needed */
-   position: relative; /* Make sure container can position the icon inside */
+    position: relative; /* Make sure container can position the icon inside */
 }
+
 .search-bar-container input {
     width: 100%;
-    padding: 8px;
+    padding: 8px 30px 8px 10px; /* Add padding to the left for the icon */
     font-size: 16px;
-    border-radius: 10px;
+    border-radius: 20px;
     border: none;
 }
+
 .search-icon {
     position: absolute;
-    left: 10px; /* Position the icon inside the input box */
+    right: 10px; /* Position the icon on the right side inside the input */
     font-size: 20px;
     color: #888; /* Icon color */
     pointer-events: none; /* Disable clicking on the icon */
 }
+
     /* Style for customization sections */
     .addon-section {
         background-color: #f8f9fa; /* Light gray background */