components/header.js

class HeaderComponent extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .nav-link {
                    position: relative;
                }
                .nav-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -2px;
                    left: 0;
                    background-color: #0ea5e9;
                    transition: width 0.3s ease;
                }
                .nav-link:hover::after {
                    width: 100%;
                }
            </style>
            <header class="bg-white shadow-sm sticky top-0 z-50">
                <div class="container mx-auto px-4">
                    <div class="flex justify-between items-center py-4">
                        <a href="/" class="flex items-center">
                            <i data-feather="code" class="text-primary-500 w-6 h-6 mr-2"></i>
                            <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">CodeCraft</span>
                        </a>
                        
                        <nav class="hidden md:flex items-center space-x-8">
                            <a href="#languages" class="nav-link text-gray-700 hover:text-primary-500">Languages</a>
                            <a href="#projects" class="nav-link text-gray-700 hover:text-primary-500">Projects</a>
                            <a href="#" class="nav-link text-gray-700 hover:text-primary-500">About</a>
                            <a href="#" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition duration-300">Contact</a>
                        </nav>
                        
                        <button class="md:hidden focus:outline-none" id="mobile-menu-button">
                            <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
                        </button>
                    </div>
                    
                    <!-- Mobile menu -->
                    <div class="md:hidden hidden py-4" id="mobile-menu">
                        <div class="flex flex-col space-y-4">
                            <a href="#languages" class="text-gray-700 hover:text-primary-500">Languages</a>
                            <a href="#projects" class="text-gray-700 hover:text-primary-500">Projects</a>
                            <a href="#" class="text-gray-700 hover:text-primary-500">About</a>
                            <a href="#" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition duration-300 text-center">Contact</a>
                        </div>
                    </div>
                </div>
            </header>
        `;
    }
}

customElements.define('header-component', HeaderComponent);