components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        const path = this.getAttribute('path') || '';
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 250px;
                }
                
                aside {
                    background: white;
                    border-radius: 0.75rem;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                    padding: 1rem;
                    position: sticky;
                    top: 1rem;
                }
                
                h3 {
                    font-size: 1rem;
                    font-weight: 600;
                    color: #1e293b;
                    margin-bottom: 1rem;
                    padding-bottom: 0.5rem;
                    border-bottom: 1px solid #e2e8f0;
                }
                
                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }
                
                li {
                    margin-bottom: 0.5rem;
                }
                
                a {
                    display: flex;
                    align-items: center;
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    color: #64748b;
                    text-decoration: none;
                    font-size: 0.875rem;
                    font-weight: 500;
                    transition: all 0.2s;
                }
                
                a:hover {
                    color: #2563eb;
                    background-color: #eff6ff;
                }
                
                a.active {
                    color: #2563eb;
                    background-color: #eff6ff;
                    font-weight: 600;
                }
                
                i {
                    margin-right: 0.75rem;
                    width: 16px;
                    height: 16px;
                }
                
                .divider {
                    height: 1px;
                    background-color: #e2e8f0;
                    margin: 1rem 0;
                }
                
                @media (max-width: 768px) {
                    :host {
                        width: 100%;
                        margin-bottom: 1rem;
                    }
                    
                    aside {
                        position: static;
                    }
                }
            </style>
            <aside>
                <h3>Learning Path</h3>
                <ul>
                    <li>
                        <a href="/beginner.html" class="${path === 'beginner' ? 'active' : ''}">
                            <i data-feather="book"></i>
                            Beginner
                        </a>
                    </li>
                    <li>
                        <a href="/intermediate.html" class="${path === 'intermediate' ? 'active' : ''}">
                            <i data-feather="code"></i>
                            Intermediate
                        </a>
                    </li>
                    <li>
                        <a href="/advanced.html" class="${path === 'advanced' ? 'active' : ''}">
                            <i data-feather="zap"></i>
                            Advanced
                        </a>
                    </li>
                </ul>
                
                <div class="divider"></div>
                
                <h3>Resources</h3>
                <ul>
                    <li>
                        <a href="#">
                            <i data-feather="file-text"></i>
                            Cheat Sheets
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i data-feather="help-circle"></i>
                            FAQ
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i data-feather="message-square"></i>
                            Community
                        </a>
                    </li>
                </ul>
            </aside>
        `;
        
        // Replace feather icons after render
        setTimeout(() => {
            const icons = this.shadowRoot.querySelectorAll('[data-feather]');
            icons.forEach(icon => {
                feather.replace(icon);
            });
        }, 100);
    }
}

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