The sidebar goes inside the chat section of the site. Fix it to the left so that it doesn't conflict with the chat section.

index.html

@@ -63,7 +63,7 @@
     <div class="flex h-screen relative z-10">
         <custom-sidebar></custom-sidebar>
 <!-- Main Chat Area -->
-<main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-screen" style="margin-left: 260px;">
+<main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-screen">
 <!-- Messages Container -->
             <div id="chatContainer" class="flex-1 overflow-y-auto scroll-smooth p-4 space-y-4" style="scrollbar-width: thin; scrollbar-color: #525252 #18181b;">
                 <!-- AI Welcome Message -->

script.js

@@ -8,12 +8,13 @@ let webSearchEnabled = false;
 let isGenerating = false;
 let currentTokenCount = 0;
 const maxTokens = 4096;
+let sidebarCollapsed = false;
 // Initialize
 document.addEventListener('DOMContentLoaded', function() {
     initializeApp();
     setupEventListeners();
+    initializeSidebarToggle();
 });
-
 function initializeApp() {
     // Load chat history from localStorage
     const savedHistory = localStorage.getItem('chatHistory');
@@ -28,7 +29,6 @@ function initializeApp() {
     // Initialize tooltips and other UI elements
     initializeTooltips();
 }
-
 function setupEventListeners() {
     // Keyboard shortcuts
     document.addEventListener('keydown', function(e) {
@@ -48,6 +48,12 @@ function setupEventListeners() {
             e.preventDefault();
             showHelp();
         }
+        
+        // Ctrl/Cmd + B to toggle sidebar
+        if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
+            e.preventDefault();
+            toggleSidebar();
+        }
     });
     
     // Auto-resize textarea
@@ -57,6 +63,34 @@ function setupEventListeners() {
         this.style.height = Math.min(this.scrollHeight, 120) + 'px';
     });
 }
+
+function initializeSidebarToggle() {
+    // Add sidebar toggle functionality for responsive design
+    const main = document.querySelector('main');
+    const sidebar = document.querySelector('.sidebar');
+    
+    if (window.innerWidth < 768) {
+        sidebarCollapsed = true;
+        main.style.marginLeft = '0';
+    }
+}
+
+function toggleSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    const main = document.querySelector('main');
+    
+    sidebarCollapsed = !sidebarCollapsed;
+    
+    if (sidebarCollapsed) {
+        sidebar.style.transform = 'translateX(-100%)';
+        main.style.marginLeft = '0';
+        main.style.width = '100%';
+    } else {
+        sidebar.style.transform = 'translateX(0)';
+        main.style.marginLeft = '260px';
+        main.style.width = 'calc(100% - 260px)';
+    }
+}
 function sendMessage() {
     const input = document.getElementById('messageInput');
     const message = input.value.trim();

style.css

@@ -151,7 +151,6 @@ main {
     overflow: hidden;
     max-height: 100vh;
 }
-
 /* Desktop layout - fixed sidebar */
 @media (min-width: 769px) {
     main {
@@ -159,6 +158,11 @@ main {
         width: calc(100% - 260px);
     }
 }
+
+/* Ensure main content accounts for fixed sidebar */
+main {
+    transition: margin-left 0.3s ease;
+}
 /* Sidebar Transitions */
 .sidebar {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);