feat: add reusable header component with theme switcher

- Add header.templ component with app title, search, theme switcher, user menu - Implement dropdown menus for theme selection and user actions - Add wood theme options (Wood Light, Wood Dark, Wood Mahogany) - Support all existing themes with visual color swatches - Auto-close dropdowns when clicking outside - TypeScript header functionality with proper type safety Features: - Left: App title "📚 Bookmann" linking to /bookshelf - Center: Search box (ready for future search functionality) - Right: Theme switcher button with color dropdown → User icon menu - User menu includes Settings, Admin Panel (if admin), and Logout - Theme persistence to localStorage and server via API
2026-01-29 15:51:38 -05:00
parent 399485d53d
commit 2a91ff9477
3 changed files with 296 additions and 0 deletions
@@ -0,0 +1,114 @@
+// Header functionality
+
+const toggleThemeDropdown = (): void => {
+    const dropdown = document.getElementById('theme-dropdown');
+    if (dropdown) {
+        dropdown.classList.toggle('hidden');
+        
+        // Close user menu if open
+        const userMenu = document.getElementById('user-menu');
+        if (userMenu && !dropdown.classList.contains('hidden')) {
+            userMenu.classList.add('hidden');
+        }
+    }
+};
+
+const toggleUserMenu = (): void => {
+    const menu = document.getElementById('user-menu');
+    if (menu) {
+        menu.classList.toggle('hidden');
+        
+        // Close theme dropdown if open
+        const themeDropdown = document.getElementById('theme-dropdown');
+        if (themeDropdown && !menu.classList.contains('hidden')) {
+            themeDropdown.classList.add('hidden');
+        }
+    }
+};
+
+const changeThemeTo = (theme: string): void => {
+    // Apply the theme
+    if (theme.startsWith('wood-')) {
+        // Apply wood background theme
+        document.body.className = `theme-${theme}`;
+        
+        // Set wood background style
+        let woodGradient = '';
+        switch (theme) {
+            case 'wood-light':
+                woodGradient = 'linear-gradient(135deg, #deb887 0%, #d2a679 50%, #c9975b 100%)';
+                break;
+            case 'wood-dark':
+                woodGradient = 'linear-gradient(135deg, #8b7355 0%, #6b5344 50%, #5a4636 100%)';
+                break;
+            case 'wood-mahogany':
+                woodGradient = 'linear-gradient(135deg, #a0522d 0%, #8b4513 50%, #7a3c10 100%)';
+                break;
+        }
+        
+        document.body.style.background = woodGradient;
+        document.body.style.backgroundSize = 'cover';
+        document.body.style.backgroundAttachment = 'fixed';
+    } else {
+        // Apply regular theme
+        document.body.className = `theme-${theme}`;
+        document.body.style.background = '';
+        document.body.style.backgroundSize = '';
+        document.body.style.backgroundAttachment = '';
+    }
+    
+    // Save to localStorage
+    localStorage.setItem('theme', theme);
+    
+    // Save to server if logged in
+    const token = localStorage.getItem('token');
+    if (token) {
+        fetch('/api/auth/theme', {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify({ theme })
+        }).catch(err => console.log('Theme save failed', err));
+    }
+    
+    // Close dropdown
+    const dropdown = document.getElementById('theme-dropdown');
+    if (dropdown) {
+        dropdown.classList.add('hidden');
+    }
+};
+
+const logout = (): void => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.href = '/';
+};
+
+// Close dropdowns when clicking outside
+document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    const themeDropdown = document.getElementById('theme-dropdown');
+    const userMenu = document.getElementById('user-menu');
+    const themeButton = target?.closest('button[onclick="toggleThemeDropdown()"]');
+    const userButton = target?.closest('button[onclick="toggleUserMenu()"]');
+    
+    if (!themeButton && themeDropdown && !themeDropdown.classList.contains('hidden')) {
+        if (!themeDropdown.contains(target)) {
+            themeDropdown.classList.add('hidden');
+        }
+    }
+    
+    if (!userButton && userMenu && !userMenu.classList.contains('hidden')) {
+        if (!userMenu.contains(target)) {
+            userMenu.classList.add('hidden');
+        }
+    }
+});
+
+// Make functions available globally
+(window as any).toggleThemeDropdown = toggleThemeDropdown;
+(window as any).toggleUserMenu = toggleUserMenu;
+(window as any).changeThemeTo = changeThemeTo;
+(window as any).logout = logout;