sidebar

frontend/app/layout.tsx

@@ -40,9 +40,7 @@ export default function RootLayout({
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
           <div className="relative flex flex-col h-screen light:bg-gray-50 dark:bg-gray-900">
             <Navbar />
-            <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
-              {children}
-            </main>
+            <main>{children}</main>
             {/* <footer className="w-full flex items-center justify-center py-3">
               <Link
                 isExternal

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>
   );
 }

frontend/app/projects/layout.tsx

@@ -3,9 +3,5 @@ export default function ProjectsLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return (
-      <>
-      {children}
-      </>
-  );
-}
+  return <>{children}</>;
+}

frontend/app/projects/page.tsx

@@ -145,7 +145,7 @@ export default function ProjectsPage() {
   };
 
   return (
-    <div>
+    <div className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
       <div className="flex h-full items-center">
         <h1 className={title()}>Projects</h1>
         <Button color="primary" onClick={openModal} className="ms-5 mt-3">
@@ -153,6 +153,16 @@ export default function ProjectsPage() {
         </Button>
       </div>
 
+      <div className="flex flex-wrap items-stretch gap-4 mt-5">
+        {projects.map((project, index) => (
+          <ProjectCard
+            key={index}
+            projectName={project.name}
+            projectDetail={project.detail}
+          />
+        ))}
+      </div>
+
       <Modal isOpen={isCreateDialogOpen}>
         <ModalContent>
           <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
@@ -193,16 +203,6 @@ export default function ProjectsPage() {
           </ModalFooter>
         </ModalContent>
       </Modal>
-
-      <div className="flex flex-wrap gap-4 mt-5">
-        {projects.map((project, index) => (
-          <ProjectCard
-            key={index}
-            projectName={project.name}
-            projectDetail={project.detail}
-          />
-        ))}
-      </div>
     </div>
   );
 }

frontend/app/projects/project-card.tsx

@@ -11,8 +11,8 @@ import NextLink from "next/link";
 export function ProjectCard({ projectName, projectDetail }) {
   return (
     <NextLink href={`/projects/${1}`}>
-      <Card className="w-[250px] h-36 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800">
-        <CardHeader className="flex gap-3 h-16">
+      <Card className="w-[250px] bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800">
+        <CardHeader className="flex gap-3">
           <Image
             alt="nextui logo"
             height={40}