components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                aside {
                    position: fixed;
                    top: 4rem;
                    left: 0;
                    bottom: 0;
                    width: 16rem;
                    background-color: white;
                    border-right: 1px solid #e2e8f0;
                    padding: 1.5rem;
                    overflow-y: auto;
                    transition: all 0.3s ease;
                    z-index: 40;
                }
                
                .dark aside {
                    background-color: #1e293b;
                    border-right-color: #334155;
                }
                
                .sidebar-section {
                    margin-bottom: 2rem;
                }
                
                .sidebar-title {
                    font-size: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: #64748b;
                    margin-bottom: 1rem;
                }
                
                .dark .sidebar-title {
                    color: #94a3b8;
                }
                
                .sidebar-link {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem 1rem;
                    border-radius: 0.375rem;
                    color: #475569;
                    font-weight: 500;
                    transition: all 0.2s;
                    margin-bottom: 0.25rem;
                }
                
                .dark .sidebar-link {
                    color: #cbd5e1;
                }
                
                .sidebar-link:hover {
                    background-color: #f1f5f9;
                    color: #4f46e5;
                }
                
                .dark .sidebar-link:hover {
                    background-color: #334155;
                    color: #818cf8;
                }
                
                .sidebar-link.active {
                    background-color: #eef2ff;
                    color: #4f46e5;
                }
                
                .dark .sidebar-link.active {
                    background-color: #3730a3;
                    color: #a5b4fc;
                }
                
                .sidebar-icon {
                    margin-right: 0.75rem;
                    width: 1.25rem;
                    height: 1.25rem;
                }
                
                .sidebar-badge {
                    margin-left: auto;
                    background-color: #e0e7ff;
                    color: #4f46e5;
                    font-size: 0.75rem;
                    font-weight: 600;
                    padding: 0.125rem 0.5rem;
                    border-radius: 9999px;
                }
                
                .dark .sidebar-badge {
                    background-color: #4338ca;
                    color: #c7d2fe;
                }
            </style>
            
            <aside>
                <div class="sidebar-section">
                    <h3 class="sidebar-title">Main</h3>
                    <a href="#" class="sidebar-link active">
                        <i data-feather="home" class="sidebar-icon"></i>
                        Dashboard
                    </a>
                    <a href="#" class="sidebar-link">
                        <i data-feather="inbox" class="sidebar-icon"></i>
                        Projects
                        <span class="sidebar-badge">12</span>
                    </a>
                    <a href="#" class="sidebar-link">
                        <i data-feather="star" class="sidebar-icon"></i>
                        Favorites
                    </a>
                </div>
                
                <div class="sidebar-section">
                    <h3 class="sidebar-title">Development</h3>
                    <a href="#" class="sidebar-link">
                        <i data-feather="code" class="sidebar-icon"></i>
                        Code Editor
                    </a>
                    <a href="#" class="sidebar-link">
                        <i data-feather="layout" class="sidebar-icon"></i>
                        UI Components
                    </a>
                    <a href="#" class="sidebar-link">
                        <i data-feather="database" class="sidebar-icon"></i>
                        API Explorer
                    </a>
                </div>
                
                <div class="sidebar-section">
                    <h3 class="sidebar-title">Tools</h3>
                    <a href="#" class="sidebar-link">
                        <i data-feather="settings" class="sidebar-icon"></i>
                        Settings
                    </a>
                    <a href="#" class="sidebar-link">
                        <i data-feather="help-circle" class="sidebar-icon"></i>
                        Documentation
                    </a>
                    <a href="#" class="sidebar-link">
                        <i data-feather="message-square" class="sidebar-icon"></i>
                        Support
                    </a>
                </div>
            </aside>
        `;
        
        // Initialize feather icons in shadow DOM
        const featherScript = document.createElement('script');
        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
        this.shadowRoot.appendChild(featherScript);
        featherScript.onload = () => feather.replace();
    }
}

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