class AppSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 250px;
                    background-color: #0f172a; /* slate-900 */
                    border-right: 1px solid #1e293b; /* slate-800 */
                    padding: 1.5rem 1rem;
                    display: none; /* Hidden on mobile by default */
                    flex-direction: column;
                    gap: 1rem;
                }
                @media (min-width: 1024px) {
                    :host {
                        display: flex;
                    }
                }
                .menu-label {
                    font-size: 0.75rem;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: #64748b; /* slate-500 */
                    margin-bottom: 0.5rem;
                    padding-left: 0.75rem;
                }
                .nav-item {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 0.75rem;
                    color: #cbd5e1; /* slate-300 */
                    text-decoration: none;
                    border-radius: 0.5rem;
                    transition: background 0.2s, color 0.2s;
                    font-size: 0.9rem;
                }
                .nav-item:hover {
                    background-color: #1e293b; /* slate-800 */
                    color: white;
                }
                .nav-item.active {
                    background-color: #4f46e5; /* indigo-600 */
                    color: white;
                }
                .nav-item i {
                    width: 18px;
                    height: 18px;
                }
            </style>
            <div class="menu-label">Main</div>
            <a href="#" class="nav-item active">
                <i data-feather="grid"></i>
                <span>Dashboard</span>
            </a>
            <a href="#" class="nav-item">
                <i data-feather="layers"></i>
                <span>Projects</span>
            </a>
            <a href="#" class="nav-item">
                <i data-feather="users"></i>
                <span>Team</span>
            </a>
            
            <div class="menu-label" style="margin-top: 1rem;">Development</div>
            <a href="#" class="nav-item">
                <i data-feather="code"></i>
                <span>Components</span>
            </a>
            <a href="#" class="nav-item">
                <i data-feather="database"></i>
                <span>API Keys</span>
            </a>
             <a href="#" class="nav-item">
                <i data-feather="terminal"></i>
                <span>Logs</span>
            </a>
        `;
        feather.replace();
    }
}
customElements.define('app-sidebar', AppSidebar);