Tyit/gpt4all-libre-explorer

1class CustomHeader extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .nav-link {7                    position: relative;8                }9                .nav-link::after {10                    content: '';11                    position: absolute;12                    width: 0;13                    height: 2px;14                    bottom: 0;15                    left: 0;16                    background-color: #4F46E5;17                    transition: width 0.3s ease;18                }19                .nav-link:hover::after {20                    width: 100%;21                }22                .mobile-menu {23                    transition: all 0.3s ease;24                    max-height: 0;25                    overflow: hidden;26                }27                .mobile-menu.open {28                    max-height: 500px;29                }30            </style>31            <header class="bg-white shadow-sm sticky top-0 z-50">32                <div class="container mx-auto px-4 py-4">33                    <div class="flex justify-between items-center">34                        <a href="/" class="flex items-center space-x-2">35                            <i data-feather="cpu" class="text-primary-500 w-6 h-6"></i>36                            <span class="text-xl font-bold text-gray-800">GPT4All</span>37                        </a>38                        39                        <nav class="hidden md:flex space-x-8">40                            <a href="#features" class="nav-link text-gray-600 hover:text-gray-900">Features</a>41                            <a href="#download" class="nav-link text-gray-600 hover:text-gray-900">Download</a>42                            <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Documentation</a>43                            <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Community</a>44                        </nav>45                        46                        <button class="md:hidden focus:outline-none" id="mobile-menu-button">47                            <i data-feather="menu" class="w-6 h-6 text-gray-600"></i>48                        </button>49                    </div>50                    51                    <div class="mobile-menu mt-2 md:hidden" id="mobile-menu">52                        <div class="flex flex-col space-y-2 py-2">53                            <a href="#features" class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded">Features</a>54                            <a href="#download" class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded">Download</a>55                            <a href="#" class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded">Documentation</a>56                            <a href="#" class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded">Community</a>57                        </div>58                    </div>59                </div>60            </header>61        `;62 63        // Initialize mobile menu toggle64        const menuButton = this.shadowRoot.getElementById('mobile-menu-button');65        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');66 67        menuButton.addEventListener('click', () => {68            mobileMenu.classList.toggle('open');69            const icon = menuButton.querySelector('i');70            if (mobileMenu.classList.contains('open')) {71                feather.replace();72                icon.setAttribute('data-feather', 'x');73            } else {74                feather.replace();75                icon.setAttribute('data-feather', 'menu');76            }77            feather.replace();78        });79    }80}81 82customElements.define('custom-header', CustomHeader);