components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    transition: transform 0.3s ease;
                    z-index: 40;
                    background-color: rgba(255,255,255,0.8);
                    backdrop-filter: blur(20px);
                    -webkit-backdrop-filter: blur(20px);
                    border-right: 1px solid rgba(0,0,0,0.08);
                }
.sidebar-item {
                    transition: all 0.2s ease;
                }
                .sidebar-item:hover {
                    background-color: #f3f4f6;
                    color: #3b82f6;
                }
                .sidebar-item.active {
                    background-color: #eff6ff;
                    color: #3b82f6;
                    border-left: 3px solid #3b82f6;
                }
                .category-badge {
                    font-size: 0.65rem;
                }
            </style>
            <div class="sidebar w-64 fixed top-16 left-0 h-screen border-r border-gray-200 p-4 overflow-y-auto">
                <div class="space-y-1">
                    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">MAD Categories</h3>
                    
                    <a href="#" class="sidebar-item active flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="zap" class="mr-3 w-4 h-4"></i>
                        <span>All Companies</span>
                        <span class="ml-auto bg-blue-100 text-blue-800 category-badge px-2 py-0.5 rounded-full">1,200+</span>
                    </a>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="cpu" class="mr-3 w-4 h-4"></i>
                        <span>Core AI</span>
                        <span class="ml-auto bg-purple-100 text-purple-800 category-badge px-2 py-0.5 rounded-full">450+</span>
                    </a>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="activity" class="mr-3 w-4 h-4"></i>
                        <span>Machine Learning</span>
                        <span class="ml-auto bg-green-100 text-green-800 category-badge px-2 py-0.5 rounded-full">380+</span>
                    </a>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="database" class="mr-3 w-4 h-4"></i>
                        <span>Data Infrastructure</span>
                        <span class="ml-auto bg-orange-100 text-orange-800 category-badge px-2 py-0.5 rounded-full">370+</span>
                    </a>
                    
                    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mt-8 mb-4">Sub-Categories</h3>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="message-square" class="mr-3 w-4 h-4"></i>
                        <span>Generative AI</span>
                    </a>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="eye" class="mr-3 w-4 h-4"></i>
                        <span>Computer Vision</span>
                    </a>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="type" class="mr-3 w-4 h-4"></i>
                        <span>Natural Language</span>
                    </a>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="layers" class="mr-3 w-4 h-4"></i>
                        <span>LLM Infrastructure</span>
                    </a>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="tag" class="mr-3 w-4 h-4"></i>
                        <span>Data Labeling</span>
                    </a>
                    
                    <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm rounded-md">
                        <i data-feather="settings" class="mr-3 w-4 h-4"></i>
                        <span>MLOps</span>
                    </a>
                </div>
                
                <div class="mt-8 pt-4 border-t border-gray-200">
                    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Quick Filters</h3>
                    <div class="space-y-2">
                        <a href="#" class="flex items-center text-sm text-gray-600 hover:text-blue-500">
                            <i data-feather="star" class="mr-3 w-4 h-4 text-yellow-500"></i>
                            <span>Recently Added</span>
                        </a>
                        <a href="#" class="flex items-center text-sm text-gray-600 hover:text-blue-500">
                            <i data-feather="trending-up" class="mr-3 w-4 h-4 text-green-500"></i>
                            <span>Recent Fundings</span>
                        </a>
                        <a href="#" class="flex items-center text-sm text-gray-600 hover:text-blue-500">
                            <i data-feather="award" class="mr-3 w-4 h-4 text-purple-500"></i>
                            <span>Top Rated</span>
                        </a>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-sidebar', CustomSidebar);