| class CustomHeader 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: #0D9488; |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .mobile-menu { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease-out; |
| } |
| |
| .mobile-menu.open { |
| max-height: 500px; |
| } |
| </style> |
| <header class="bg-white shadow-sm fixed w-full z-50"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <a href="/" class="flex items-center"> |
| <span class="text-2xl font-bold text-primary-600">Management Evolution</span> |
| </a> |
| |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="/" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Home</a> |
| <a href="#services" class="nav-link text-gray-700 hover:text-primary-600 font-medium">Services</a> |
| <a href="/about.html" class="nav-link text-gray-700 hover:text-primary-600 font-medium">About</a> |
| <a href="#contact" class="bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300">Contact</a> |
| </div> |
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| |
| <div id="mobile-menu" class="mobile-menu md:hidden"> |
| <div class="pt-4 pb-2 space-y-2"> |
| <a href="/" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Home</a> |
| <a href="#services" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Services</a> |
| <a href="/about.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">About</a> |
| <a href="#contact" class="block px-4 py-2 bg-primary-600 text-white rounded-lg text-center mt-2">Contact</a> |
| </div> |
| </div> |
| </div> |
| </header> |
| `; |
|
|
| |
| const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button'); |
| const mobileMenu = this.shadowRoot.getElementById('mobile-menu'); |
|
|
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('open'); |
| const icon = mobileMenuButton.querySelector('i'); |
| if (mobileMenu.classList.contains('open')) { |
| feather.replace(); |
| icon.setAttribute('data-feather', 'x'); |
| } else { |
| feather.replace(); |
| icon.setAttribute('data-feather', 'menu'); |
| } |
| feather.replace(); |
| }); |
| } |
| } |
|
|
| customElements.define('custom-header', CustomHeader); |
