File size: 3,019 Bytes
a98921a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.navbar {
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.nav-link {
transition: color 0.2s ease;
}
.nav-link:hover {
color: #3b82f6;
}
.logo {
font-weight: 700;
letter-spacing: -0.025em;
}
</style>
<nav class="navbar px-4 py-4 md:px-6">
<div class="container mx-auto flex justify-between items-center">
<a href="index.html" class="logo text-xl text-gray-800 flex items-center">
<i data-feather="box" class="mr-2 text-blue-500"></i>
Structa Clone
</a>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="nav-link text-gray-600 hover:text-blue-500">Home</a>
<a href="#" class="nav-link text-gray-600 hover:text-blue-500">About</a>
<a href="#" class="nav-link text-gray-600 hover:text-blue-500">Documentation</a>
<a href="#" class="nav-link text-gray-600 hover:text-blue-500">Contact</a>
</div>
<button id="mobile-menu-button" class="md:hidden text-gray-600">
<i data-feather="menu"></i>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden px-4 py-2">
<a href="index.html" class="block py-2 text-gray-600 hover:text-blue-500">Home</a>
<a href="#" class="block py-2 text-gray-600 hover:text-blue-500">About</a>
<a href="#" class="block py-2 text-gray-600 hover:text-blue-500">Documentation</a>
<a href="#" class="block py-2 text-gray-600 hover:text-blue-500">Contact</a>
</div>
</nav>
`;
// Add mobile menu toggle functionality
const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
menuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
const icon = menuButton.querySelector('i');
if (mobileMenu.classList.contains('hidden')) {
icon.setAttribute('data-feather', 'menu');
} else {
icon.setAttribute('data-feather', 'x');
}
feather.replace();
});
}
}
customElements.define('custom-navbar', CustomNavbar); |