components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    backdrop-filter: blur(10px);
                    background-color: rgba(255, 255, 255, 0.95);
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                }
                .nav-link {
                    transition: all 0.2s ease;
                }
                .nav-link:hover {
                    color: #0D47A1;
                }
                .mobile-menu {
                    transition: all 0.3s ease;
                }
            </style>
            <nav class="navbar sticky top-0 z-50 border-b border-gray-100">
                <div class="container mx-auto px-4 py-3">
                    <div class="flex justify-between items-center">
                        <a href="/" class="flex items-center">
                            <i data-feather="book-open" class="text-primary mr-2"></i>
                            <span class="text-xl font-bold text-primary">EduSphere</span>
                        </a>
                        
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="#" class="nav-link text-gray-700">Features</a>
                            <a href="#" class="nav-link text-gray-700">Pricing</a>
                            <a href="#" class="nav-link text-gray-700">About</a>
                            <a href="/login.html" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg font-medium transition-all">
                                Login
                            </a>
</div>
                        
                        <button id="mobileMenuButton" class="md:hidden text-gray-700">
                            <i data-feather="menu"></i>
                        </button>
                    </div>
                    
                    <div id="mobileMenu" class="mobile-menu hidden md:hidden mt-4 pb-4">
                        <a href="#" class="block py-2 text-gray-700">Features</a>
                        <a href="#" class="block py-2 text-gray-700">Pricing</a>
                        <a href="#" class="block py-2 text-gray-700">About</a>
                        <a href="/login.html" class="block w-full mt-2 bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg font-medium transition-all text-center">
                            Login
                        </a>
</div>
                </div>
            </nav>
        `;
        
        // Mobile menu toggle
        const menuButton = this.shadowRoot.getElementById('mobileMenuButton');
        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
        
        menuButton.addEventListener('click', () => {
            const isHidden = mobileMenu.classList.contains('hidden');
            if (isHidden) {
                mobileMenu.classList.remove('hidden');
                menuButton.innerHTML = feather.icons.x.toSvg();
            } else {
                mobileMenu.classList.add('hidden');
                menuButton.innerHTML = feather.icons.menu.toSvg();
            }
        });
    }
}

customElements.define('custom-navbar', CustomNavbar);