components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background-color: rgba(17, 24, 39, 0.9);
                    backdrop-filter: blur(8px);
                    border-bottom: 1px solid #ef4444;
                }
                .nav-container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 1rem;
                }
                .nav-link:hover {
                    color: #ef4444;
                }
                .mobile-menu {
                    transition: all 0.3s ease;
                }
            </style>
            <nav class="py-4 sticky top-0 z-50">
                <div class="nav-container flex justify-between items-center">
                    <div class="flex items-center">
                        <a href="/" class="flex items-center">
                            <i data-feather="activity" class="text-red-500 mr-2"></i>
                            <span class="text-xl font-bold">Mr.V</span>
                        </a>
                    </div>
                    <div class="hidden md:flex space-x-6">
                        <a href="/" class="nav-link flex items-center">
                            <i data-feather="home" class="mr-1"></i>
                            <span>Home</span>
                        </a>
                        <a href="/chatbot.html" class="nav-link flex items-center">
                            <i data-feather="terminal" class="mr-1"></i>
                            <span>CyberForge</span>
                        </a>
                        <a href="/video.html" class="nav-link flex items-center">
                            <i data-feather="film" class="mr-1"></i>
                            <span>Video Gen</span>
                        </a>
                        <a href="/deepfake.html" class="nav-link flex items-center">
                            <i data-feather="user" class="mr-1"></i>
                            <span>Deepfake</span>
                        </a>
                    </div>
<div class="flex items-center space-x-4">
                        <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-700">
                            <i data-feather="moon"></i>
                        </button>
                        <button id="mobileMenuButton" class="md:hidden p-2 rounded-full hover:bg-gray-700">
                            <i data-feather="menu"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Mobile menu -->
                <div id="mobileMenu" class="mobile-menu hidden md:hidden bg-gray-800 px-4 py-2">
                    <div class="flex flex-col space-y-3">
                        <a href="/" class="nav-link flex items-center">
                            <i data-feather="home" class="mr-2"></i>
                            <span>Home</span>
                        </a>
                        <a href="/chatbot.html" class="nav-link flex items-center">
                            <i data-feather="terminal" class="mr-2"></i>
                            <span>CyberForge</span>
                        </a>
                        <a href="/video.html" class="nav-link flex items-center">
                            <i data-feather="film" class="mr-2"></i>
                            <span>Video Generator</span>
                        </a>
                        <a href="/deepfake.html" class="nav-link flex items-center">
                            <i data-feather="user" class="mr-2"></i>
                            <span>Deepfake Studio</span>
                        </a>
</div>
                </div>
            </nav>
        `;

        // Initialize mobile menu toggle
        const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Initialize theme toggle
        const themeToggle = this.shadowRoot.getElementById('themeToggle');
        themeToggle.addEventListener('click', () => {
            const html = document.documentElement;
            if (html.classList.contains('dark')) {
                html.classList.remove('dark');
                localStorage.setItem('theme', 'light');
                themeToggle.innerHTML = '<i data-feather="sun"></i>';
            } else {
                html.classList.add('dark');
                localStorage.setItem('theme', 'dark');
                themeToggle.innerHTML = '<i data-feather="moon"></i>';
            }
            feather.replace();
        });

        // Replace feather icons
        feather.replace();
    }
}

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