Make the Left side, where you currently have "Servers", a collapsible menu. Each menu should collapse when another menu item is expanded. With server, each titled connection should show how many active sessions there current are connected. above the terminal, there should be a horizontal scrolling tab of connections if more then 1 connect exists. The menu should include the following:

index.html

@@ -49,45 +49,107 @@
         <div class="app-content flex-1 overflow-hidden">
 <main class="container mx-auto px-4 py-8">
         <div class="flex h-[calc(100vh-180px)] gap-6">
-            <!-- Left Sidebar - Server List -->
+            <!-- Left Sidebar - Collapsible Menu -->
             <div class="w-64 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 overflow-y-auto">
-                <div class="flex items-center justify-between mb-4">
-                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white">
-                        <i data-feather="server" class="inline mr-2"></i>Servers
-                    </h2>
-                    <button class="p-1 bg-primary-500 hover:bg-primary-600 text-white rounded-md">
-                        <i data-feather="plus" class="w-4 h-4"></i>
-                    </button>
-                </div>
                 <div class="space-y-2">
-                    <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600">
-                        <div class="flex items-center">
-                            <i data-feather="server" class="w-4 h-4 text-primary-500 mr-2"></i>
-                            <span class="text-sm font-medium">Production</span>
+                    <!-- Servers Menu -->
+                    <div class="menu-section" data-section="servers">
+                        <div class="menu-header flex items-center justify-between p-2 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                            <div class="flex items-center">
+                                <i data-feather="server" class="w-4 h-4 mr-2"></i>
+                                <span class="font-medium">Servers</span>
+                                <span class="ml-2 px-1.5 py-0.5 text-xs bg-primary-500 text-white rounded-full">2</span>
+                            </div>
+                            <i data-feather="chevron-down" class="w-4 h-4 transform transition-transform duration-200"></i>
+                        </div>
+                        <div class="menu-content hidden pl-6 mt-1 space-y-1">
+                            <div class="server-item p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex justify-between items-center">
+                                <div>
+                                    <div class="flex items-center">
+                                        <i data-feather="server" class="w-3 h-3 text-primary-500 mr-2"></i>
+                                        <span class="text-sm">Production</span>
+                                    </div>
+                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">prod.example.com</div>
+                                </div>
+                                <span class="px-1.5 py-0.5 text-xs bg-green-500 text-white rounded-full">1</span>
+                            </div>
+                            <div class="server-item p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex justify-between items-center">
+                                <div>
+                                    <div class="flex items-center">
+                                        <i data-feather="cloud" class="w-3 h-3 text-blue-500 mr-2"></i>
+                                        <span class="text-sm">AWS Instance</span>
+                                    </div>
+                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">ec2-54-123-45-678</div>
+                                </div>
+                                <span class="px-1.5 py-0.5 text-xs bg-green-500 text-white rounded-full">1</span>
+                            </div>
+                            <button class="w-full mt-2 text-xs flex items-center text-primary-500 hover:text-primary-700">
+                                <i data-feather="plus" class="w-3 h-3 mr-1"></i> Add Server
+                            </button>
                         </div>
-                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">prod.example.com</div>
                     </div>
-                    <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600">
-                        <div class="flex items-center">
-                            <i data-feather="cloud" class="w-4 h-4 text-blue-500 mr-2"></i>
-                            <span class="text-sm font-medium">AWS Instance</span>
+
+                    <!-- File Transfer Menu -->
+                    <div class="menu-section" data-section="transfer">
+                        <div class="menu-header flex items-center justify-between p-2 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                            <div class="flex items-center">
+                                <i data-feather="upload" class="w-4 h-4 mr-2"></i>
+                                <span class="font-medium">File Transfer</span>
+                            </div>
+                            <i data-feather="chevron-down" class="w-4 h-4 transform transition-transform duration-200"></i>
+                        </div>
+                        <div class="menu-content hidden pl-6 mt-1 space-y-1">
+                            <div class="p-2 text-sm">Quick Transfer</div>
+                            <div class="p-2 text-sm">Recent Files</div>
+                            <div class="p-2 text-sm">Scheduled</div>
+                        </div>
+                    </div>
+
+                    <!-- Vaults Menu -->
+                    <div class="menu-section" data-section="vaults">
+                        <div class="menu-header flex items-center justify-between p-2 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                            <div class="flex items-center">
+                                <i data-feather="lock" class="w-4 h-4 mr-2"></i>
+                                <span class="font-medium">Vaults</span>
+                            </div>
+                            <i data-feather="chevron-down" class="w-4 h-4 transform transition-transform duration-200"></i>
+                        </div>
+                        <div class="menu-content hidden pl-6 mt-1 space-y-1">
+                            <div class="p-2 text-sm">Credentials</div>
+                            <div class="p-2 text-sm">SSH Keys</div>
+                            <div class="p-2 text-sm">Certificates</div>
+                        </div>
+                    </div>
+
+                    <!-- Settings Menu -->
+                    <div class="menu-section" data-section="settings">
+                        <div class="menu-header flex items-center justify-between p-2 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                            <div class="flex items-center">
+                                <i data-feather="settings" class="w-4 h-4 mr-2"></i>
+                                <span class="font-medium">Settings</span>
+                            </div>
+                            <i data-feather="chevron-down" class="w-4 h-4 transform transition-transform duration-200"></i>
+                        </div>
+                        <div class="menu-content hidden pl-6 mt-1 space-y-1">
+                            <div class="p-2 text-sm">Appearance</div>
+                            <div class="p-2 text-sm">Connections</div>
+                            <div class="p-2 text-sm">Security</div>
                         </div>
-                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">ec2-54-123-45-678</div>
                     </div>
                 </div>
             </div>
-
-            <!-- Main Terminal Area -->
+<!-- Main Terminal Area -->
             <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden flex flex-col">
-                <!-- Terminal Header -->
-                <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-                    <div class="flex items-center">
-                        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">
-                            <i data-feather="terminal" class="inline mr-2"></i>SSH Terminal
-                        </h2>
-                        <span class="ml-4 px-2 py-1 text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 rounded-full">Connected</span>
-                    </div>
-                    <div class="flex space-x-2">
+                <!-- Terminal Header with Connection Tabs -->
+                <div class="flex flex-col border-b border-gray-200 dark:border-gray-700">
+                    <div class="flex items-center justify-between p-4">
+                        <div class="flex items-center">
+                            <h2 class="text-xl font-semibold text-gray-800 dark:text-white">
+                                <i data-feather="terminal" class="inline mr-2"></i>SSH Terminal
+                            </h2>
+                            <span class="ml-4 px-2 py-1 text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 rounded-full">Connected</span>
+                        </div>
+<div class="flex space-x-2">
                         <button class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md">
                             <i data-feather="settings" class="w-4 h-4"></i>
                         </button>

script.js

@@ -17,6 +17,54 @@ function toggleDarkMode() {
     localStorage.setItem('darkMode', isDark);
     document.dispatchEvent(new CustomEvent('darkModeChange', { detail: isDark }));
 }
+// Collapsible Menu Functionality
+function setupCollapsibleMenu() {
+    const menuSections = document.querySelectorAll('.menu-section');
+    
+    menuSections.forEach(section => {
+        const header = section.querySelector('.menu-header');
+        const content = section.querySelector('.menu-content');
+        const chevron = header.querySelector('i[data-feather="chevron-down"]');
+        
+        header.addEventListener('click', () => {
+            // Close all other sections
+            menuSections.forEach(s => {
+                if (s !== section) {
+                    s.querySelector('.menu-content').classList.remove('active');
+                    s.querySelector('.menu-header').classList.remove('active');
+                }
+            });
+            
+            // Toggle current section
+            content.classList.toggle('active');
+            header.classList.toggle('active');
+            
+            // Update chevron icon
+            if (content.classList.contains('active')) {
+                chevron.setAttribute('data-feather', 'chevron-up');
+            } else {
+                chevron.setAttribute('data-feather', 'chevron-down');
+            }
+            feather.replace();
+        });
+    });
+}
+
+// Connection Tabs Functionality
+function setupConnectionTabs() {
+    const tabsContainer = document.querySelector('.connection-tabs');
+    if (!tabsContainer) return;
+    
+    const tabs = tabsContainer.querySelectorAll('.connection-tab');
+    
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            // Here you would switch the terminal view to the selected connection
+        });
+    });
+}
 
 // Terminal simulation (simple demo)
 function simulateTerminal() {
@@ -25,7 +73,6 @@ function simulateTerminal() {
         terminal.scrollTop = terminal.scrollHeight;
     }
 }
-
 // Drag and drop file handling
 function initFileDrop() {
     const dropArea = document.querySelector('.border-dashed');
@@ -103,10 +150,11 @@ function setupWindowControls() {
         });
     }
 }
-
 // Initialize everything when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
     initDarkMode();
+    setupCollapsibleMenu();
+    setupConnectionTabs();
     simulateTerminal();
     initFileDrop();
     setupWindowControls();

style.css

@@ -69,6 +69,68 @@ body {
     background-color: #4b5563;
     border-radius: 4px;
 }
+/* Collapsible Menu Styles */
+.menu-section {
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.menu-header {
+    transition: all 0.2s ease;
+}
+
+.menu-header.active {
+    background-color: rgba(99, 102, 241, 0.1);
+}
+
+.dark .menu-header.active {
+    background-color: rgba(99, 102, 241, 0.2);
+}
+
+.menu-header.active i[data-feather="chevron-down"] {
+    transform: rotate(180deg);
+}
+
+.menu-content {
+    transition: all 0.3s ease;
+    max-height: 0;
+    overflow: hidden;
+}
+
+.menu-content.active {
+    max-height: 500px;
+    display: block;
+}
+
+/* Connection Tabs */
+.connection-tabs {
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+}
+
+.connection-tabs::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+}
+
+.connection-tab {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    padding: 0.5rem 1rem;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease;
+}
+
+.connection-tab.active {
+    border-bottom-color: #6366f1;
+    color: #6366f1;
+}
+
+.dark .connection-tab.active {
+    border-bottom-color: #818cf8;
+    color: #818cf8;
+}
 
 /* Sidebar styles */
 .w-64 {
@@ -78,7 +140,6 @@ body {
 .w-80 {
     width: 20rem;
 }
-
 /* File transfer area */
 .border-dashed:hover {
     border-color: #6366f1;