From a6b43ed329b98a2fe582ff429ffcb5c9fa45627b Mon Sep 17 00:00:00 2001 From: FrederikBaerentsen Date: Wed, 17 Apr 2024 20:10:00 +0200 Subject: [PATCH] Better navbar --- templates/index.html | 169 +++++++++++++++++++++++++++++++++---------- 1 file changed, 130 insertions(+), 39 deletions(-) diff --git a/templates/index.html b/templates/index.html index 1f625ac..44623b2 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,25 +1,22 @@ - + Set Overview - - + + + + +
- - -
+ + + +
@@ -169,7 +245,7 @@ body {

- Inventory + Inventory

@@ -436,7 +512,7 @@ document.addEventListener('DOMContentLoaded', function () { const themeDropdown = document.getElementById('themeDropdown'); // Retrieve all unique values from the elements - const themes = []; + const themes = ['Show all']; const themeLinks = document.querySelectorAll('.set_theme'); themeLinks.forEach(function(link) { const themeId = link.textContent.trim(); @@ -447,24 +523,29 @@ document.addEventListener('DOMContentLoaded', function () { // Create options for the dropdown list themes.forEach(function(theme) { - const option = document.createElement('option'); + const option = document.createElement('a'); + option.className = "navbar-item"; option.value = theme; option.textContent = theme; themeDropdown.appendChild(option); + option.addEventListener('click', function() { + filterGridItems(theme); + }); }); // Add event listener to filter grid items - themeDropdown.addEventListener('change', function() { - const selectedTheme = themeDropdown.value; - filterGridItems(selectedTheme); - }); +// themeDropdown.addEventListener('click', function() { +// console.log($(this)); +// const selectedTheme = themeDropdown.value; +// filterGridItems(selectedTheme); +// }); function filterGridItems(selectedTheme) { const gridItems = document.querySelectorAll('.grid-item'); gridItems.forEach(function(item) { const themeLink = item.querySelector('.set_theme'); const themeId = themeLink.textContent.trim(); - if (!selectedTheme || themeId === selectedTheme) { + if (!selectedTheme || themeId === selectedTheme || selectedTheme == "Show all") { item.style.display = 'block'; // Show the grid item } else { item.style.display = 'none'; // Hide the grid item @@ -473,7 +554,17 @@ document.addEventListener('DOMContentLoaded', function () { } }); +$(document).ready(function() { +// Check for click events on the navbar burger icon +$(".navbar-burger").click(function() { + + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + $(".navbar-burger").toggleClass("is-active"); + $(".navbar-menu").toggleClass("is-active"); + +}); +});