components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
                * { font-family: 'Inter', sans-serif; }
                .header-container {
                    height: 64px;
                    background: rgba(9, 9, 11, 0.8);
                    backdrop-filter: blur(20px);
                    -webkit-backdrop-filter: blur(20px);
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 2rem;
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 50;
                }
.logo {
                    display: flex;
                    align-items: center;
                    space-x: 3;
                    cursor: pointer;
                    transition: transform 0.2s ease;
                }
                
                .logo:hover {
                    transform: scale(1.05);
                }
                
                .logo-text {
                    font-size: 1.25rem;
                    font-weight: 700;
                    background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }
                
                .logo-icon {
                    width: 36px;
                    height: 36px;
                    border-radius: 12px;
                    background: linear-gradient(135deg, #ffffff 0%, #6b7280 100%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
                }
                
                .nav-actions {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                }
                
                .icon-btn {
                    width: 40px;
                    height: 40px;
                    border-radius: 12px;
                    background: rgba(255, 255, 255, 0.05);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    color: #9ca3af;
                }
                
                .icon-btn:hover {
                    background: rgba(255, 255, 255, 0.1);
                    color: #ffffff;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
                }
                
                .menu-toggle {
                    display: none;
                }
                
                @media (max-width: 768px) {
                    .header-container {
                        padding: 0 1rem;
                    }
                    
                    .logo-text span {
                        display: none;
                    }
                    
                    .menu-toggle {
                        display: flex;
                    }
                }
            </style>
            
            <header class="header-container">
                <div onclick="location.href='/'" class="logo">
                    <div class="logo-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2">
                            <path d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            <path d="M12 2v6a2 2 0 002 2h6"/>
                        </svg>
                    </div>
                    <div class="logo-text text-white">
                        Nixaut <span>Copilot</span>
                    </div>
</div>
                
                <div class="nav-actions">
                    <button onclick="toggleTheme()" class="icon-btn" data-tooltip="Toggle theme">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="5"/>
                            <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
                        </svg>
                    </button>
                    
                    <button onclick="showNotifications()" class="icon-btn" data-tooltip="Notifications">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                            <path d="M13.73 21a2 2 0 01-3.46 0"/>
                        </svg>
                    </button>
                    
                    <button onclick="showUserMenu()" class="icon-btn" data-tooltip="User menu">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
                            <circle cx="12" cy="7" r="4"/>
                        </svg>
                    </button>
                    
                    <button onclick="toggleMobileSidebar()" class="icon-btn menu-toggle" data-tooltip="Menu">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M3 12h18M3 6h18M3 18h18"/>
                        </svg>
                    </button>
                </div>
            </header>
        `;
    }
}

customElements.define('custom-header', CustomHeader);