From 0eb019fc3c790cdf0927f8133392cdc41bbaa910 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Wed, 19 Jul 2023 23:15:16 +0100
Subject: [PATCH] searchbar cleanups

---
 src/main/resources/static/js/search.js        | 144 +++++++++---------
 .../resources/templates/fragments/navbar.html |  53 ++++++-
 2 files changed, 122 insertions(+), 75 deletions(-)

diff --git a/src/main/resources/static/js/search.js b/src/main/resources/static/js/search.js
index 3c19ed84..e8c9bf9e 100644
--- a/src/main/resources/static/js/search.js
+++ b/src/main/resources/static/js/search.js
@@ -1,72 +1,72 @@
-// 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');
-    dummyContainer.style.position = 'absolute';
-    dummyContainer.style.visibility = 'hidden';
-    dummyContainer.style.whiteSpace = 'nowrap';  // Ensure we measure full width
-    document.body.appendChild(dummyContainer);
-
-    var maxWidth = 0;
-
-    items.forEach(function(item) {
-        var clone = item.cloneNode(true);
-        dummyContainer.appendChild(clone);
-        var width = clone.offsetWidth;
-        if (width > maxWidth) {
-            maxWidth = width;
-        }
-        dummyContainer.removeChild(clone);
-    });
-
-    document.body.removeChild(dummyContainer);
-
-    // Store max width for later use
-    window.navItemMaxWidth = maxWidth;
-};
-
-// Show search results as user types in search box
-document.querySelector('#navbarSearchInput').addEventListener('input', function(e) {
-    var searchText = e.target.value.toLowerCase();
-    var items = document.querySelectorAll('.dropdown-item, .nav-link');
-    var resultsBox = document.querySelector('#searchResults');
-
-    // Clear any previous results
-    resultsBox.innerHTML = '';
-
-    items.forEach(function(item) {
-        var titleElement = item.querySelector('.icon-text');
-        var iconElement = item.querySelector('.icon');
-        var itemHref = item.getAttribute('href');
-        if (titleElement && iconElement && itemHref !== '#') {
-            var title = titleElement.innerText.toLowerCase();
-            if (title.indexOf(searchText) !== -1 && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) {
-                var result = document.createElement('a');
-                result.href = itemHref;
-                result.classList.add('dropdown-item');
-
-                var resultIcon = document.createElement('img');
-                resultIcon.src = iconElement.src;
-                resultIcon.alt = 'icon';
-                resultIcon.classList.add('icon');
-                result.appendChild(resultIcon);
-
-                var resultText = document.createElement('span');
-                resultText.textContent = title;
-                resultText.classList.add('icon-text');
-                result.appendChild(resultText);
-
-                resultsBox.appendChild(result);
-            }
-        }
-    });
-
-    // Set the width of the search results box to the maximum width
-    resultsBox.style.width = window.navItemMaxWidth + 'px';
-});
-
+// 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');
+    dummyContainer.style.position = 'absolute';
+    dummyContainer.style.visibility = 'hidden';
+    dummyContainer.style.whiteSpace = 'nowrap';  // Ensure we measure full width
+    document.body.appendChild(dummyContainer);
+
+    var maxWidth = 0;
+
+    items.forEach(function(item) {
+        var clone = item.cloneNode(true);
+        dummyContainer.appendChild(clone);
+        var width = clone.offsetWidth;
+        if (width > maxWidth) {
+            maxWidth = width;
+        }
+        dummyContainer.removeChild(clone);
+    });
+
+    document.body.removeChild(dummyContainer);
+
+    // Store max width for later use
+    window.navItemMaxWidth = maxWidth;
+};
+
+// Show search results as user types in search box
+document.querySelector('#navbarSearchInput').addEventListener('input', function(e) {
+    var searchText = e.target.value.toLowerCase();
+    var items = document.querySelectorAll('.dropdown-item, .nav-link');
+    var resultsBox = document.querySelector('#searchResults');
+
+    // Clear any previous results
+    resultsBox.innerHTML = '';
+
+    items.forEach(function(item) {
+        var titleElement = item.querySelector('.icon-text');
+        var iconElement = item.querySelector('.icon');
+        var itemHref = item.getAttribute('href');
+        if (titleElement && iconElement && itemHref !== '#') {
+            var title = titleElement.innerText;
+            if (title.toLowerCase().indexOf(searchText) !== -1 && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) {
+                var result = document.createElement('a');
+                result.href = itemHref;
+                result.classList.add('dropdown-item');
+
+                var resultIcon = document.createElement('img');
+                resultIcon.src = iconElement.src;
+                resultIcon.alt = 'icon';
+                resultIcon.classList.add('icon');
+                result.appendChild(resultIcon);
+
+                var resultText = document.createElement('span');
+                resultText.textContent = title;
+                resultText.classList.add('icon-text');
+                result.appendChild(resultText);
+
+                resultsBox.appendChild(result);
+            }
+        }
+    });
+
+    // 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 810a3754..804a442e 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -219,14 +219,61 @@
     </a>
     <!-- Search Bar -->
     <div class="collapse position-absolute" id="navbarSearch">
-        <form class="d-flex p-2 bg-white border" id="searchForm">
-            <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput">
+        <form class="d-flex p-2 bg-white border 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="border p-2 bg-white"></div>
+        <div id="searchResults" class="border p-2 bg-white search-results"></div>
     </div>
 </li>
+<style>
+#search-icon i {
+    font-size: 24px; /* Adjust this to your desired size */
+    transition: color 0.3s;
+}
 
+#search-icon:hover i {
+    color: #666; /* Adjust this to your hover color */
+}
+
+#navbarSearch {
+    transition: all 0.3s;
+    max-height: 0;
+    overflow: hidden;
+    
+}
+
+#navbarSearch.show {
+    max-height: 300px; /* Adjust this to your desired max height */
+}
+
+.search-input {
+    transition: border 0.3s, box-shadow 0.3s;
+    
+}
+
+.search-input:focus {
+    border-color: #666; /* Adjust this to your focus color */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjust this to your desired shadow */
+}
+
+#searchResults {
+    max-width: 300px; /* Adjust to your preferred width */
+    transition: height 0.3s ease; /* Smooth height transition */
+}
+
+/* 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 */
+}
+
+</style>
 
                 </ul>