TotalWarModder/beloozero-banner-forge

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                nav {7                    background-color: rgba(255, 255, 255, 0.95);8                    backdrop-filter: blur(8px);9                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);10                }11                12                .nav-link:hover {13                    color: #4f46e5;14                }15                16                .nav-link::after {17                    content: '';18                    display: block;19                    width: 0;20                    height: 2px;21                    background: #4f46e5;22                    transition: width 0.3s;23                }24                25                .nav-link:hover::after {26                    width: 100%;27                }28            </style>29            <nav class="sticky top-0 z-50 w-full py-4 px-6">30                <div class="max-w-6xl mx-auto flex justify-between items-center">31                    <a href="/" class="flex items-center space-x-2">32                        <i data-feather="flag" class="text-indigo-600"></i>33                        <span class="text-xl font-bold text-gray-800">Beloozero Banners</span>34                    </a>35                    36                    <div class="hidden md:flex space-x-8">37                        <a href="/" class="nav-link text-gray-600 font-medium">Home</a>38                        <a href="/ai-assistant.html" class="nav-link text-gray-600 font-medium">AI Assistant</a>39                        <a href="#" class="nav-link text-gray-600 font-medium">About</a>40                    </div>41<button class="md:hidden">42                        <i data-feather="menu" class="text-gray-600"></i>43                    </button>44                </div>45            </nav>46        `;47    }48}49 50customElements.define('custom-navbar', CustomNavbar);