Update chat-menu.tsx

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

@@ -1,46 +1,36 @@
-'use client'
-import { FC, useEffect, useState } 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 { 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 { useState } from "react";
 
-type Prop = {};
-
-export const ChatMenu: FC<Prop> = (prop) => {
+export const ChatMenu = () => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
   const [items, setItems] = useState([]);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      const data = await FindAllChatThreadForCurrentUser();
-      setItems(data);
-    };
-    fetchData();
-  }, []);
+  const toggleMenu = () => {
+    setIsCollapsed(!isCollapsed);
+  };
 
-  const [isOpen, setIsOpen] = useState(false);
+  FindAllChatThreadForCurrentUser().then((data) => {
+    setItems(data);
+  });
 
   return (
-    <div>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        {isOpen ? '-' : '+'}
-      </button>
-      {isOpen ? (
-        <Menu>
-          <MenuHeader className="justify-end">
-            <NewChat />
-          </MenuHeader>
-          <MenuContent>
-            <MenuItems menuItems={items} />
-          </MenuContent>
-          <MenuFooter>
-            <div className="flex flex-col gap-3">
-              <ThemeToggle />
-            </div>
-          </MenuFooter>
-        </Menu>
-      ) : null}
-    </div>
+    <Menu>
+      <MenuHeader className="justify-end">
+        <NewChat />
+      </MenuHeader>
+      <MenuContent>
+        {!isCollapsed && <MenuItems menuItems={items} />}
+      </MenuContent>
+      <MenuFooter>
+        <div className="flex flex-col gap-3">
+          <button onClick={toggleMenu}>Toggle Menu</button>
+          <ThemeToggle />
+        </div>
+      </MenuFooter>
+    </Menu>
   );
 };