components/navbar.js

class NavHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    background: rgba(255, 255, 255, 0.95);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                }
                
                .logo {
                    font-size: 1.5rem;
                    font-weight: 700;
                    background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }
                
                .nav-link {
                    position: relative;
                    transition: color 0.3s ease;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -4px;
                    left: 50%;
                    background-color: #3b82f6;
                    transition: all 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                    left: 0;
                }
                
                @media (max-width: 768px) {
}
            </style>
            <nav class="navbar sticky top-0 z-40 px-4 md:px-6 py-4">
                <div class="container mx-auto flex justify-center items-center">
                    <div class="flex items-center gap-2">
                        <i data-feather="check-square" class="w-8 h-8 text-primary-500"></i>
                        <span class="logo">TaskMail</span>
                    </div>
                </div>
            </nav>
</nav>
        `;
// Initialize feather icons
        setTimeout(() => {
            feather.replace();
        }, 0);
    }
}

customElements.define('nav-header', NavHeader);