components/sidebar.js

class SidebarNav extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
        this.attachEvents();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 250px;
                    background-color: #0f172a;
                    border-right: 1px solid #1e293b;
                    display: flex;
                    flex-direction: column;
                }
                
                .brand {
                    padding: 1.5rem;
                    font-size: 1.25rem;
                    font-weight: bold;
                    color: #10b981; /* Green */
                    border-bottom: 1px solid #1e293b;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .nav-links {
                    list-style: none;
                    padding: 1rem 0;
                    margin: 0;
                }

                .nav-item a {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 0.75rem 1.5rem;
                    color: #94a3b8;
                    text-decoration: none;
                    transition: all 0.2s;
                    border-right: 3px solid transparent;
                }

                .nav-item a:hover {
                    background-color: rgba(16, 185, 129, 0.05);
                    color: #e2e8f0;
                }

                .nav-item a.active {
                    background-color: rgba(16, 185, 129, 0.1);
                    color: #10b981;
                    border-right: 3px solid #10b981;
                }

                .nav-item i {
                    width: 18px;
                    height: 18px;
                }

                .system-status {
                    margin-top: auto;
                    padding: 1.5rem;
                    border-top: 1px solid #1e293b;
                }

                .status-dot {
                    height: 8px;
                    width: 8px;
                    background-color: #10b981;
                    border-radius: 50%;
                    display: inline-block;
                    margin-right: 8px;
                    box-shadow: 0 0 8px #10b981;
                }

                .status-text {
                    font-size: 0.75rem;
                    color: #64748b;
                }

                /* Mobile handling */
                @media (max-width: 768px) {
                    :host {
                        position: absolute;
                        left: -250px;
                        height: 100%;
                        z-index: 50;
                        transition: left 0.3s;
                    }
                    :host.open {
                        left: 0;
                    }
                }
            </style>
            <div class="brand">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-ai-orange"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                OmniLoop
            </div>
            <ul class="nav-links">
                <li class="nav-item">
                    <a href="#dashboard" id="link-dashboard">
                        <i data-feather="grid"></i> Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#knowledge" id="link-knowledge">
                        <i data-feather="database"></i> Knowledge Base
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" onclick="return false;">
                        <i data-feather="users"></i> Hive Mind
                    </a>
                </li>
                <li class="nav-item">
                    <a href="voice.html">
                        <i data-feather="mic"></i> Voice Lab
                    </a>
                </li>
                <li class="nav-item">
                    <a href="settings.html">
                        <i data-feather="settings"></i> Configuration
                    </a>
                </li>
</ul>
            <div class="system-status">
                <div class="flex items-center mb-2">
                    <span class="status-dot animate-pulse"></span>
                    <span class="status-text text-white font-mono">CORE STABLE</span>
                </div>
                <div class="text-xs text-slate-600">Ver 4.2.0-Alpha</div>
            </div>
        `;
    }

    attachEvents() {
        // Listen for route changes from main script to update active class
        document.addEventListener('route-change', (e) => {
            const hash = e.detail.hash;
            const links = this.shadowRoot.querySelectorAll('.nav-item a');
            
            links.forEach(link => {
                link.classList.remove('active');
                // Check if href matches hash
                if(link.getAttribute('href') === hash) {
                    link.classList.add('active');
                }
            });
        });

        // Re-initialize icons inside shadow DOM
        if (window.feather) {
            window.feather.replace();
        }
    }
}

customElements.define('nav-sidebar', SidebarNav);