sidebar

frontend/app/projects/[id]/main.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Sidebar from "./sidebar";
+
+export default function Main() {
+  return (
+    <Sidebar>
+      {/* ここにページの内容を配置 */}
+      <div className="p-4">
+        <h1 className="text-2xl font-bold">Main Content</h1>
+        <p>This is the main content of the page.</p>
+      </div>
+    </Sidebar>
+  );
+}

frontend/app/projects/[id]/page.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
+import Main from "./main";
 
 /**
  * fetch folder records
@@ -48,8 +49,8 @@ export default function Page({ params }: { params: { id: string } }) {
   }, []);
 
   return (
-    <div>
-      <div>Project: {params.id}</div>
+    <>
+      {/* <div>Project: {params.id}</div>
       <div className="flex flex-wrap gap-4 mt-5">
         {folders.map((folder, index) => (
           <div key={index}>
@@ -58,7 +59,8 @@ export default function Page({ params }: { params: { id: string } }) {
             <div>{folder.projectId}</div>
           </div>
         ))}
-      </div>
-    </div>
+      </div> */}
+      <Main />
+    </>
   );
 }

frontend/app/projects/[id]/sidebar.tsx

@@ -0,0 +1,16 @@
+import { Menu, MenuItem } from "@nextui-org/react";
+
+export default function Sidebar({ children }) {
+  return (
+    <div className="flex">
+      <div className="w-64 bg-white rounded-lg m-2">
+        <Menu openMode="multiple" aria-label="Main Menu">
+          <MenuItem>Menu Item 1</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+          <MenuItem>Menu Item 3</MenuItem>
+        </Menu>
+      </div>
+      <div className="flex-grow bg-white rounded-lg m-2">{children}</div>
+    </div>
+  );
+}