components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar-link:hover .sidebar-icon {
                    @apply text-primary-500;
                }
                .sidebar-link.active {
                    @apply bg-primary-50 dark:bg-gray-700 text-primary-600 dark:text-primary-400;
                }
                .sidebar-link.active .sidebar-icon {
                    @apply text-primary-500;
                }
            </style>
            <aside class="hidden md:block w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 rounded-lg h-fit sticky top-24">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Navigation</h3>
                    <nav class="space-y-2">
                        <a href="/dashboard" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <i data-feather="home" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
                            Dashboard
                        </a>
                        <a href="/projects" class="sidebar-link active flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <i data-feather="grid" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
                            Projects
                        </a>
                        <a href="/domains" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <i data-feather="globe" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
                            Domains
                        </a>
                        <a href="/databases" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <i data-feather="database" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
                            Databases
                        </a>
                        <a href="/backups" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <i data-feather="hard-drive" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
                            Backups
                        </a>
                        <a href="/settings" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <i data-feather="settings" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
                            Settings
                        </a>
                    </nav>
                    
                    <div class="mt-8">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h3>
                        <div class="space-y-2">
                            <a href="/new-project" class="flex items-center justify-center bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md transition-colors">
                                <i data-feather="plus" class="w-4 h-4 mr-2"></i>
                                New Project
                            </a>
                            <a href="/deploy" class="flex items-center justify-center bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-md transition-colors">
                                <i data-feather="upload" class="w-4 h-4 mr-2"></i>
                                Deploy App
                            </a>
                        </div>
                    </div>
                    
                    <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">System Info</h3>
                        <div class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
                            <div class="flex justify-between">
                                <span>Node.js Version</span>
                                <span class="font-mono">v18.12.1</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Panel Version</span>
                                <span class="font-mono">v2.4.1</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Uptime</span>
                                <span class="font-mono">12d 4h 23m</span>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        `;
    }
}

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