components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
                }
                
                .nav-link:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                }
            </style>
            <nav class="shadow-lg">
                <div class="container mx-auto px-4">
                    <div class="flex items-center justify-between h-16">
                        <div class="flex items-center">
                            <span class="text-white font-bold text-xl flex items-center">
                                <i data-feather="dollar-sign" class="mr-2"></i>
                                Software Expense Tracker
                            </span>
                        </div>
                        <div class="hidden md:block">
                            <div class="ml-10 flex items-baseline space-x-4">
                                <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white bg-white bg-opacity-10">Dashboard</a>
                                <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-white hover:bg-opacity-10">Reports</a>
                                <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-white hover:bg-opacity-10">Settings</a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        `;
    }
}

customElements.define('custom-header', CustomHeader);