readd searchbar

src/main/resources/static/css/navbar.css

@@ -72,21 +72,6 @@
   /* Adjust this to your desired shadow */
 }
 
-/* Set a fixed height and styling for each search result item */
-.search-results a {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  /* space between icon and text */
-  height: 40px;
-  /* Adjust based on your design */
-  overflow: hidden;
-  /* Prevent content from overflowing */
-  white-space: nowrap;
-  /* Prevent text from wrapping to next line */
-  text-overflow: ellipsis;
-  /* Truncate text if it's too long */
-}
 
 .main-icon {
   width: 36px;

src/main/resources/static/js/search.js

@@ -1,9 +1,5 @@
 // Toggle search bar when the search icon is clicked
-document.querySelector("#search-icon").addEventListener("click", function (e) {
+
-  e.preventDefault();
-  var searchBar = document.querySelector("#navbarSearch");
-  searchBar.classList.toggle("show");
-});
 window.onload = function () {
   var items = document.querySelectorAll(".dropdown-item, .nav-link");
   var dummyContainer = document.createElement("div");
@@ -41,7 +37,7 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function
 
   items.forEach(function (item) {
     var titleElement = item.querySelector(".icon-text");
-    var iconElement = item.querySelector(".icon");
+    var iconElement = item.querySelector(".material-symbols-rounded, .icon");
     var itemHref = item.getAttribute("href");
     var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string
 
@@ -55,10 +51,9 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function
         result.href = itemHref;
         result.classList.add("dropdown-item");
 
-        var resultIcon = document.createElement("img");
+        var resultIcon = document.createElement("span");
-        resultIcon.src = iconElement.src;
+        resultIcon.classList.add("material-symbols-rounded");
-        resultIcon.alt = "icon";
+        resultIcon.textContent = iconElement.textContent;
-        resultIcon.classList.add("icon");
         result.appendChild(resultIcon);
 
         var resultText = document.createElement("span");
@@ -74,3 +69,4 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function
   // Set the width of the search results box to the maximum width
   resultsBox.style.width = window.navItemMaxWidth + "px";
 });
+

src/main/resources/templates/fragments/navbar.html

@@ -326,6 +326,27 @@
               </div>
             </div>
           </li>
+          
+          <li class="nav-item dropdown">
+			  <a class="nav-link" href="#" id="searchDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			    <span class="material-symbols-rounded">
+			      search
+			    </span>
+			    <span class="icon-text icon-hide">Search</span>
+			  </a>
+			  <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="searchDropdown">
+			    <div class="dropdown-menu-wrapper px-xl-2 px-2">
+			      <form class="d-flex p-2 search-form" id="searchForm">
+			        <input class="form-control search-input" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput">
+			      </form>
+			      <!-- Search Results -->
+			      <div id="searchResults" class="search-results scrollable-y dropdown-mw-20"></div>
+			    </div>
+			  </div>
+			</li>
+
+
+
           <li class="nav-item">
             <!-- Settings Button -->
             <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">