w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): redesign navigation bar and add Browse/Community links

Browse Source 
Enhance the navigation with a modern floating glass design, new Browse and Community dropdown links, and improved theme/blur toggles that now handle multiple instances. Update dropdown components with rounded styling and support for wider widths, refine nav-link active states, and add navigation feature tests.
This commit is contained in:
w33b
2026-08-09 10:13:54 +02:00
parent d08e280ce0
commit 338c190ae8
16 changed files with 393 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/theme.js
+15 -12
View File
@@ -7,7 +7,7 @@ function darkModeListener() {
}
}
document.querySelector("input[type='checkbox']#toogleTheme")?.addEventListener("click", darkModeListener);
document.querySelectorAll("input[type='checkbox']#toogleTheme").forEach((toggle) => toggle.addEventListener("click", darkModeListener));
if(localStorage.theme) {
if (localStorage.theme == 'light') {
@@ -15,10 +15,9 @@ if(localStorage.theme) {
document.querySelector("html").classList.toggle("dark");
}
const toggleThemeButton = document.getElementById("toogleTheme");
if (toggleThemeButton) {
toggleThemeButton.checked = true;
}
document.querySelectorAll("#toogleTheme").forEach((toggle) => {
toggle.checked = true;
});
}
} else {
@@ -28,7 +27,6 @@ if(localStorage.theme) {
// Ability to disable blur effects for slower devices
const LOCAL_STORAGE_KEY = 'blur';
const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur");
function setCSSFilter(selector, value) {
document.querySelectorAll(selector).forEach(el => {
@@ -38,10 +36,12 @@ function setCSSFilter(selector, value) {
function applyBlur(enabled) {
if (!enabled) {
setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none');
setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg, .backdrop-blur-xl, .backdrop-blur-2xl', 'none');
return;
}
setCSSFilter('.backdrop-blur-2xl', 'blur(40px)');
setCSSFilter('.backdrop-blur-xl', 'blur(24px)');
setCSSFilter('.backdrop-blur-lg', 'blur(16px)');
setCSSFilter('.backdrop-blur', 'blur(8px)');
setCSSFilter('.backdrop-blur-sm', 'blur(4px)');
@@ -51,19 +51,22 @@ function initBlurToggle() {
const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY);
const enabled = storedValue === null ? true : storedValue === 'true';
const blurCheckboxes = document.querySelectorAll("input[type='checkbox']#toggleBlur");
// initialize UI and DOM
applyBlur(enabled);
if (blurCheckbox) blurCheckbox.checked = enabled;
blurCheckboxes.forEach((checkbox) => {
checkbox.checked = enabled;
});
// add event listener
if (blurCheckbox) {
blurCheckbox.addEventListener('click', (e) => {
console.log("Received Event");
blurCheckboxes.forEach((checkbox) => {
checkbox.addEventListener('click', (e) => {
const isEnabled = e.target.checked;
applyBlur(isEnabled);
localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false');
});
}
});
}
initBlurToggle();