| class CustomNavbar extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| width: 100%; |
| position: sticky; |
| top: 0; |
| z-index: 50; |
| background-color: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(8px); |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
| } |
| |
| nav { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 1rem 2rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .logo { |
| font-size: 1.25rem; |
| font-weight: 700; |
| color: #0ea5e9; |
| text-decoration: none; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 1.5rem; |
| } |
| |
| .nav-link { |
| color: #334155; |
| text-decoration: none; |
| font-weight: 500; |
| transition: color 0.2s; |
| position: relative; |
| } |
| |
| .nav-link:hover { |
| color: #0ea5e9; |
| } |
| |
| .nav-link:after { |
| content: ''; |
| position: absolute; |
| bottom: -2px; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background-color: #0ea5e9; |
| transition: width 0.2s; |
| } |
| |
| .nav-link:hover:after { |
| width: 100%; |
| } |
| |
| .mobile-menu-btn { |
| display: none; |
| background: none; |
| border: none; |
| cursor: pointer; |
| } |
| |
| @media (max-width: 768px) { |
| .mobile-menu-btn { |
| display: block; |
| } |
| |
| .nav-links { |
| display: none; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| background-color: white; |
| flex-direction: column; |
| padding: 1rem; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .nav-links.active { |
| display: flex; |
| } |
| } |
| </style> |
| |
| <nav> |
| <a href="/" class="logo"> |
| <span>CodeCanvas</span> |
| </a> |
| |
| <button class="mobile-menu-btn"> |
| <i data-feather="menu"></i> |
| </button> |
| |
| <div class="nav-links"> |
| <a href="#projects" class="nav-link">Projects</a> |
| <a href="#writing" class="nav-link">Writing</a> |
| <a href="#contact" class="nav-link">Contact</a> |
| </div> |
| </nav> |
| `; |
| |
| |
| const featherScript = document.createElement('script'); |
| featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js'; |
| this.shadowRoot.appendChild(featherScript); |
| |
| featherScript.onload = () => { |
| if (window.feather) { |
| window.feather.replace(); |
| } |
| |
| |
| const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn'); |
| const navLinks = this.shadowRoot.querySelector('.nav-links'); |
| |
| if (mobileMenuBtn && navLinks) { |
| mobileMenuBtn.addEventListener('click', () => { |
| navLinks.classList.toggle('active'); |
| const icon = mobileMenuBtn.querySelector('i'); |
| if (navLinks.classList.contains('active')) { |
| icon.setAttribute('data-feather', 'x'); |
| } else { |
| icon.setAttribute('data-feather', 'menu'); |
| } |
| window.feather.replace(); |
| }); |
| } |
| }; |
| } |
| } |
|
|
| customElements.define('custom-navbar', CustomNavbar); |
