| class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .navbar { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| } | |
| .nav-link { | |
| transition: all 0.3s ease; | |
| } | |
| .nav-link:hover { | |
| transform: translateY(-2px); | |
| } | |
| </style> | |
| <nav class="navbar text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="database" class="w-6 h-6"></i> | |
| <a href="/" class="text-xl font-bold">PsyConnect</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="nav-link flex items-center space-x-1"> | |
| <i data-feather="home" class="w-4 h-4"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="nav-link flex items-center space-x-1"> | |
| <i data-feather="database" class="w-4 h-4"></i> | |
| <span>Tables</span> | |
| </a> | |
| <a href="#" class="nav-link flex items-center space-x-1"> | |
| <i data-feather="terminal" class="w-4 h-4"></i> | |
| <span>Query</span> | |
| </a> | |
| <a href="#" class="nav-link flex items-center space-x-1"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition"> | |
| <i data-feather="bell" class |