components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background-color: white;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                }
                .nav-link:hover {
                    color: #7c3aed;
                }
                .btn-primary {
                    background-color: #7c3aed;
                    transition: all 0.3s ease;
                }
                .btn-primary:hover {
                    background-color: #6d28d9;
                    transform: translateY(-2px);
                }
                @media (max-width: 768px) {
                    .mobile-menu {
                        display: none;
                    }
                    .mobile-menu.active {
                        display: flex;
                    }
                }
            </style>
            <nav class="py-4 px-6 sticky top-0 z-50">
                <div class="container mx-auto flex justify-between items-center">
                    <a href="/" class="flex items-center space-x-2">
                        <i data-feather="zap" class="text-indigo-600 w-6 h-6"></i>
                        <span class="text-xl font-bold text-gray-800">CodeCraft</span>
                    </a>
                    
                    <div class="hidden md:flex space-x-8">
                        <a href="/frontend.html" class="nav-link text-gray-600 hover:text-indigo-700">Frontend</a>
                        <a href="/backend.html" class="nav-link text-gray-600 hover:text-indigo-700">Backend</a>
                        <a href="/fullstack.html" class="nav-link text-gray-600 hover:text-indigo-700">Full-Stack</a>
                        <a href="/templates.html" class="nav-link text-gray-600 hover:text-indigo-700">Templates</a>
                        <a href="/docs.html" class="nav-link text-gray-600 hover:text-indigo-700">Docs</a>
                    </div>
                    
                    <div class="flex items-center space-x-4">
                        <button id="mobile-menu-button" class="md:hidden">
                            <i data-feather="menu" class="w-6 h-6 text-gray-600"></i>
                        </button>
                        <a href="/login.html" class="text-gray-600 hover:text-indigo-700">Login</a>
                        <a href="/signup.html" class="btn-primary text-white px-4 py-2 rounded-lg">Sign Up</a>
                    </div>
                </div>
                
                <!-- Mobile menu -->
                <div id="mobile-menu" class="mobile-menu md:hidden flex-col mt-4 space-y-3 hidden">
                    <a href="/frontend.html" class="nav-link text-gray-600 hover:text-indigo-700">Frontend</a>
                    <a href="/backend.html" class="nav-link text-gray-600 hover:text-indigo-700">Backend</a>
                    <a href="/fullstack.html" class="nav-link text-gray-600 hover:text-indigo-700">Full-Stack</a>
                    <a href="/templates.html" class="nav-link text-gray-600 hover:text-indigo-700">Templates</a>
                    <a href="/docs.html" class="nav-link text-gray-600 hover:text-indigo-700">Docs</a>
                </div>
            </nav>
        `;
        
        // Mobile menu toggle
        this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {
            const menu = this.shadowRoot.getElementById('mobile-menu');
            menu.classList.toggle('active');
        });
    }
}

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