Winiry/math-o-s-dark-code-cave

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .nav-link {7                    position: relative;8                }9                .nav-link::after {10                    content: '';11                    position: absolute;12                    width: 0;13                    height: 2px;14                    bottom: -2px;15                    left: 0;16                    background-color: #6D28D9;17                    transition: width 0.3s ease;18                }19                .nav-link:hover::after {20                    width: 100%;21                }22            </style>23            <nav class="bg-dark-800 border-b border-gray-800 fixed w-full z-10">24                <div class="container mx-auto px-4">25                    <div class="flex justify-between items-center h-16">26                        <a href="#" class="flex items-center gap-2">27                            <span class="text-xl font-bold text-accent-500">Mathéo</span>28                        </a>29                        <div class="hidden md:flex items-center gap-8">30                            <a href="#about" class="nav-link text-gray-300 hover:text-white transition">À propos</a>31                            <a href="#skills" class="nav-link text-gray-300 hover:text-white transition">Compétences</a>32                            <a href="#projects" class="nav-link text-gray-300 hover:text-white transition">Projets</a>33                            <a href="#contact" class="nav-link text-gray-300 hover:text-white transition">Contact</a>34                        </div>35                        <button id="mobileMenuButton" class="md:hidden text-gray-300 hover:text-white">36                            <i data-feather="menu"></i>37                        </button>38                    </div>39                </div>40                <!-- Mobile menu -->41                <div id="mobileMenu" class="md:hidden hidden bg-dark-800 border-t border-gray-800">42                    <div class="container mx-auto px-4 py-4 flex flex-col gap-4">43                        <a href="#about" class="text-gray-300 hover:text-white transition">À propos</a>44                        <a href="#skills" class="text-gray-300 hover:text-white transition">Compétences</a>45                        <a href="#projects" class="text-gray-300 hover:text-white transition">Projets</a>46                        <a href="#contact" class="text-gray-300 hover:text-white transition">Contact</a>47                    </div>48                </div>49            </nav>50        `;51 52        // Mobile menu toggle53        const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');54        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');55 56        mobileMenuButton.addEventListener('click', () => {57            const isHidden = mobileMenu.classList.contains('hidden');58            if (isHidden) {59                mobileMenu.classList.remove('hidden');60                feather.replace();61            } else {62                mobileMenu.classList.add('hidden');63            }64        });65    }66}67 68customElements.define('custom-navbar', CustomNavbar);