components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                }
                .notification-dot {
                    top: -0.25rem;
                    right: -0.25rem;
                }
            </style>
            <nav class="navbar bg-gray-800/80 border-b border-gray-700 fixed w-full z-10">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="flex items-center justify-between h-16">
                        <!-- Left side -->
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <a href="/" class="flex items-center">
                                    <i data-feather="activity" class="text-primary-500 w-6 h-6"></i>
                                    <span class="ml-2 text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">PixelPulse Pro</span>
                                </a>
</div>
                        </div>
                        
                        <!-- Right side -->
                        <div class="flex items-center space-x-4">
                            <button class="p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-700 focus:outline-none">
                                <i data-feather="search" class="w-5 h-5"></i>
                            </button>
                            
                            <button class="p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-700 focus:outline-none relative">
                                <i data-feather="bell" class="w-5 h-5"></i>
                                <span class="notification-dot absolute h-2 w-2 rounded-full bg-secondary-500"></span>
                            </button>
                            
                            <button onclick="toggleTheme()" class="p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-700 focus:outline-none">
                                <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
                                <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
                            </button>
                            
                            <!-- Profile dropdown -->
                            <div class="relative ml-3">
                                <div class="flex items-center space-x-2">
                                    <div class="flex-shrink-0">
                                        <div class="h-8 w-8 rounded-full bg-gray-600 flex items-center justify-center">
                                            <i data-feather="user" class="text-gray-300"></i>
                                        </div>
                                    </div>
                                    <div class="hidden md:block">
                                        <div class="text-sm font-medium">Freelancer</div>
                                        <div class="text-xs text-gray-400">Admin</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        `;
    }
}

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