|
|
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); |
