toggle sidebar

README.md

@@ -27,6 +27,7 @@ Expect frequent improvements.
 
 - [x] Markdown support (3/17/23)
 - [x] Code syntax highlighting (3/18/23)
+- [x] Toggle sidebar (3/18/23)
 
 ## Modifications
 

components/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Conversation } from "@/types";
-import { IconPlus } from "@tabler/icons-react";
+import { IconArrowBarLeft, IconPlus } from "@tabler/icons-react";
 import { FC } from "react";
 import { Conversations } from "./Conversations";
 import { SidebarSettings } from "./SidebarSettings";
@@ -13,14 +13,15 @@ interface Props {
   onToggleLightMode: (mode: "light" | "dark") => void;
   onSelectConversation: (conversation: Conversation) => void;
   onDeleteConversation: (conversation: Conversation) => void;
+  onToggleSidebar: () => void;
 }
 
-export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selectedConversation, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation }) => {
+export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selectedConversation, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation, onToggleSidebar }) => {
   return (
     <div className="flex flex-col bg-[#202123] min-w-[260px]">
-      <div className="flex items-center justify-center h-[60px]">
+      <div className="flex items-center h-[60px] pl-4">
         <button
-          className="flex items-center w-[240px] h-[40px] rounded-lg bg-[#202123] border border-neutral-600 text-sm hover:bg-neutral-700"
+          className="flex items-center w-[190px] h-[40px] rounded-lg bg-[#202123] border border-neutral-600 text-sm hover:bg-neutral-700"
           onClick={onNewConversation}
         >
           <IconPlus
@@ -29,6 +30,11 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
           />
           New chat
         </button>
+
+        <IconArrowBarLeft
+          className="ml-auto mr-4 text-neutral-300 cursor-pointer hover:text-neutral-400"
+          onClick={onToggleSidebar}
+        />
       </div>
 
       <div className="flex-1 mx-auto pb-2 overflow-auto">

pages/index.tsx

@@ -1,6 +1,7 @@
 import { Chat } from "@/components/Chat/Chat";
 import { Sidebar } from "@/components/Sidebar/Sidebar";
 import { Conversation, Message, OpenAIModel } from "@/types";
+import { IconArrowBarRight } from "@tabler/icons-react";
 import Head from "next/head";
 import { useEffect, useState } from "react";
 
@@ -11,6 +12,7 @@ export default function Home() {
   const [model, setModel] = useState<OpenAIModel>(OpenAIModel.GPT_3_5);
   const [lightMode, setLightMode] = useState<"dark" | "light">("dark");
   const [disabled, setDisabled] = useState<boolean>(false);
+  const [showSidebar, setShowSidebar] = useState<boolean>(true);
 
   const handleSend = async (message: Message) => {
     if (selectedConversation) {
@@ -205,16 +207,24 @@ export default function Home() {
 
       {selectedConversation && (
         <div className={`flex h-screen text-white ${lightMode}`}>
-          <Sidebar
-            loading={disabled}
-            conversations={conversations}
-            lightMode={lightMode}
-            selectedConversation={selectedConversation}
-            onToggleLightMode={handleLightMode}
-            onNewConversation={handleNewConversation}
-            onSelectConversation={handleSelectConversation}
-            onDeleteConversation={handleDeleteConversation}
-          />
+          {showSidebar ? (
+            <Sidebar
+              loading={disabled}
+              conversations={conversations}
+              lightMode={lightMode}
+              selectedConversation={selectedConversation}
+              onToggleLightMode={handleLightMode}
+              onNewConversation={handleNewConversation}
+              onSelectConversation={handleSelectConversation}
+              onDeleteConversation={handleDeleteConversation}
+              onToggleSidebar={() => setShowSidebar(!showSidebar)}
+            />
+          ) : (
+            <IconArrowBarRight
+              className="absolute top-4 left-4 text-black dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300"
+              onClick={() => setShowSidebar(!showSidebar)}
+            />
+          )}
 
           <div className="flex flex-col w-full h-full dark:bg-[#343541]">
             <Chat