Webnet/cmf-radar-scanner

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .navbar {7                    background: rgba(17, 24, 39, 0.8);8                    backdrop-filter: blur(10px);9                }10                .nav-link {11                    position: relative;12                }13                .nav-link::after {14                    content: '';15                    position: absolute;16                    bottom: -2px;17                    left: 0;18                    width: 0;19                    height: 2px;20                    background: linear-gradient(90deg, #3b82f6, #8b5cf6);21                    transition: width 0.3s ease;22                }23                .nav-link:hover::after {24                    width: 100%;25                }26                @media (max-width: 768px) {27                    .mobile-menu {28                        max-height: 0;29                        overflow: hidden;30                        transition: max-height 0.3s ease-out;31                    }32                    .mobile-menu.open {33                        max-height: 500px;34                    }35                }36            </style>37            <nav class="navbar border-b border-gray-800 py-4 px-6 fixed w-full z-50">38                <div class="container mx-auto flex justify-between items-center">39                    <a href="#" class="flex items-center space-x-2">40                        <i data-feather="radar" class="text-blue-400"></i>41                        <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">CMF Radar</span>42                    </a>43                    44                    <div class="hidden md:flex space-x-8">45                        <a href="#" class="nav-link text-gray-300 hover:text-white">Dashboard</a>46                        <a href="#" class="nav-link text-gray-300 hover:text-white">Indicators</a>47                        <a href="#" class="nav-link text-gray-300 hover:text-white">Alerts</a>48                        <a href="#" class="nav-link text-gray-300 hover:text-white">Settings</a>49                    </div>50                    51                    <div class="hidden md:flex items-center space-x-4">52                        <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full">53                            <i data-feather="bell"></i>54                        </button>55                        <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium">56                            Upgrade57                        </button>58                    </div>59                    60                    <button class="md:hidden text-gray-300 focus:outline-none menu-toggle">61                        <i data-feather="menu"></i>62                    </button>63                </div>64                65                <div class="mobile-menu md:hidden mt-2">66                    <div class="flex flex-col space-y-3 py-3">67                        <a href="#" class="text-gray-300 hover:text-white px-4 py-2">Dashboard</a>68                        <a href="#" class="text-gray-300 hover:text-white px-4 py-2">Indicators</a>69                        <a href="#" class="text-gray-300 hover:text-white px-4 py-2">Alerts</a>70                        <a href="#" class="text-gray-300 hover:text-white px-4 py-2">Settings</a>71                        <div class="pt-2 border-t border-gray-700">72                            <button class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium">73                                Upgrade74                            </button>75                        </div>76                    </div>77                </div>78            </nav>79            <script>feather.replace();</script>80        `;81 82        // Mobile menu toggle83        const menuToggle = this.shadowRoot.querySelector('.menu-toggle');84        const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');85        86        menuToggle.addEventListener('click', () => {87            mobileMenu.classList.toggle('open');88            const icon = menuToggle.querySelector('i');89            if (mobileMenu.classList.contains('open')) {90                icon.setAttribute('data-feather', 'x');91            } else {92                icon.setAttribute('data-feather', 'menu');93            }94            feather.replace();95        });96    }97}98 99customElements.define('custom-navbar', CustomNavbar);