sidebar

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

@@ -0,0 +1,7 @@
+export default function ProjectsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

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

@@ -1,14 +1,11 @@
 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 className="flex">
+      <div className="flex-grow bg-white rounded-lg m-2">
+        aaa
       </div>
-    </Sidebar>
+    </div>
   );
 }

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
 import Main from "./main";
+import Sidebar from "./sidebar";
 
 /**
  * fetch folder records
@@ -60,7 +61,10 @@ export default function Page({ params }: { params: { id: string } }) {
           </div>
         ))}
       </div> */}
-      <Main />
+      <div className="flex border-t-1 min-h-screen">
+        <Sidebar />
+        <Main />
+      </div>
     </>
   );
 }

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

@@ -1,16 +1,20 @@
 import { Menu, MenuItem } from "@nextui-org/react";
+import { HomeIcon, PagesIcon, PlayIcon } from "@/components/icons";
 
-export default function Sidebar({ children }) {
+export default function Sidebar() {
   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 className="w-64 bg-white border-r-1">
+      <Menu aria-label="sidebar">
+        <MenuItem startContent={<HomeIcon size={28} />} className="p-3">
+          Home
+        </MenuItem>
+        <MenuItem startContent={<PagesIcon size={28} />} className="p-3">
+          Test Cases
+        </MenuItem>
+        <MenuItem startContent={<PlayIcon size={28} />} className="p-3">
+          Test Runs
+        </MenuItem>
+      </Menu>
     </div>
   );
 }