File size: 3,289 Bytes
99fe73b | 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 | class CustomAdminNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
nav {
transition: background-color 0.3s ease;
}
.user-dropdown {
display: none;
}
.user-dropdown.show {
display: block;
}
</style>
<nav class="fixed w-full z-40 bg-white shadow-md">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center">
<button id="sidebar-toggle" class="mr-4 text-gray-700 focus:outline-none md:hidden">
<i data-feather="menu"></i>
</button>
<a href="/" class="text-xl font-bold text-gray-800">
Pixel<span class="text-primary">Pulse</span> Admin
</a>
</div>
<div class="flex items-center">
<div class="relative">
<button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none">
<img src="http://static.photos/people/200x200/10" class="w-8 h-8 rounded-full object-cover" alt="User">
<span class="hidden md:inline text-gray-700">Admin</span>
<i data-feather="chevron-down" class="text-gray-500"></i>
</button>
<div id="user-dropdown" class="user-dropdown absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Profile</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Settings</a>
<a href="/" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Back to Main Site</a>
<a href="#" class="block px-4 py-2 text-red-500 hover:bg-gray-100">Logout</a>
</div>
</div>
</div>
</div>
</div>
</nav>
`;
// User dropdown toggle
const userMenuButton = this.shadowRoot.getElementById('user-menu-button');
const userDropdown = this.shadowRoot.getElementById('user-dropdown');
userMenuButton.addEventListener('click', () => {
userDropdown.classList.toggle('show');
feather.replace();
});
// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
if (!e.composedPath().includes(this.shadowRoot.getElementById('user-menu-button'))) {
userDropdown.classList.remove('show');
}
});
}
}
customElements.define('custom-admin-navbar', CustomAdminNavbar); |