components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    transition: all 0.3s ease;
                }
                .navbar.scrolled {
                    @apply shadow-md;
                    background-color: rgba(255, 255, 255, 0.95);
                    backdrop-filter: blur(10px);
                }
            </style>
            <nav class="navbar fixed w-full z-10 bg-white border-b border-gray-200">
                <div class="container mx-auto px-4">
                    <div class="flex justify-between items-center h-16">
                        <div class="flex items-center">
                            <a href="/" class="flex items-center">
                                <span class="text-xl font-bold text-purple-700 mr-1">Search</span>
                                <span class="text-xl font-bold text-gray-900">Stellar</span>
                            </a>
                        </div>
                        <div class="hidden md:flex items-center space-x-6">
                            <a href="/" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Accueil</a>
                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">À propos</a>
                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Bases de données</a>
                            <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Aide</a>
                            <a href="/no-results.html" class="text-gray-700 hover:text-purple-600 transition-colors font-medium">Aucun résultat</a>
</div>
                        <div class="flex items-center space-x-4">
                            <button class="p-2 text-gray-600 hover:text-purple-600 transition-colors">
                                <i data-feather="user"></i>
                            </button>
                            <button class="md:hidden p-2 text-gray-600 hover:text-purple-600 transition-colors">
                                <i data-feather="menu"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </nav>
            <script>
                // Navbar scroll effect
                document.addEventListener('DOMContentLoaded', function() {
                    const navbar = document.querySelector('custom-navbar').shadowRoot.querySelector('.navbar');
                    
                    window.addEventListener('scroll', function() {
                        if (window.scrollY > 10) {
                            navbar.classList.add('scrolled');
                        } else {
                            navbar.classList.remove('scrolled');
                        }
                    });
                });
            </script>
        `;
    }
}

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