|
|
|
|
|
class CustomNavbar extends HTMLElement { |
|
|
connectedCallback() { |
|
|
this.attachShadow({ mode: 'open' }); |
|
|
this.shadowRoot.innerHTML = ` |
|
|
<style> |
|
|
:host { |
|
|
display: block; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
z-index: 1000; |
|
|
background: linear-gradient(90deg, #0a0a0f, #101020, #0a0a0f); |
|
|
background-opacity: 0.9; |
|
|
backdrop-filter: blur(10px); |
|
|
border-bottom: 1px solid rgba(124, 58, 237, 0.3); |
|
|
width: 100%; |
|
|
} |
|
|
.container { |
|
|
max-width: 1280px; |
|
|
margin: 0 auto; |
|
|
padding: 0.75rem 1.5rem; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
font-weight: 700; |
|
|
font-size: 1.5rem; |
|
|
color: white; |
|
|
transition: color 0.3s ease; |
|
|
text-decoration: none; |
|
|
} |
|
|
.logo:hover { |
|
|
color: #7e22ce; |
|
|
} |
|
|
|
|
|
.logo-emoji { |
|
|
color: #7e22ce; |
|
|
} |
|
|
.nav-links { |
|
|
display: none; |
|
|
gap: 2rem; |
|
|
color: rgb(209, 213, 219); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.nav-links a { |
|
|
text-decoration: none; |
|
|
} |
|
|
.nav-links a { |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-links a:hover { |
|
|
color: #7e22ce; |
|
|
} |
|
|
.cta-button { |
|
|
display: none; |
|
|
background: rgba(124, 58, 237, 0.8); |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
padding: 0.5rem 1.25rem; |
|
|
border-radius: 9999px; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
text-decoration: none; |
|
|
} |
|
|
.cta-button:hover { |
|
|
background: #7e22ce; |
|
|
} |
|
|
|
|
|
.menu-toggle { |
|
|
display: block; |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
background: none; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
.mobile-menu { |
|
|
display: none; |
|
|
flex-direction: column; |
|
|
background: #0a0a0f; |
|
|
border-top: 1px solid rgba(124, 58, 237, 0.2); |
|
|
padding: 0.75rem 1.5rem; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.mobile-menu a { |
|
|
text-decoration: none; |
|
|
} |
|
|
.mobile-menu a { |
|
|
color: rgb(209, 213, 219); |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
|
|
|
.mobile-menu a:hover { |
|
|
color: #7e22ce; |
|
|
} |
|
|
|
|
|
@media (min-width: 768px) { |
|
|
.nav-links, .cta-button { |
|
|
display: flex; |
|
|
} |
|
|
.menu-toggle { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
|
|
|
<nav> |
|
|
<div class="container"> |
|
|
<a href="#" class="logo"> |
|
|
<span class="logo-emoji">⚡</span> |
|
|
<span>PixelPulse</span> |
|
|
</a> |
|
|
|
|
|
<div class="nav-links"> |
|
|
<a href="#home">Home</a> |
|
|
<a href="#about">About</a> |
|
|
<a href="#services">Services</a> |
|
|
<a href="#portfolio">Portfolio</a> |
|
|
<a href="#ai">AI</a> |
|
|
<a href="#contact">Contact</a> |
|
|
</div> |
|
|
|
|
|
<a href="#contact" class="cta-button">Let's Talk</a> |
|
|
|
|
|
<button class="menu-toggle" id="mobile-menu-button"> |
|
|
☰ |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mobile-menu" id="mobile-menu"> |
|
|
<a href="#home">Home</a> |
|
|
<a href="#about">About</a> |
|
|
<a href="#services">Services</a> |
|
|
<a href="#portfolio">Portfolio</a> |
|
|
<a href="#ai">AI</a> |
|
|
<a href="#contact">Contact</a> |
|
|
</div> |
|
|
</nav> |
|
|
`; |
|
|
|
|
|
const menuButton = this.shadowRoot.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = this.shadowRoot.getElementById('mobile-menu'); |
|
|
|
|
|
menuButton.addEventListener('click', () => { |
|
|
const isOpen = mobileMenu.style.display === 'flex'; |
|
|
mobileMenu.style.display = isOpen ? 'none' : 'flex'; |
|
|
menuButton.textContent = isOpen ? '☰' : '✕'; |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
customElements.define('custom-navbar', CustomNavbar); |
