Jakvai/postgresql-pixie-dust

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        .nav-link:hover {7          color: #3B82F6;8        }9        .dark .nav-link:hover {10          color: #60A5FA;11        }12      </style>13      <nav class="bg-white dark:bg-gray-800 shadow-sm">14        <div class="container mx-auto px-4">15          <div class="flex justify-between items-center h-16">16            <div class="flex items-center">17              <a href="/" class="flex items-center">18                <i data-feather="database" class="w-6 h-6 text-primary-500 mr-2"></i>19                <span class="text-xl font-bold text-gray-800 dark:text-white">QueryViz</span>20              </a>21            </div>22            23            <div class="hidden md:flex items-center space-x-8">24              <a href="/" class="nav-link text-gray-700 dark:text-gray-300 font-medium">Home</a>25              <a href="/history" class="nav-link text-gray-700 dark:text-gray-300 font-medium">History</a>26              <a href="/docs" class="nav-link text-gray-700 dark:text-gray-300 font-medium">Documentation</a>27              28              <button id="theme-toggle" class="p-2 rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition">29                <i data-feather="moon" class="hidden dark:block w-5 h-5"></i>30                <i data-feather="sun" class="dark:hidden w-5 h-5"></i>31              </button>32              33              <div class="relative">34                <button id="user-menu" class="flex items-center space-x-2 focus:outline-none">35                  <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white font-medium">U</div>36                  <i data-feather="chevron-down" class="w-4 h-4 text-gray-500 dark:text-gray-400"></i>37                </button>38              </div>39            </div>40            41            <div class="md:hidden flex items-center">42              <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none">43                <i data-feather="menu" class="w-6 h-6"></i>44              </button>45            </div>46          </div>47        </div>48        49        <!-- Mobile menu -->50        <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 pb-3 px-4">51          <a href="/" class="block py-2 text-gray-700 dark:text-gray-300 font-medium">Home</a>52          <a href="/history" class="block py-2 text-gray-700 dark:text-gray-300 font-medium">History</a>53          <a href="/docs" class="block py-2 text-gray-700 dark:text-gray-300 font-medium">Documentation</a>54        </div>55      </nav>56    `;57    58    // Add event listeners after rendering59    setTimeout(() => {60      const themeToggle = this.shadowRoot.getElementById('theme-toggle');61      const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');62      const mobileMenu = this.shadowRoot.getElementById('mobile-menu');63      64      themeToggle.addEventListener('click', () => {65        const html = document.documentElement;66        html.classList.toggle('dark');67        localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');68        feather.replace();69      });70      71      mobileMenuButton.addEventListener('click', () => {72        mobileMenu.classList.toggle('hidden');73        feather.replace();74      });75      76      feather.replace();77    });78  }79}80 81customElements.define('custom-navbar', CustomNavbar);