components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .nav-link {
                    transition: all 0.2s ease;
                    padding: 0.75rem 1.5rem;
                }
                .nav-link:hover {
                    background-color: rgba(14, 165, 233, 0.15) !important;
                    color: white !important;
                }
                .nav-link.active {
                    background-color: rgba(14, 165, 233, 0.25) !important;
                    border-left-color: rgb(14, 165, 233);
                    color: white !important;
                }
                i {
                    width: 20px;
                    text-align: center;
                }
</style>
            <aside class="bg-gray-800 rounded-lg p-4 h-full">
                <nav class="space-y-1">
                    <a href="#" class="nav-link active flex items-center px-4 py-3 text-sm font-medium rounded-md border-l-4 border-primary-500">
                        <i data-feather="home" class="mr-3 text-primary-500"></i>
                        Dashboard
                    </a>
                    
                    <a href="#" class="nav-link flex items-center px-4 py-3 text-sm font-medium rounded-md border-l-4 border-transparent text-gray-300 hover:text-white">
                        <i data-feather="users" class="mr-3"></i>
                        Clients
                    </a>
                    
                    <a href="#" class="nav-link flex items-center px-4 py-3 text-sm font-medium rounded-md border-l-4 border-transparent text-gray-300 hover:text-white">
                        <i data-feather="briefcase" class="mr-3"></i>
                        Projects
                    </a>
                    
                    <a href="#" class="nav-link flex items-center px-4 py-3 text-sm font-medium rounded-md border-l-4 border-transparent text-gray-300 hover:text-white">
                        <i data-feather="calendar" class="mr-3"></i>
                        Calendar
                    </a>
                    
                    <a href="#" class="nav-link flex items-center px-4 py-3 text-sm font-medium rounded-md border-l-4 border-transparent text-gray-300 hover:text-white">
                        <i data-feather="file-text" class="mr-3"></i>
                        Invoices
                    </a>
                    
                    <a href="#" class="nav-link flex items-center px-4 py-3 text-sm font-medium rounded-md border-l-4 border-transparent text-gray-300 hover:text-white">
                        <i data-feather="bar-chart-2" class="mr-3"></i>
                        Analytics
                    </a>
                    
                    <div class="pt-4 border-t border-gray-700">
                        <a href="#" class="nav-link flex items-center px-4 py-3 text-sm font-medium rounded-md border-l-4 border-transparent text-gray-300 hover:text-white">
                            <i data-feather="settings" class="mr-3"></i>
                            Settings
                        </a>
                    </div>
                </nav>
            </aside>
        `;
    }
}

customElements.define('custom-sidebar', CustomSidebar);