components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    width: 250px;
                    height: 100%;
                    background-color: var(--sidebar-bg, #1E293B);
                    color: var(--sidebar-text, #F8FAFC);
                    border-right: 1px solid var(--sidebar-border, #334155);
                    overflow-y: auto;
                }
                
                .sidebar-header {
                    padding: 12px 16px;
                    font-weight: 600;
                    border-bottom: 1px solid var(--sidebar-border, #334155);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                
                .sidebar-item {
                    padding: 8px 16px 8px 32px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    user-select: none;
                }
                
                .sidebar-item:hover {
                    background-color: var(--sidebar-hover, #334155);
                }
                
                .sidebar-item.active {
                    background-color: var(--sidebar-active, #3B82F6);
                }
                
                .sidebar-group {
                    margin: 8px 0;
                }
                
                .sidebar-group-title {
                    padding: 8px 16px;
                    font-size: 0.75rem;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: var(--sidebar-group-text, #94A3B8);
                }
                
                .folder-icon {
                    color: #F59E0B;
                }
                
                .file-icon {
                    color: #60A5FA;
                }
            </style>
            <div class="sidebar">
                <div class="sidebar-header">
                    <span>Project</span>
                    <i data-feather="chevron-down" class="w-4 h-4"></i>
                </div>
                
                <div class="sidebar-group">
                    <div class="sidebar-group-title">MyApplication</div>
                    <div class="sidebar-item active">
                        <i data-feather="file" class="file-icon"></i>
                        <span>MainActivity.kt</span>
                    </div>
                    <div class="sidebar-item">
                        <i data-feather="file" class="file-icon"></i>
                        <span>AndroidManifest.xml</span>
                    </div>
                </div>
                
                <div class="sidebar-group">
                    <div class="sidebar-group-title">res</div>
                    <div class="sidebar-item">
                        <i data-feather="folder" class="folder-icon"></i>
                        <span>layout</span>
                    </div>
                    <div class="sidebar-item">
                        <i data-feather="folder" class="folder-icon"></i>
                        <span>values</span>
                    </div>
                    <div class="sidebar-item">
                        <i data-feather="folder" class="folder-icon"></i>
                        <span>drawable</span>
                    </div>
                </div>
                
                <div class="sidebar-group">
                    <div class="sidebar-group-title">Gradle Scripts</div>
                    <div class="sidebar-item">
                        <i data-feather="file" class="file-icon"></i>
                        <span>build.gradle (Module)</span>
                    </div>
                    <div class="sidebar-item">
                        <i data-feather="file" class="file-icon"></i>
                        <span>build.gradle (Project)</span>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-sidebar', CustomSidebar);