Seraph-Array/Seraphim

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .navbar {7                    transition: all 0.3s ease;8                }9                .nav-link:hover {10                    color: #4F46E5;11                }12                .mobile-menu {13                    max-height: 0;14                    overflow: hidden;15                    transition: max-height 0.3s ease-out;16                }17                .mobile-menu.open {18                    max-height: 500px;19                }20            </style>21            <nav class="navbar bg-white shadow-sm">22                <div class="container mx-auto px-4">23                    <div class="flex justify-between items-center py-4">24                        <a href="index.html" class="flex items-center space-x-2">25                            <i data-feather="edit-3" class="text-primary-500 w-6 h-6"></i>26                            <span class="text-xl font-semibold text-gray-800">Blank Canvas</span>27                        </a>28                        29                        <div class="hidden md:flex items-center space-x-8">30                            <a href="index.html" class="nav-link text-gray-600 hover:text-primary-500 transition duration-200">Home</a>31                            <a href="#" class="nav-link text-gray-600 hover:text-primary-500 transition duration-200">About</a>32                            <a href="#" class="nav-link text-gray-600 hover:text-primary-500 transition duration-200">Contact</a>33                        </div>34                        35                        <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">36                            <i data-feather="menu" class="w-6 h-6"></i>37                        </button>38                    </div>39                    40                    <div id="mobile-menu" class="mobile-menu md:hidden">41                        <div class="pb-4 space-y-2">42                            <a href="index.html" class="block px-4 py-2 text-gray-600 hover:text-primary-500">Home</a>43                            <a href="#" class="block px-4 py-2 text-gray-600 hover:text-primary-500">About</a>44                            <a href="#" class="block px-4 py-2 text-gray-600 hover:text-primary-500">Contact</a>45                        </div>46                    </div>47                </div>48            </nav>49        `;50 51        const menuButton = this.shadowRoot.getElementById('mobile-menu-button');52        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');53 54        menuButton.addEventListener('click', () => {55            mobileMenu.classList.toggle('open');56            const icon = menuButton.querySelector('i');57            if (mobileMenu.classList.contains('open')) {58                icon.setAttribute('data-feather', 'x');59            } else {60                icon.setAttribute('data-feather', 'menu');61            }62            feather.replace();63        });64    }65}66 67customElements.define('custom-navbar', CustomNavbar);