73 lines
2.7 KiB
JavaScript
73 lines
2.7 KiB
JavaScript
|
// 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';
|
||
|
|
});
|
||
|
|
|