components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 16rem;
                    background-color: white;
                    height: calc(100vh - 4rem);
                    position: fixed;
                    left: 0;
                    top: 4rem;
                    border-right: 1px solid #e5e7eb;
                    overflow-y: auto;
                    transition: transform 0.3s ease;
                    z-index: 40;
                }
                
                .dark :host {
                    background-color: #111827;
                    border-right: 1px solid #374151;
                }
                
                .sidebar-content {
                    padding: 1.5rem;
                }
                
                .nav-section {
                    margin-bottom: 1.5rem;
                }
                
                .nav-title {
                    font-size: 0.75rem;
                    font-weight: 600;
                    color: #6b7280;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    margin-bottom: 0.75rem;
                }
                
                .dark .nav-title {
                    color: #9ca3af;
                }
                
                .nav-list {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                }
                
                .nav-item {
                    display: flex;
                    align-items: center;
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    color: #4b5563;
                    font-weight: 500;
                    text-decoration: none;
                    transition: all 0.2s ease;
                }
                
                .dark .nav-item {
                    color: #d1d5db;
                }
                
                .nav-item:hover {
                    background-color: #f3f4f6;
                    color: #1f2937;
                }
                
                .dark .nav-item:hover {
                    background-color: #374151;
                    color: #f9fafb;
                }
                
                .nav-item.active {
                    background-color: #eff6ff;
                    color: #1d4ed8;
                }
                
                .dark .nav-item.active {
                    background-color: #1e3a8a;
                    color: #93c5fd;
                }
                
                .nav-icon {
                    margin-right: 0.75rem;
                    width: 1.25rem;
                    height: 1.25rem;
                }
            </style>
            <div class="sidebar-content">
                <div class="nav-section">
                    <h3 class="nav-title">Main</h3>
                    <div class="nav-list">
                        <a href="/" class="nav-item active">
                            <i data-feather="home" class="nav-icon"></i>
                            <span>Dashboard</span>
                        </a>
                        <a href="/analytics" class="nav-item">
                            <i data-feather="activity" class="nav-icon"></i>
                            <span>Analytics</span>
                        </a>
                        <a href="/reports" class="nav-item">
                            <i data-feather="file-text" class="nav-icon"></i>
                            <span>Reports</span>
                        </a>
                    </div>
                </div>
                
                <div class="nav-section">
                    <h3 class="nav-title">Data Sources</h3>
                    <div class="nav-list">
                        <a href="/excel" class="nav-item">
                            <i data-feather="file" class="nav-icon"></i>
                            <span>Excel Sheets</span>
                        </a>
                        <a href="/api" class="nav-item">
                            <i data-feather="database" class="nav-icon"></i>
                            <span>API Connections</span>
                        </a>
                        <a href="/web" class="nav-item">
                            <i data-feather="globe" class="nav-icon"></i>
                            <span>Web Data</span>
                        </a>
                    </div>
                </div>
                
                <div class="nav-section">
                    <h3 class="nav-title">Settings</h3>
                    <div class="nav-list">
                        <a href="/profile" class="nav-item">
                            <i data-feather="user" class="nav-icon"></i>
                            <span>Profile</span>
                        </a>
                        <a href="/settings" class="nav-item">
                            <i data-feather="settings" class="nav-icon"></i>
                            <span>Settings</span>
                        </a>
                        <a href="/help" class="nav-item">
                            <i data-feather="help-circle" class="nav-icon"></i>
                            <span>Help</span>
                        </a>
                    </div>
                </div>
            </div>
        `;
    }
}

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