Improve sidebar toggle and mobile responsiveness

- Add fixed sidebar logic for mobile
- Animate chat container margin
- Refine expand/collapse logic
- Use transitions for smooth effect

Author: kqlio67

g4f/gui/client/static/css/style.css

@@ -957,13 +957,22 @@ input.model:hover
 }
 
 @media only screen and (min-width: 40em) {
+    .sidebar {
+        position: static;
+        height: auto;
+        background-color: transparent;
+    }
+
     .sidebar.expanded {
         width: 400px;
     }
 
     .sidebar.expanded + .chat-container {
         margin-left: 400px;
         width: calc(100% - 400px);
+        position: relative;
+        left: 0;
+        transition: left 0.3s ease; /* Add transition for smooth animation */
     }
 
     .stop_generating {
@@ -997,6 +1006,15 @@ input.model:hover
     }
 }
 
+body.mobile-sidebar-open .sidebar {
+    position: fixed;
+}
+
+body.mobile-sidebar-open .chat-container {
+    margin-left: 400px; /* Push chat container to the right */
+    transition: margin-left 0.3s ease; /* Add transition for smooth animation */
+}
+
 .input-area {
     display: flex;
 }

g4f/gui/client/static/js/chat.v1.js

@@ -1890,13 +1890,14 @@ window.addEventListener('popstate', hide_sidebar, false);
 
 // Create a reusable function for sidebar toggle logic
 const toggleSidebar = async () => {
-  if (sidebar.classList.contains("expanded") || 
+  if (sidebar.classList.contains("expanded") ||
       document.querySelector(".sidebar-button.rotated")) {
     await hide_sidebar();
-    chat.classList.remove("hidden");
+    document.body.classList.remove('mobile-sidebar-open');
     sidebar_buttons.forEach(btn => btn.classList.remove("rotated"));
-  } else {
+    } else {
     await show_menu();
+        document.body.classList.add('mobile-sidebar-open');
   }
   window.scrollTo(0, 0);
 };