components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    background: linear-gradient(to right, #667eea, #764ba2);
                    color: white;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                }
.nav-link {
                    transition: all 0.2s ease;
                }
                .nav-link:hover {
                    color: #3B82F6;
                }
                .active {
                    color: #111827;
                    font-weight: 500;
                }
</style>
            <nav class="navbar px-4 py-3">
<div class="container mx-auto flex justify-between items-center">
                    <div class="flex items-center space-x-8">
                        <a href="#" class="text-2xl font-bold text-white">ProjectTracker</a>
<div class="hidden md:flex space-x-6">
                            <a href="#" class="nav-link text-white hover:text-blue-100 active">Tableau</a>
                            <a href="#" class="nav-link text-white hover:text-blue-100">Statistiques</a>
                            <a href="#" class="nav-link text-white hover:text-blue-100">Rapports</a>
                            <a href="#" class="nav-link text-white hover:text-blue-100">Équipe</a>
</div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-100"></i>
                            <input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 rounded-lg border border-blue-200 bg-blue-500/10 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent">
                        </div>
                        <div class="w-10 h-10 rounded-full bg-white/20 text-white flex items-center justify-center hover:bg-white/30 transition">
                            <i data-feather="user"></i>
                        </div>
</div>
                </div>
            </nav>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);