components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .nav-link {
                    position: relative;
                    transition: color 0.3s ease;
                }
                .nav-link:hover {
                    color: #3b82f6;
                }
                .nav-link::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background-color: #3b82f6;
                    transition: width 0.3s ease;
                }
                .nav-link:hover::after {
                    width: 100%;
                }
            </style>
            <nav class="bg-white shadow-md">
                <div class="container mx-auto px-4 py-4">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center space-x-4">
                            <a href="index.html" class="flex items-center space-x-2">
                                <i data-feather="globe" class="text-blue-600 w-6 h-6"></i>
                                <span class="text-xl font-bold text-gray-800">American Data Explorer</span>
                            </a>
                        </div>
                        <div class="hidden md:flex items-center space-x-8">
                            <a href="index.html" class="nav-link text-gray-600 hover:text-blue-600">Home</a>
                            <a href="population.html" class="nav-link text-gray-600 hover:text-blue-600">Population</a>
                            <a href="economy.html" class="nav-link text-gray-600 hover:text-blue-600">Economy</a>
                            <a href="housing.html" class="nav-link text-gray-600 hover:text-blue-600">Housing</a>
                            <a href="about.html" class="nav-link text-gray-600 hover:text-blue-600">About</a>
                        </div>
                        <button class="md:hidden focus:outline-none">
                            <i data-feather="menu" class="w-6 h-6"></i>
                        </button>
                    </div>
                </div>
            </nav>
        `;
    }
}

customElements.define('custom-navbar', CustomNavbar);