dilon656/problemsolver-hub

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                nav {7                    background-color: #111827;8                    border-bottom: 1px solid #374151;9                }10                11                .nav-link {12                    transition: color 0.2s ease;13                }14                15                .nav-link:hover {16                    color: #3B82F6 !important;17                }18                19                .active {20                    color: #3B82F6 !important;21                }22                23                @media (max-width: 768px) {24                    .mobile-menu {25                        display: none;26                    }27                    28                    .mobile-menu.active {29                        display: block;30                    }31                }32            </style>33            <nav class="py-4 px-6">34                <div class="container mx-auto flex justify-between items-center">35                    <a href="/" class="flex items-center">36                        <i data-feather="compass" class="text-blue-500"></i>37                        <span class="ml-2 text-xl font-bold">ProblemSolver</span>38                    </a>39                    40                    <div class="hidden md:flex space-x-8">41                        <a href="/" class="nav-link text-white active">Home</a>42                        <a href="/browse" class="nav-link text-gray-300">Browse</a>43                        <a href="/post-problem" class="nav-link text-gray-300">Post Problem</a>44                        <a href="/about" class="nav-link text-gray-300">About</a>45                    </div>46                    47                    <div class="flex items-center space-x-4">48                        <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700">49                            <i data-feather="moon"></i>50                        </button>51                        52                        <a href="/login" class="text-gray-300 hover:text-white">Login</a>53                        <a href="/signup" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full">Sign Up</a>54                        55                        <button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-gray-700">56                            <i data-feather="menu"></i>57                        </button>58                    </div>59                </div>60                61                <!-- Mobile menu -->62                <div id="mobile-menu" class="mobile-menu md:hidden mt-4 pb-4 px-6 hidden">63                    <a href="/" class="block py-2 text-white">Home</a>64                    <a href="/browse" class="block py-2 text-gray-300">Browse</a>65                    <a href="/post-problem" class="block py-2 text-gray-300">Post Problem</a>66                    <a href="/about" class="block py-2 text-gray-300">About</a>67                </div>68            </nav>69        `;70        71        // Initialize mobile menu toggle72        const menuButton = this.shadowRoot.getElementById('mobile-menu-button');73        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');74        75        menuButton.addEventListener('click', () => {76            mobileMenu.classList.toggle('active');77        });78    }79}80 81customElements.define('custom-navbar', CustomNavbar);