| 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> |
| `; |
|
|
| |
| const userMenuButton = this.shadowRoot.getElementById('user-menu-button'); |
| const userDropdown = this.shadowRoot.getElementById('user-dropdown'); |
| |
| userMenuButton.addEventListener('click', () => { |
| userDropdown.classList.toggle('show'); |
| feather.replace(); |
| }); |
|
|
| |
| document.addEventListener('click', (e) => { |
| if (!e.composedPath().includes(this.shadowRoot.getElementById('user-menu-button'))) { |
| userDropdown.classList.remove('show'); |
| } |
| }); |
| } |
| } |
|
|
| customElements.define('custom-admin-navbar', CustomAdminNavbar); |
