components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: fixed;
                    left: 0;
                    top: 64px;
                    bottom: 0;
                    width: 256px;
                    z-index: 40;
                    transform: translateX(-100%);
                    transition: transform 0.3s ease;
                }
                
                @media (min-width: 768px) {
                    :host {
                        transform: translateX(0);
                    }
                }
                
                .sidebar {
                    background: white;
                    border-right: 1px solid #e5e7eb;
                    height: 100%;
                    overflow-y: auto;
                    padding: 1.5rem 0;
                }
                
                .menu-group {
                    margin-bottom: 2rem;
                }
                
                .menu-title {
                    font-size: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    color: #6b7280;
                    padding: 0 1.5rem;
                    margin-bottom: 0.75rem;
                }
                
                .menu-items {
                    display: flex;
                    flex-direction: column;
                }
                
                .menu-item {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem 1.5rem;
                    color: #4b5563;
                    text-decoration: none;
                    transition: all 0.2s;
                    border-left: 3px solid transparent;
                }
                
                .menu-item:hover {
                    background-color: #f9fafb;
                    color: #3b82f6;
                    border-left-color: #3b82f6;
                }
                
                .menu-item.active {
                    background-color: #eff6ff;
                    color: #3b82f6;
                    border-left-color: #3b82f6;
                    font-weight: 600;
                }
                
                .menu-item i {
                    margin-right: 0.75rem;
                    width: 1.25rem;
                    height: 1.25rem;
                }
                
                .ai-status {
                    margin: 1.5rem;
                    padding: 1rem;
                    background: linear-gradient(135deg, #3b82f6, #6366f1);
                    border-radius: 0.5rem;
                    color: white;
                }
                
                .ai-status-title {
                    font-size: 0.875rem;
                    font-weight: 600;
                    margin-bottom: 0.25rem;
                }
                
                .ai-status-subtitle {
                    font-size: 0.75rem;
                    opacity: 0.9;
                }
                
                .ai-status-indicator {
                    display: flex;
                    align-items: center;
                    margin-top: 0.5rem;
                }
                
                .indicator-dot {
                    width: 0.5rem;
                    height: 0.5rem;
                    border-radius: 50%;
                    background-color: #10b981;
                    margin-right: 0.5rem;
                    animation: pulse 2s infinite;
                }
                
                @keyframes pulse {
                    0%, 100% {
                        opacity: 1;
                    }
                    50% {
                        opacity: 0.5;
                    }
                }
            </style>
            
            <div class="sidebar">
                <div class="ai-status">
                    <div class="ai-status-title">AI Assistant Status</div>
                    <div class="ai-status-subtitle">All systems operational</div>
                    <div class="ai-status-indicator">
                        <div class="indicator-dot"></div>
                        <span class="text-xs">Online</span>
                    </div>
                </div>
                
                <div class="menu-group">
                    <div class="menu-title">Main</div>
                    <div class="menu-items">
                        <a href="index.html" class="menu-item active">
                            <i data-feather="home"></i>
                            Dashboard
                        </a>
                        <a href="projects.html" class="menu-item">
                            <i data-feather="folder"></i>
                            Projects
                        </a>
                        <a href="#" class="menu-item">
                            <i data-feather="terminal"></i>
                            Code Editor
                        </a>
                        <a href="#" class="menu-item">
                            <i data-feather="database"></i>
                            Data Sources
                        </a>
                    </div>
                </div>
                
                <div class="menu-group">
                    <div class="menu-title">AI Tools</div>
                    <div class="menu-items">
                        <a href="ask-devin.html" class="menu-item">
                            <i data-feather="message-square"></i>
                            Ask Devin
                        </a>
                        <a href="#" class="menu-item">
                            <i data-feather="code"></i>
                            Code Generation
                        </a>
                        <a href="#" class="menu-item">
                            <i data-feather="search"></i>
                            Code Search
                        </a>
                        <a href="#" class="menu-item">
                            <i data-feather="check-circle"></i>
                            Code Review
                        </a>
                        <a href="#" class="menu-item">
                            <i data-feather="zap"></i>
                            Optimization
                        </a>
                    </div>
</div>
                
                <div class="menu-group">
                    <div class="menu-title">Settings</div>
                    <div class="menu-items">
                        <a href="deepwiki.html" class="menu-item">
                            <i data-feather="book"></i>
                            DeepWiki
                        </a>
                        <a href="settings.html" class="menu-item">
                            <i data-feather="settings"></i>
                            General Settings
                        </a>
<a href="#" class="menu-item">
                            <i data-feather="users"></i>
                            Team Members
                        </a>
                        <a href="#" class="menu-item">
                            <i data-feather="credit-card"></i>
                            Billing
                        </a>
                        <a href="#" class="menu-item">
                            <i data-feather="help-circle"></i>
                            Help & Support
                        </a>
                    </div>
                </div>
            </div>
        `;
        
        // Initialize Feather Icons within shadow DOM
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 100);
    }
}

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