From a0e70451cbdc71fafa5defdf4aee21ef5a575332 Mon Sep 17 00:00:00 2001
From: giuliohome <giuliohome@users.noreply.github.com>
Date: Fri, 1 Sep 2023 15:32:04 +0000
Subject: [PATCH 1/2] AzureChatGPT Mobile View

---
 src/features/chat/chat-menu/chat-menu.tsx | 56 +++++++++++++++++------
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/features/chat/chat-menu/chat-menu.tsx b/src/features/chat/chat-menu/chat-menu.tsx
index adb8fca5..1746d148 100644
--- a/src/features/chat/chat-menu/chat-menu.tsx
+++ b/src/features/chat/chat-menu/chat-menu.tsx
@@ -1,25 +1,51 @@
+'use client'
+
+import { useState, useEffect } from 'react';
 import { Menu, MenuContent, MenuFooter, MenuHeader } from "@/components/menu";
 import { FindAllChatThreadForCurrentUser } from "@/features/chat/chat-services/chat-thread-service";
 import { ThemeToggle } from "@/features/theme/theme-toggle";
 import { MenuItems } from "./menu-items";
 import { NewChat } from "./new-chat";
+import { ChatThreadModel } from '../chat-services/models';
+import { Button } from '@/components/ui/button';
+
+export const ChatMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  //const items = await FindAllChatThreadForCurrentUser();
+  const [items, setItems] = useState<ChatThreadModel[]>([]);
+
+  // Fetch data when the component mounts
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await FindAllChatThreadForCurrentUser();
+      setItems(data);
+    };
 
-export const ChatMenu = async () => {
-  const items = await FindAllChatThreadForCurrentUser();
+    fetchData();
+  }, []);
 
   return (
-    <Menu>
-      <MenuHeader className="justify-end">
-        <NewChat />
-      </MenuHeader>
-      <MenuContent>
-        <MenuItems menuItems={items} />
-      </MenuContent>
-      <MenuFooter>
-        <div className="flex flex-col gap-3">
-          <ThemeToggle />
-        </div>
-      </MenuFooter>
-    </Menu>
+    <div>
+      <Button size={"icon"} onClick={() => setIsOpen(!isOpen)} >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </Button>
+      {isOpen ? 
+        <Menu>
+        <MenuHeader className="justify-end">
+            <NewChat />
+        </MenuHeader>
+        <MenuContent>
+          <MenuItems menuItems={isOpen ? items: []} />
+        </MenuContent>
+        <MenuFooter>
+          <div className="flex flex-col gap-3">
+            <ThemeToggle />
+          </div>
+        </MenuFooter>
+        </Menu> 
+      : ''}
+    </div>
   );
 };

From d6b9219d9075c6ca9dd21fce692b14a67f57028e Mon Sep 17 00:00:00 2001
From: giuliohome <giuliohome@users.noreply.github.com>
Date: Fri, 1 Sep 2023 19:54:21 +0000
Subject: [PATCH 2/2] The menu narrows further when collapsed.

---
 src/app/chat/context.tsx                  | 16 ++++++++++++++++
 src/app/chat/layout.tsx                   |  7 ++++---
 src/features/chat/chat-menu/chat-menu.tsx | 17 ++++++++++-------
 src/features/menu/menu.tsx                | 13 +++++++++----
 4 files changed, 39 insertions(+), 14 deletions(-)
 create mode 100644 src/app/chat/context.tsx

diff --git a/src/app/chat/context.tsx b/src/app/chat/context.tsx
new file mode 100644
index 00000000..61e0f0bb
--- /dev/null
+++ b/src/app/chat/context.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { useState } from 'react';
+
+import { ChatMenu } from "@/features/chat/chat-menu/chat-menu";
+import { MainMenu } from "@/features/menu/menu";
+
+export const Context = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <>
+            <MainMenu isOpen={isOpen} setIsOpen={setIsOpen} />
+            <ChatMenu isOpen={isOpen} setIsOpen={setIsOpen} />
+        </>
+    )
+}
diff --git a/src/app/chat/layout.tsx b/src/app/chat/layout.tsx
index 2f17b157..2aebdca1 100644
--- a/src/app/chat/layout.tsx
+++ b/src/app/chat/layout.tsx
@@ -1,6 +1,7 @@
 import { ProtectedPage } from "@/features/auth/protected-page";
 import { ChatMenu } from "@/features/chat/chat-menu/chat-menu";
 import { MainMenu } from "@/features/menu/menu";
+import { Context } from "./context";
 import { AI_NAME } from "@/features/theme/customise";
 
 export const metadata = {
@@ -8,15 +9,15 @@ export const metadata = {
   description: AI_NAME,
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+
   return (
     <ProtectedPage>
-      <MainMenu />
-      <ChatMenu />
+      <Context/>
       <div className="flex-1">{children}</div>
     </ProtectedPage>
   );
diff --git a/src/features/chat/chat-menu/chat-menu.tsx b/src/features/chat/chat-menu/chat-menu.tsx
index 1746d148..fa387739 100644
--- a/src/features/chat/chat-menu/chat-menu.tsx
+++ b/src/features/chat/chat-menu/chat-menu.tsx
@@ -9,9 +9,12 @@ import { NewChat } from "./new-chat";
 import { ChatThreadModel } from '../chat-services/models';
 import { Button } from '@/components/ui/button';
 
-export const ChatMenu = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  //const items = await FindAllChatThreadForCurrentUser();
+interface Prop {
+  isOpen: boolean;
+  setIsOpen: Function;
+}
+
+export const ChatMenu = (prop:Prop) => { 
   const [items, setItems] = useState<ChatThreadModel[]>([]);
 
   // Fetch data when the component mounts
@@ -26,18 +29,18 @@ export const ChatMenu = () => {
 
   return (
     <div>
-      <Button size={"icon"} onClick={() => setIsOpen(!isOpen)} >
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <Button size={"icon"} onClick={() => prop.setIsOpen(!prop.isOpen)} >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"  width="12" height="12" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
         </svg>
       </Button>
-      {isOpen ? 
+      {prop.isOpen ? 
         <Menu>
         <MenuHeader className="justify-end">
             <NewChat />
         </MenuHeader>
         <MenuContent>
-          <MenuItems menuItems={isOpen ? items: []} />
+          <MenuItems menuItems={items} />
         </MenuContent>
         <MenuFooter>
           <div className="flex flex-col gap-3">
diff --git a/src/features/menu/menu.tsx b/src/features/menu/menu.tsx
index a6d73708..82d87c13 100644
--- a/src/features/menu/menu.tsx
+++ b/src/features/menu/menu.tsx
@@ -3,10 +3,15 @@ import { BarChartHorizontalBig } from "lucide-react";
 import Link from "next/link";
 import { UserProfile } from "../user-profile";
 
-export const MainMenu = () => {
+interface Prop {
+  isOpen: boolean;
+  setIsOpen: Function;
+}
+
+export const MainMenu = (prop: Prop) => {
   return (
     <div className="flex gap-2 flex-col justify-between">
-      <div className="flex gap-2 flex-col justify-between">
+      {prop.isOpen ? <div className="flex gap-2 flex-col justify-between">
         <Link
           href="/"
           className="w-10 h-10 items-center justify-center flex"
@@ -23,8 +28,8 @@ export const MainMenu = () => {
         >
           <BarChartHorizontalBig size={20} />
         </Link>
-      </div>
-      <UserProfile />
+      </div> : ''}
+      {prop.isOpen ? <UserProfile /> : ''}
     </div>
   );
 };