Merge pull request #191 from microsoft/add-collapsible-menu

Add collapsible menu

Author: davidxw

images/architecture.png

@@ -1,4 +1,5 @@
 import { ChatMenu } from "@/features/chat/chat-menu/chat-menu";
+import { ChatMenuContainer } from "@/features/chat/chat-menu/chat-menu-container";
 import { MainMenu } from "@/features/menu/menu";
 import { AI_NAME } from "@/features/theme/customise";
 
@@ -16,7 +17,10 @@ export default async function RootLayout({
     <>
       <MainMenu />
       <div className="flex-1 flex rounded-md overflow-hidden bg-card/70">
-        <ChatMenu /> {children}
+        <ChatMenuContainer>
+          <ChatMenu />
+        </ChatMenuContainer>
+        {children}
       </div>
     </>
   );

src/app/chat/layout.tsx

@@ -1,14 +1,7 @@
 import { Card } from "@/components/ui/card";
-import { FindAllChatThreadForCurrentUser } from "@/features/chat/chat-services/chat-thread-service";
 import { StartNewChat } from "@/features/chat/chat-ui/start-new-chat";
-import { redirect } from "next/navigation";
 
 export default async function Home() {
-  const chats = await FindAllChatThreadForCurrentUser();
-  if (chats.length > 0) {
-    redirect(`/chat/${chats[0].id}`);
-  }
-
   return (
     <Card className="h-full items-center flex justify-center flex-1">
       <StartNewChat />

src/app/chat/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { useMenuContext } from "@/features/menu/menu-context";
+
+export const ChatMenuContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { isMenuOpen } = useMenuContext();
+  return <>{isMenuOpen ? children : null}</>;
+};

src/features/chat/chat-menu/chat-menu-container.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useState } from "react";
+
+interface MenuContextProps {
+  isMenuOpen: boolean;
+  toggleMenu: () => void;
+}
+
+export const MenuContext = createContext<MenuContextProps>({
+  isMenuOpen: true,
+  toggleMenu: () => {},
+});
+
+export const MenuProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(true);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <MenuContext.Provider value={{ isMenuOpen, toggleMenu }}>
+      {children}
+    </MenuContext.Provider>
+  );
+};
+
+export const useMenuContext = () => React.useContext(MenuContext);

src/features/menu/menu-context.tsx

@@ -1,19 +1,33 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { LayoutDashboard, MessageCircle } from "lucide-react";
+import {
+  LayoutDashboard,
+  MessageCircle,
+  PanelLeftClose,
+  PanelRightClose,
+} from "lucide-react";
 import Link from "next/link";
 import { ThemeToggle } from "../theme/theme-toggle";
 import { UserProfile } from "../user-profile";
 
 import { useSession } from "next-auth/react";
+import { useMenuContext } from "./menu-context";
 
 export const MainMenu = () => {
   const { data: session } = useSession();
+  const { isMenuOpen, toggleMenu } = useMenuContext();
   return (
     <div className="flex flex-col justify-between p-2">
-      <div className="flex gap-2 flex-col items-center">
-      <Button
+      <div className="flex gap-2  flex-col  items-center">
+        <Button
+          onClick={toggleMenu}
+          className="rounded-full w-[40px] h-[40px] p-1 text-primary"
+          variant={"outline"}
+        >
+          {isMenuOpen ? <PanelLeftClose /> : <PanelRightClose />}
+        </Button>
+        <Button
           asChild
           className="rounded-full w-[40px] h-[40px] p-1 text-primary"
           variant={"outline"}
@@ -41,7 +55,9 @@ export const MainMenu = () => {
               <LayoutDashboard />
             </Link>
           </Button>
-        ) : (<></>)}
+        ) : (
+          <></>
+        )}
       </div>
       <div className="flex flex-col gap-2">
         <ThemeToggle />

src/features/menu/menu.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { SessionProvider } from "next-auth/react";
+import { MenuProvider } from "./menu/menu-context";
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {
-  return <SessionProvider>{children}</SessionProvider>;
+  return (
+    <SessionProvider>
+      <MenuProvider>{children}</MenuProvider>
+    </SessionProvider>
+  );
 };