components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    width: 250px;
                    background-color: #111827;
                    border-right: 1px solid #1f2937;
                }
                
                .nav-item {
                    transition: all 0.2s;
                }
                
                .nav-item:hover {
                    background-color: #1f2937;
                }
                
                .nav-item.active {
                    background-color: #1f2937;
                    border-left: 3px solid #6366f1;
                }
                
                @media (max-width: 1024px) {
                    .sidebar {
                        width: 70px;
                    }
                    
                    .nav-text {
                        display: none;
                    }
                }
            </style>
            <aside class="sidebar h-screen sticky top-0 pt-6 hidden lg:block">
                <div class="space-y-1 px-4">
                    <a href="/dashboard" class="nav-item flex items-center space-x-3 py-3 px-4 rounded-md text-gray-300 hover:text-white">
                        <i data-feather="home"></i>
                        <span class="nav-text">Dashboard</span>
                    </a>
                    <a href="/signals" class="nav-item active flex items-center space-x-3 py-3 px-4 rounded-md text-white">
                        <i data-feather="activity"></i>
                        <span class="nav-text">Signals</span>
                    </a>
                    <a href="/markets" class="nav-item flex items-center space-x-3 py-3 px-4 rounded-md text-gray-300 hover:text-white">
                        <i data-feather="trending-up"></i>
                        <span class="nav-text">Markets</span>
                    </a>
                    <a href="/portfolio" class="nav-item flex items-center space-x-3 py-3 px-4 rounded-md text-gray-300 hover:text-white">
                        <i data-feather="dollar-sign"></i>
                        <span class="nav-text">Portfolio</span>
                    </a>
                    <a href="/backtest" class="nav-item flex items-center space-x-3 py-3 px-4 rounded-md text-gray-300 hover:text-white">
                        <i data-feather="repeat"></i>
                        <span class="nav-text">Backtest</span>
                    </a>
                    <a href="/settings" class="nav-item flex items-center space-x-3 py-3 px-4 rounded-md text-gray-300 hover:text-white">
                        <i data-feather="settings"></i>
                        <span class="nav-text">Settings</span>
                    </a>
                </div>
                
                <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-800">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                            <i data-feather="user"></i>
                        </div>
                        <div class="nav-text">
                            <p class="text-sm font-medium">John Doe</p>
                            <p class="text-xs text-gray-400">Pro Member</p>
                        </div>
                    </div>
                </div>
            </aside>
        `;
    }
}

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