components/navbar.js

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;
                }
                
                nav {
                    background-color: white;
                    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
                }
                
                .nav-link {
                    transition: all 0.2s ease;
                }
                
                .nav-link:hover {
                    color: rgb(14 165 233);
                }
                
                .mobile-menu {
                    transition: all 0.3s ease;
                }
            </style>
            
            <nav class="border-b border-gray-200">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="flex justify-between h-16">
                        <div class="flex">
                            <div class="flex-shrink-0 flex items-center">
                                <div class="flex items-center">
                                    <i data-feather="activity" class="text-primary-500 h-8 w-8"></i>
                                    <span class="ml-2 text-xl font-bold text-primary-800">DiagnoScan Pro</span>
                                </div>
                            </div>
                            <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                                <a href="/" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Exams</a>
                                <a href="patients.html" class="border-primary-500 text-primary-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Patients</a>
                                <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Reports</a>
                                <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Settings</a>
</div>
                        </div>
                        <div class="hidden sm:ml-6 sm:flex sm:items-center">
                            <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                <span class="sr-only">View notifications</span>
                                <i data-feather="bell" class="h-6 w-6"></i>
                            </button>
                            
                            <div class="ml-3 relative">
                                <div>
                                    <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                                        <span class="sr-only">Open user menu</span>
                                        <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="">
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="-mr-2 flex items-center sm:hidden">
                            <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500" aria-controls="mobile-menu" aria-expanded="false">
                                <span class="sr-only">Open main menu</span>
                                <i data-feather="menu" class="block h-6 w-6"></i>
                                <i data-feather="x" class="hidden h-6 w-6"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="hidden mobile-menu sm:hidden" id="mobile-menu">
                    <div class="pt-2 pb-3 space-y-1">
                        <a href="/" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Exams</a>
                        <a href="patients.html" class="bg-primary-50 border-primary-500 text-primary-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Patients</a>
                        <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Reports</a>
                        <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Settings</a>
</div>
                    <div class="pt-4 pb-3 border-t border-gray-200">
                        <div class="flex items-center px-4">
                            <div class="flex-shrink-0">
                                <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">
                            </div>
                            <div class="ml-3">
                                <div class="text-base font-medium text-gray-800">Dr. John Smith</div>
                                <div class="text-sm font-medium text-gray-500">john.smith@example.com</div>
                            </div>
                            <button class="ml-auto bg-white flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                <span class="sr-only">View notifications</span>
                                <i data-feather="bell" class="h-6 w-6"></i>
                            </button>
                        </div>
                        <div class="mt-3 space-y-1">
                            <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Your Profile</a>
                            <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Settings</a>
                            <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign out</a>
                        </div>
                    </div>
                </div>
            </nav>
        `;
        
        // Add mobile menu toggle functionality
        const mobileMenuButton = this.shadowRoot.querySelector('button[aria-controls="mobile-menu"]');
        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
        
        if (mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', () => {
                const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
                mobileMenuButton.setAttribute('aria-expanded', !expanded);
                mobileMenu.classList.toggle('hidden');
                
                // Toggle menu and close icons
                this.shadowRoot.querySelector('i[data-feather="menu"]').classList.toggle('hidden');
                this.shadowRoot.querySelector('i[data-feather="x"]').classList.toggle('hidden');
            });
        }
    }
}

customElements.define('custom-navbar', CustomNavbar);