ud34150/devfolio-code-your-legacy

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .navbar {7                    background-color: rgba(255, 255, 255, 0.95);8                    backdrop-filter: blur(10px);9                    transition: all 0.3s ease;10                }11                12                .nav-link {13                    position: relative;14                }15                16                .nav-link::after {17                    content: '';18                    position: absolute;19                    bottom: -2px;20                    left: 0;21                    width: 0;22                    height: 2px;23                    background-color: #3B82F6;24                    transition: width 0.3s ease;25                }26                27                .nav-link:hover::after {28                    width: 100%;29                }30                31                .mobile-menu {32                    transition: max-height 0.3s ease-out;33                }34            </style>35            <nav class="navbar fixed w-full z-50 shadow-sm py-4">36                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">37                    <div class="flex justify-between items-center">38                        <a href="#home" class="text-2xl font-bold text-gray-900">39                            Dev<span class="text-primary">Folio</span>40                        </a>41                        42                        <!-- Desktop Navigation -->43                        <div class="hidden md:flex space-x-8">44                            <a href="#home" class="nav-link text-gray-700 hover:text-primary">Home</a>45                            <a href="#skills" class="nav-link text-gray-700 hover:text-primary">Skills</a>46                            <a href="#projects" class="nav-link text-gray-700 hover:text-primary">Projects</a>47                            <a href="#tutorials" class="nav-link text-gray-700 hover:text-primary">Tutorials</a>48                            <a href="#contact" class="nav-link text-gray-700 hover:text-primary">Contact</a>49                        </div>50                        51                        <!-- Mobile menu button -->52                        <button id="mobile-menu-button" class="md:hidden text-gray-700">53                            <i data-feather="menu"></i>54                        </button>55                    </div>56                    57                    <!-- Mobile Navigation -->58                    <div id="mobile-menu" class="mobile-menu hidden md:hidden overflow-hidden max-h-0">59                        <div class="pt-4 pb-2 space-y-2">60                            <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-100">Home</a>61                            <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-100">Skills</a>62                            <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-100">Projects</a>63                            <a href="#tutorials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-100">Tutorials</a>64                            <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-100">Contact</a>65                        </div>66                    </div>67                </div>68            </nav>69        `;70        71        // Initialize mobile menu72        this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {73            const menu = this.shadowRoot.getElementById('mobile-menu');74            if (menu.classList.contains('hidden')) {75                menu.classList.remove('hidden');76                menu.style.maxHeight = '300px';77            } else {78                menu.style.maxHeight = '0';79                setTimeout(() => menu.classList.add('hidden'), 300);80            }81        });82    }83}84 85customElements.define('custom-navbar', CustomNavbar);