feat: implement responsive sidebar

components/ChatView/Header.tsx

@@ -12,15 +12,18 @@ const Header = () => {
   }, [title]);
 
   return (
-    <div className="sticky top-0 w-full grid grid-cols-3 py-2 border-b bg-white">
+    <div className="sticky top-0 w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-2 border-b bg-white">
-      <div className="ml-4 relative flex justify-center">
+      <div className="ml-2 flex justify-center items-center">
-        <Icon.Io.IoIosMenu className="text-gray-600 w-5 h-auto block sm:hidden" />
+        <label htmlFor="connection-drawer" className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100">
+          <Icon.Io.IoIosMenu className="text-gray-600 w-full h-auto" />
+        </label>
+        <span className="w-auto text-left block lg:hidden">{title}</span>
       </div>
-      <span className="w-auto text-center">{title}</span>
+      <span className="w-auto text-center h-8 p-1 hidden lg:block">{title}</span>
-      <div className="sm:mr-4 relative flex flex-row justify-end items-center">
+      <div className="mr-2 sm:mr-4 relative flex flex-row justify-end items-center">
         <a
           href="https://www.bytebase.com?source=sqlchat"
-          className="flex flex-row justify-center items-center px-2 py-1 rounded-md hover:bg-gray-100 hover:shadow"
+          className="flex flex-row justify-center items-center px-2 py-1 rounded-md whitespace-nowrap hover:bg-gray-100 hover:shadow"
           target="_blank"
         >
           <span className="text-sm text-gray-600 hidden sm:block">Crafted by</span>

components/ChatView/index.tsx

@@ -110,7 +110,10 @@ const ChatView = () => {
   };
 
   return (
-    <main ref={chatViewRef} className="relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white">
+    <main
+      ref={chatViewRef}
+      className="drawer-content relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white"
+    >
       <Header />
       <div className="p-2 w-full h-auto grow max-w-3xl py-1 px-4 sm:px-8 mx-auto">
         {messageList.length === 0 ? (

components/ConnectionSidebar.tsx

@@ -1,8 +1,8 @@
 import { head } from "lodash-es";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { createPortal } from "react-dom";
-import { useChatStore, useConnectionStore } from "@/store";
+import { useChatStore, useConnectionStore, useLayoutStore } from "@/store";
-import { Connection } from "@/types";
+import { Chat, Connection } from "@/types";
 import Icon from "./Icon";
 import EngineIcon from "./EngineIcon";
 import CreateConnectionModal from "./CreateConnectionModal";
@@ -14,6 +14,7 @@ interface State {
 }
 
 const ConnectionSidebar = () => {
+  const layoutStore = useLayoutStore();
   const connectionStore = useConnectionStore();
   const chatStore = useChatStore();
   const [state, setState] = useState<State>({
@@ -65,88 +66,96 @@ const ConnectionSidebar = () => {
     }
   };
 
+  const handleChatSelect = (chat: Chat) => {
+    chatStore.setCurrentChat(chat);
+    layoutStore.toggleSidebar(false);
+  };
+
   return (
     <>
-      <aside className="w-80 h-full flex flex-row justify-start items-start border-r">
+      <aside className="drawer-side">
-        <div className="w-16 h-full bg-gray-200 pl-2 py-4 pt-6 flex flex-col justify-between items-center">
+        <label htmlFor="connection-drawer" className="drawer-overlay"></label>
-          <div className="w-full flex flex-col justify-start items-start">
+        <div className="w-80 h-full border-r flex flex-row justify-start items-start">
-            {connectionList.map((connection) => (
+          <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">
+              {connectionList.map((connection) => (
+                <button
+                  key={connection.id}
+                  className={`w-full h-14 rounded-l-lg p-2 mt-2 ${
+                    currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 shadow"
+                  }`}
+                  onClick={() => handleConnectionSelect(connection)}
+                >
+                  <EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto" />
+                </button>
+              ))}
               <button
-                key={connection.id}
+                className="tooltip tooltip-right w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 rounded-full text-gray-500 cursor-pointer"
-                className={`w-full h-14 rounded-l-lg p-2 mt-2 ${
+                data-tip="Create Connection"
-                  currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 shadow"
+                onClick={() => toggleCreateConnectionModal(true)}
-                }`}
-                onClick={() => handleConnectionSelect(connection)}
               >
-                <EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto" />
+                <Icon.Ai.AiOutlinePlus className="w-auto h-full mx-auto" />
               </button>
+            </div>
+            <div className="w-full flex flex-col justify-end items-center">
+              <button
+                className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
+                data-tip="Setting"
+                onClick={() => toggleSettingModal(true)}
+              >
+                <Icon.Io.IoMdSettings className="text-gray-600 w-6 h-auto" />
+              </button>
+              <a
+                className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
+                href="https://github.com/bytebase/sqlchat"
+                data-tip="GitHub"
+                target="_blank"
+              >
+                <Icon.Io.IoLogoGithub className="text-gray-600 w-6 h-auto" />
+              </a>
+            </div>
+          </div>
+          <div className={`w-64 h-full overflow-y-auto bg-gray-100 px-4 pt-2 ${databaseList.length === 0 && "!pt-4"}`}>
+            {databaseList.length > 0 && (
+              <div className="w-full sticky top-0 bg-gray-100 z-1 mb-4">
+                <p className="text-sm leading-6 mb-1 text-gray-500">Select your database:</p>
+                <select
+                  className="w-full select select-bordered"
+                  value={currentConnectionCtx?.database?.name}
+                  onChange={(e) => handleDatabaseNameSelect(e.target.value)}
+                >
+                  {databaseList.map((database) => (
+                    <option key={database.name} value={database.name}>
+                      {database.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+            {chatList.map((chat) => (
+              <div
+                key={chat.id}
+                className={`w-full max-w-full mt-2 first:mt-4 py-3 px-4 rounded-lg flex flex-row justify-start items-center cursor-pointer border border-transparent hover:bg-gray-50 ${
+                  chat.id === chatStore.currentChat?.id && "!bg-white border-gray-200 font-medium"
+                }`}
+                onClick={() => handleChatSelect(chat)}
+              >
+                {chat.id === chatStore.currentChat?.id ? (
+                  <Icon.Io5.IoChatbubble className="w-5 h-auto mr-2 shrink-0" />
+                ) : (
+                  <Icon.Io5.IoChatbubbleOutline className="w-5 h-auto mr-2 opacity-80 shrink-0" />
+                )}
+                <span className="truncate">{chat.title || "SQL Chat"}</span>
+              </div>
             ))}
             <button
-              className="tooltip tooltip-right w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 rounded-full text-gray-500 cursor-pointer"
+              className="w-full my-4 py-3 px-4 border rounded-lg flex flex-row justify-center items-center text-gray-500 hover:text-gray-700 hover:bg-gray-50"
-              data-tip="Create Connection"
+              onClick={handleCreateChat}
-              onClick={() => toggleCreateConnectionModal(true)}
             >
-              <Icon.Ai.AiOutlinePlus className="w-auto h-full mx-auto" />
+              <Icon.Ai.AiOutlinePlus className="w-5 h-auto mr-1" />
+              New Chat
             </button>
           </div>
-          <div className="w-full flex flex-col justify-end items-center">
-            <button
-              className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
-              data-tip="Setting"
-              onClick={() => toggleSettingModal(true)}
-            >
-              <Icon.Io.IoMdSettings className="text-gray-600 w-6 h-auto" />
-            </button>
-            <a
-              className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
-              href="https://github.com/bytebase/sqlchat"
-              data-tip="GitHub"
-              target="_blank"
-            >
-              <Icon.Io.IoLogoGithub className="text-gray-600 w-6 h-auto" />
-            </a>
-          </div>
-        </div>
-        <div className={`w-64 h-full overflow-y-auto bg-gray-100 px-4 pt-2 ${databaseList.length === 0 && "!pt-4"}`}>
-          {databaseList.length > 0 && (
-            <div className="w-full sticky top-0 bg-gray-100 z-1 mb-4">
-              <p className="text-sm leading-6 mb-1 text-gray-500">Select your database:</p>
-              <select
-                className="w-full select select-bordered"
-                value={currentConnectionCtx?.database?.name}
-                onChange={(e) => handleDatabaseNameSelect(e.target.value)}
-              >
-                {databaseList.map((database) => (
-                  <option key={database.name} value={database.name}>
-                    {database.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-          {chatList.map((chat) => (
-            <div
-              key={chat.id}
-              className={`w-full max-w-full mt-2 first:mt-4 py-3 px-4 rounded-lg flex flex-row justify-start items-center cursor-pointer border border-transparent hover:bg-gray-50 ${
-                chat.id === chatStore.currentChat?.id && "!bg-white border-gray-200 font-medium"
-              }`}
-              onClick={() => chatStore.setCurrentChat(chat)}
-            >
-              {chat.id === chatStore.currentChat?.id ? (
-                <Icon.Io5.IoChatbubble className="w-5 h-auto mr-2 shrink-0" />
-              ) : (
-                <Icon.Io5.IoChatbubbleOutline className="w-5 h-auto mr-2 opacity-80 shrink-0" />
-              )}
-              <span className="truncate">{chat.title || "SQL Chat"}</span>
-            </div>
-          ))}
-          <button
-            className="w-full my-4 py-3 px-4 border rounded-lg flex flex-row justify-center items-center text-gray-500 hover:text-gray-700 hover:bg-gray-50"
-            onClick={handleCreateChat}
-          >
-            <Icon.Ai.AiOutlinePlus className="w-5 h-auto mr-1" />
-            New Chat
-          </button>
         </div>
       </aside>
 

pages/index.tsx

@@ -1,7 +1,8 @@
 import { NextPage } from "next";
 import Head from "next/head";
-import React from "react";
 import dynamic from "next/dynamic";
+import React, { useEffect } from "react";
+import { ResponsiveWidth, useLayoutStore } from "@/store";
 
 // Use dynamic import to avoid page hydrated.
 // reference: https://github.com/pmndrs/zustand/issues/1145#issuecomment-1316431268
@@ -13,6 +14,25 @@ const ChatView = dynamic(() => import("@/components/ChatView"), {
 });
 
 const ChatPage: NextPage = () => {
+  const layoutStore = useLayoutStore();
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      if (window.innerWidth < ResponsiveWidth.lg) {
+        layoutStore.toggleSidebar(false);
+      } else {
+        layoutStore.toggleSidebar(true);
+      }
+    };
+
+    handleWindowResize();
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
   return (
     <div>
       <Head>
@@ -21,9 +41,16 @@ const ChatPage: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="w-full h-full flex flex-row justify-start items-start">
+      <main className="drawer drawer-mobile w-full h-full">
-        <ConnectionSidebar />
+        <input
+          id="connection-drawer"
+          type="checkbox"
+          className="drawer-toggle"
+          checked={layoutStore.showSidebar}
+          onChange={(e) => layoutStore.toggleSidebar(e.target.checked)}
+        />
         <ChatView />
+        <ConnectionSidebar />
       </main>
     </div>
   );

store/index.ts

@@ -3,3 +3,4 @@ export * from "./assistant";
 export * from "./connection";
 export * from "./chat";
 export * from "./message";
+export * from "./layout";

store/layout.ts

@@ -0,0 +1,30 @@
+import { isUndefined } from "lodash-es";
+import { create } from "zustand";
+
+// reference: https://tailwindcss.com/docs/responsive-design
+export enum ResponsiveWidth {
+  sm = 640,
+  lg = 1024,
+}
+
+interface LayoutState {
+  showSidebar: boolean;
+  toggleSidebar: (show?: boolean) => void;
+}
+
+export const useLayoutStore = create<LayoutState>()((set, get) => ({
+  showSidebar: true,
+  toggleSidebar: (show) => {
+    if (isUndefined(show)) {
+      set((state) => ({
+        ...state,
+        showSidebar: !state.showSidebar,
+      }));
+    } else {
+      set((state) => ({
+        ...state,
+        showSidebar: show,
+      }));
+    }
+  },
+}));