<!-- Theme toggle -->
<div class="p-6 border-t border-border/30">
<button
- @click="toggleTheme(); closeMenu()"
+ id="theme-toggle"
+ @click="closeMenu()"
class="w-full py-3 px-4 bg-surface hover:bg-surface/80 rounded flex items-center justify-center gap-2 transition-colors"
>
<i data-feather="moon" class="w-4 h-4"></i>
Alpine.store('menu').close();
}
- function toggleTheme() {
- const html = document.documentElement;
- const isDark = html.classList.contains('theme-dark');
- const newTheme = isDark ? 'light' : 'dark';
- html.classList.remove('theme-light', 'theme-dark');
- html.classList.add('theme-' + newTheme);
- localStorage.setItem('theme', newTheme);
- feather.replace();
- }
-
document.getElementById('menu-toggle').addEventListener('click', () => {
Alpine.store('menu').toggle();
});
- document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
-
// Close menu on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {