diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css index c3138a5b..5de3f06b 100644 --- a/src/main/resources/static/css/navbar.css +++ b/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; diff --git a/src/main/resources/static/js/search.js b/src/main/resources/static/js/search.js index 2329f998..cef29c18 100644 --- a/src/main/resources/static/js/search.js +++ b/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"); - resultIcon.src = iconElement.src; - resultIcon.alt = "icon"; - resultIcon.classList.add("icon"); + var resultIcon = document.createElement("span"); + resultIcon.classList.add("material-symbols-rounded"); + resultIcon.textContent = iconElement.textContent; 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"; }); + diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html index d23f643f..1bc2c7a5 100644 --- a/src/main/resources/templates/fragments/navbar.html +++ b/src/main/resources/templates/fragments/navbar.html @@ -326,6 +326,27 @@ + + + + +