components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    background-color: white;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                }
                .nav-link:hover {
                    color: #3B82F6;
                }
            </style>
            <div class="navbar px-6 py-4 rounded-xl">
                <div class="flex justify-between items-center">
                    <div class="flex items-center space-x-8">
                        <a href="#" class="text-xl font-bold text-gray-800 flex items-center">
                            <i data-feather="message-square" class="text-primary-500 mr-2"></i>
                            WhatsApp Template Wizard
                        </a>
                        <nav class="hidden md:flex space-x-6">
                            <a href="#" class="nav-link text-gray-600 hover:text-primary-500">Templates</a>
                            <a href="#" class="nav-link text-gray-600 hover:text-primary-500">Categories</a>
                            <a href="#" class="nav-link text-gray-600 hover:text-primary-500">Analytics</a>
                        </nav>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="p-2 rounded-full hover:bg-gray-100">
                            <i data-feather="bell"></i>
                        </button>
                        <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white">
                            <i data-feather="user"></i>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}

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