bookhoard/web/src/header.ts

// 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;