acs-dev/codecrafted-ios-portfolio

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                nav {7                    backdrop-filter: blur(10px);8                    -webkit-backdrop-filter: blur(10px);9                }10                .nav-link {11                    position: relative;12                }13                .nav-link::after {14                    content: '';15                    position: absolute;16                    width: 0;17                    height: 2px;18                    bottom: -2px;19                    left: 0;20                    background-color: #6366f1;21                    transition: width 0.3s ease;22                }23                .nav-link:hover::after {24                    width: 100%;25                }26                .dark .nav-link::after {27                    background-color: #a5b4fc;28                }29            </style>30            <nav class="fixed w-full z-40 bg-white bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80 border-b border-gray-200 dark:border-gray-800">31                <div class="container mx-auto px-4 py-4 flex justify-between items-center">32                    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">33                        <span class="text-primary-500">iOS</span>Dev34                    </a>35                    <div class="hidden md:flex space-x-8">36                        <a href="#" class="nav-link text-gray-700 dark:text-gray-300 font-medium">Home</a>37                        <a href="#projects" class="nav-link text-gray-700 dark:text-gray-300 font-medium">Projects</a>38                        <a href="#contact" class="nav-link text-gray-700 dark:text-gray-300 font-medium">Contact</a>39                    </div>40                    <button class="md:hidden focus:outline-none">41                        <i data-feather="menu" class="text-gray-700 dark:text-gray-300 w-6 h-6"></i>42                    </button>43                </div>44            </nav>45        `;46    }47}48 49customElements.define('custom-navbar', CustomNavbar);