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,9 +66,16 @@ 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">
+        <label htmlFor="connection-drawer" className="drawer-overlay"></label>
+        <div className="w-80 h-full 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">
               {connectionList.map((connection) => (
@@ -130,7 +138,7 @@ const ConnectionSidebar = () => {
                 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)}
+                onClick={() => handleChatSelect(chat)}
               >
                 {chat.id === chatStore.currentChat?.id ? (
                   <Icon.Io5.IoChatbubble className="w-5 h-auto mr-2 shrink-0" />
@@ -148,6 +156,7 @@ const ConnectionSidebar = () => {
               New Chat
             </button>
           </div>
+        </div>
       </aside>
 
       {createPortal(

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,
+      }));
+    }
+  },
+}));