| class CustomHeader extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| header { |
| background: rgba(0, 0, 0, 0.95); |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid #374151; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 50; |
| } |
| |
| nav { |
| max-width: 1280px; |
| margin: 0 auto; |
| padding: 1rem 2rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| font-size: 1.5rem; |
| font-weight: bold; |
| color: white; |
| text-decoration: none; |
| transition: color 0.3s; |
| } |
| .logo-img { |
| width: 32px; |
| height: 32px; |
| border-radius: 6px; |
| object-fit: contain; |
| } |
| .logo:hover { |
| color: #ef4444; |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 2rem; |
| align-items: center; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .nav-links a { |
| color: #9ca3af; |
| text-decoration: none; |
| font-weight: 500; |
| transition: color 0.3s; |
| position: relative; |
| } |
| |
| .nav-links a:hover { |
| color: white; |
| } |
| |
| .nav-links a.active { |
| color: #ef4444; |
| } |
| |
| .nav-links a.active::after { |
| content: ''; |
| position: absolute; |
| bottom: -4px; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: #ef4444; |
| } |
| |
| .mobile-menu-btn { |
| display: none; |
| background: none; |
| border: none; |
| color: white; |
| cursor: pointer; |
| padding: 0.5rem; |
| } |
| |
| @media (max-width: 768px) { |
| .nav-links { |
| display: none; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| background: rgba(0, 0, 0, 0.98); |
| flex-direction: column; |
| padding: 1rem 2rem; |
| border-bottom: 1px solid #374151; |
| gap: 1rem; |
| } |
| |
| .nav-links.mobile-open { |
| display: flex; |
| } |
| |
| .mobile-menu-btn { |
| display: block; |
| } |
| } |
| </style> |
| <header> |
| <nav> |
| <a href="/" class="logo"> |
| <img src="https://huggingface.co/dodey917/wear-fun/resolve/main/images/KZr0gBp.png" alt="Wear.Fun Logo" class="logo-img"> |
| <span>Wear.Fun</span> |
| <span style="color: #ef4444;">🚀</span> |
| </a> |
| <ul class="nav-links" id="navLinks"> |
| <li><a href="/" class="nav-link">Home</a></li> |
| <li><a href="/meme.html" class="nav-link">Create</a></li> |
| <li><a href="/shop.html" class="nav-link">Shop</a></li> |
| <li><a href="/about.html" class="nav-link">About</a></li> |
| </ul> |
| |
| <button class="mobile-menu-btn" id="mobileMenuBtn"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <line x1="3" y1="6" x2="21" y2="6"></line> |
| <line x1="3" y1="12" x2="21" y2="12"></line> |
| <line x1="3" y1="18" x2="21" y2="18"></line> |
| </svg> |
| </button> |
| </nav> |
| </header> |
| `; |
| |
| |
| const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn'); |
| const navLinks = this.shadowRoot.getElementById('navLinks'); |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| navLinks.classList.toggle('mobile-open'); |
| }); |
| |
| |
| const currentPath = window.location.pathname; |
| const navLinksElements = this.shadowRoot.querySelectorAll('.nav-link'); |
| |
| navLinksElements.forEach(link => { |
| const href = link.getAttribute('href'); |
| if ((currentPath === '/' && href === '/') || |
| (currentPath !== '/' && href === currentPath) || |
| (currentPath.endsWith(href) && href !== '/')) { |
| link.classList.add('active'); |
| } |
| }); |
| } |
| } |
|
|
| customElements.define('custom-header', CustomHeader); |
