chore: update responsible connection sidebar style

src/components/ConnectionSidebar.tsx

@@ -1,8 +1,9 @@
+import { Drawer } from "@mui/material";
 import { head } from "lodash-es";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { useConversationStore, useConnectionStore, useLayoutStore } from "@/store";
+import { useConversationStore, useConnectionStore, useLayoutStore, ResponsiveWidth } from "@/store";
 import { Conversation, Connection } from "@/types";
 import Select from "./kit/Select";
 import Icon from "./Icon";
@@ -40,6 +41,25 @@ const ConnectionSidebar = () => {
       conversation.databaseName === currentConnectionCtx?.database?.name
   );
 
+  useEffect(() => {
+    const handleWindowResize = () => {
+      if (window.innerWidth < ResponsiveWidth.sm) {
+        layoutStore.toggleSidebar(false);
+        layoutStore.setIsMobileView(true);
+      } else {
+        layoutStore.toggleSidebar(true);
+        layoutStore.setIsMobileView(false);
+      }
+    };
+
+    handleWindowResize();
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
   useEffect(() => {
     if (currentConnectionCtx?.connection) {
       setIsRequestingDatabase(true);
@@ -112,7 +132,9 @@ const ConnectionSidebar = () => {
 
   const handleConversationSelect = (conversation: Conversation) => {
     conversationStore.setCurrentConversation(conversation);
-    layoutStore.toggleSidebar(false);
+    if (layoutStore.isMobileView) {
+      layoutStore.toggleSidebar(false);
+    }
   };
 
   const handleEditConversationTitle = (conversation: Conversation) => {
@@ -132,8 +154,11 @@ const ConnectionSidebar = () => {
 
   return (
     <>
-      <aside className="drawer-side">
-        <label htmlFor="connection-drawer" className="drawer-overlay"></label>
+      <Drawer
+        variant={layoutStore.isMobileView ? "temporary" : "persistent"}
+        open={layoutStore.showSidebar}
+        onClose={() => layoutStore.toggleSidebar(false)}
+      >
         <div className="w-80 h-full overflow-y-hidden border-r flex flex-row justify-start items-start">
           <div className="w-16 h-full bg-gray-200 pl-2 py-4 pt-6 flex flex-col justify-between items-center">
             <div className="w-full flex flex-col justify-start items-start">
@@ -258,7 +283,7 @@ const ConnectionSidebar = () => {
             </div>
           </div>
         </div>
-      </aside>
+      </Drawer>
 
       {createPortal(
         <CreateConnectionModal

src/components/ConversationView/Header.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useConversationStore } from "@/store";
+import { useConversationStore, useLayoutStore } from "@/store";
 import Icon from "../Icon";
 import GitHubStarBadge from "../GitHubStarBadge";
 
@@ -9,6 +9,7 @@ interface Props {
 
 const Header = (props: Props) => {
   const { className } = props;
+  const layoutStore = useLayoutStore();
   const conversationStore = useConversationStore();
   const currentConversation = conversationStore.currentConversation;
   const title = currentConversation?.title || "SQL Chat";
@@ -24,9 +25,12 @@ const Header = (props: Props) => {
       } w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-1 border-b z-1 transition-all duration-300`}
     >
       <div className="ml-2 flex justify-start items-center">
-        <label htmlFor="connection-drawer" className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100">
+        <button
+          className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100"
+          onClick={() => layoutStore.toggleSidebar()}
+        >
           <Icon.IoIosMenu className="text-gray-600 w-full h-auto" />
-        </label>
+        </button>
         <span className="w-auto text-left block lg:hidden">{title}</span>
         <GitHubStarBadge className="hidden lg:flex ml-2" />
       </div>

src/components/ConversationView/index.tsx

@@ -8,6 +8,7 @@ import {
   useMessageStore,
   useConnectionStore,
   useSettingStore,
+  useLayoutStore,
 } from "@/store";
 import { CreatorRole, Message } from "@/types";
 import { countTextTokens, generateUUID } from "@/utils";
@@ -23,6 +24,7 @@ const MAX_TOKENS = 4000;
 
 const ConversationView = () => {
   const settingStore = useSettingStore();
+  const layoutStore = useLayoutStore();
   const connectionStore = useConnectionStore();
   const conversationStore = useConversationStore();
   const messageStore = useMessageStore();
@@ -207,9 +209,11 @@ const ConversationView = () => {
   };
 
   return (
-    <main
+    <div
       ref={conversationViewRef}
-      className="drawer-content relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white"
+      className={`${
+        layoutStore.showSidebar && "sm:pl-80"
+      } relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white transition-all duration-300`}
     >
       <div className="sticky top-0 z-1 bg-white w-full flex flex-col justify-start items-start">
         <DataStorageBanner />
@@ -225,7 +229,7 @@ const ConversationView = () => {
       <div className="sticky bottom-0 w-full max-w-4xl py-2 px-4 sm:px-8 mx-auto bg-white bg-opacity-80 backdrop-blur">
         <MessageTextarea disabled={lastMessage?.status === "LOADING"} sendMessage={sendMessageToCurrentConversation} />
       </div>
-    </main>
+    </div>
   );
 };