components/sidebar.js

class MetroSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: none;
                    width: 280px;
                }
                
                @media (min-width: 768px) {
                    :host {
                        display: block;
                    }
                }
                
                aside {
                    height: calc(100vh - 73px);
                    position: sticky;
                    top: 73px;
                    background: rgba(15, 23, 42, 0.8);
                    border-right: 1px solid rgba(255, 255, 255, 0.05);
                    overflow-y: auto;
                }
                
                .sidebar-section {
                    padding: 2rem;
                }
                
                .nav-item {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem 1rem;
                    margin-bottom: 0.5rem;
                    border-radius: 0.75rem;
                    color: #9ca3af;
                    transition: all 0.2s;
                    text-decoration: none;
                }
                
                .nav-item:hover {
                    background: rgba(255, 255, 255, 0.05);
                    color: #ffffff;
                    transform: translateX(4px);
                }
                
                .nav-item.active {
                    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(217, 70, 239, 0.1) 100%);
                    color: #0ea5e9;
                    border-left: 3px solid #0ea5e9;
                }
                
                .nav-item i {
                    margin-right: 0.75rem;
                    width: 18px;
                    height: 18px;
                }
                
                .section-title {
                    color: #6b7280;
                    font-size: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    margin-top: 1.5rem;
                    margin-bottom: 0.75rem;
                }
                
                .badge {
                    margin-left: auto;
                    background: rgba(217, 70, 239, 0.2);
                    color: #d946ef;
                    font-size: 0.75rem;
                    padding: 0.125rem 0.5rem;
                    border-radius: 9999px;
                }
                
                aside::-webkit-scrollbar {
                    width: 4px;
                }
                
                aside::-webkit-scrollbar-thumb {
                    background: #4b5563;
                    border-radius: 2px;
                }
            </style>
            
            <aside>
                <div class="sidebar-section">
                    <!-- Main Navigation -->
                    <div class="section-title">Main</div>
                    <a href="/" class="nav-item active">
                        <i data-feather="home"></i>
                        Dashboard
                    </a>
                    <a href="/analytics" class="nav-item">
                        <i data-feather="pie-chart"></i>
                        Analytics
                    </a>
                    <a href="/reports" class="nav-item">
                        <i data-feather="file-text"></i>
                        Reports
                    </a>
                    
                    <!-- Management -->
                    <div class="section-title">Management</div>
                    <a href="/users" class="nav-item">
                        <i data-feather="users"></i>
                        Users
                        <span class="badge">24</span>
                    </a>
                    <a href="/products" class="nav-item">
                        <i data-feather="package"></i>
                        Products
                    </a>
                    <a href="/orders" class="nav-item">
                        <i data-feather="shopping-cart"></i>
                        Orders
                        <span class="badge">5</span>
                    </a>
                    
                    <!-- System -->
                    <div class="section-title">System</div>
                    <a href="/settings" class="nav-item">
                        <i data-feather="settings"></i>
                        Settings
                    </a>
                    <a href="/support" class="nav-item">
                        <i data-feather="help-circle"></i>
                        Support
                    </a>
                    <a href="/docs" class="nav-item">
                        <i data-feather="book-open"></i>
                        Documentation
                    </a>
                    
                    <!-- Quick Stats -->
                    <div class="section-title mt-8">Quick Stats</div>
                    <div class="mt-3 p-4 bg-gray-800/50 rounded-lg">
                        <div class="flex items-center justify-between mb-3">
                            <span class="text-sm text-gray-400">Server Load</span>
                            <span class="text-sm text-green-400">65%</span>
                        </div>
                        <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-primary-500 to-secondary-500" style="width: 65%"></div>
                        </div>
                        
                        <div class="flex items-center justify-between mt-4 mb-3">
                            <span class="text-sm text-gray-400">Storage</span>
                            <span class="text-sm text-yellow-400">82%</span>
                        </div>
                        <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-yellow-500 to-orange-500" style="width: 82%"></div>
                        </div>
                    </div>
                    
                    <!-- Upgrade Banner -->
                    <div class="mt-6 p-4 bg-gradient-to-br from-primary-900/30 to-secondary-900/30 rounded-lg border border-primary-900/20">
                        <div class="flex items-center mb-2">
                            <i data-feather="zap" class="w-4 h-4 text-primary-400 mr-2"></i>
                            <span class="text-sm font-medium">Pro Features</span>
                        </div>
                        <p class="text-xs text-gray-400 mb-3">Upgrade to unlock advanced analytics</p>
                        <a href="/upgrade" class="metro-btn-primary w-full text-center text-sm py-2">
                            Upgrade Now
                        </a>
                    </div>
                </div>
            </aside>
        `;
        
        setTimeout(() => {
            const icons = this.shadowRoot.querySelectorAll('[data-feather]');
            icons.forEach(icon => {
                feather.replace();
            });
        }, 100);
    }
}

customElements.define('metro-sidebar', MetroSidebar);