components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                }
            </style>
            <div class="navbar bg-white/80 dark:bg-gray-800/80 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="solana-gradient w-8 h-8 rounded-full flex items-center justify-center">
                            <i data-feather="zap" class="text-white w-4 h-4"></i>
                        </div>
                        <h1 class="ml-2 font-bold text-lg">SolSync</h1>
                    </div>
                    <div class="flex items-center space-x-3">
                        <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
                            <i data-feather="search" class="w-4 h-4"></i>
                        </button>
                        <button id="themeToggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
                            <i data-feather="moon" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
        
        // Add event listener for theme toggle
        this.shadowRoot.getElementById('themeToggle').addEventListener('click', () => {
            const html = document.documentElement;
            if (html.classList.contains('dark')) {
                html.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            } else {
                html.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            }
            feather.replace();
        });
    }
}
customElements.define('custom-navbar', CustomNavbar);