homebase-navigator / script.js
Dereck234's picture
now enhance the UI with icons, implement dark and light mode options, and make things to able to collapse
8d0c931 verified
Raw
History Blame Contribute Delete
1.46 kB
document.addEventListener('DOMContentLoaded', () => {
// Initialize theme from localStorage or prefer-color-scheme
const storedTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.classList.add(storedTheme);
// Apply theme to body for better transitions
document.body.style.transition = 'background-color 0.3s ease';
// Initialize navbar collapsed state
const navbar = document.querySelector('custom-navbar');
if (navbar) {
const isCollapsed = localStorage.getItem('navbarCollapsed') === 'true';
const mainContent = document.querySelector('main');
if (mainContent) {
mainContent.style.marginLeft = isCollapsed ? '80px' : '250px';
}
}
});
// Watch for theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const newTheme = e.matches ? 'dark' : 'light';
document.documentElement.classList.remove('dark', 'light');
document.documentElement.classList.add(newTheme);
localStorage.setItem('theme', newTheme);
});
// Smooth scroll for navigation items
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});