From 2c0a4631bcfdd82b227a1c63ecac7076b2680352 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 17 Feb 2024 12:56:13 +0900
Subject: [PATCH] sidebar

---
 frontend/app/layout.tsx                |  4 +-
 frontend/app/projects/[id]/layout.tsx  |  7 ++
 frontend/app/projects/[id]/main.tsx    | 11 ++--
 frontend/app/projects/[id]/page.tsx    |  6 +-
 frontend/app/projects/[id]/sidebar.tsx | 24 ++++---
 frontend/app/projects/layout.tsx       |  8 +--
 frontend/app/projects/page.tsx         | 22 +++----
 frontend/app/projects/project-card.tsx |  4 +-
 frontend/components/icons.tsx          | 89 ++++++++++++++++++++------
 frontend/components/navbar.tsx         |  1 -
 10 files changed, 117 insertions(+), 59 deletions(-)
 create mode 100644 frontend/app/projects/[id]/layout.tsx

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index d2ef180..fbc2af9 100644
--- a/frontend/app/layout.tsx
+++ b/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
diff --git a/frontend/app/projects/[id]/layout.tsx b/frontend/app/projects/[id]/layout.tsx
new file mode 100644
index 0000000..7259ddf
--- /dev/null
+++ b/frontend/app/projects/[id]/layout.tsx
@@ -0,0 +1,7 @@
+export default function ProjectsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
diff --git a/frontend/app/projects/[id]/main.tsx b/frontend/app/projects/[id]/main.tsx
index 1bea9bb..31053cf 100644
--- a/frontend/app/projects/[id]/main.tsx
+++ b/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>
   );
 }
diff --git a/frontend/app/projects/[id]/page.tsx b/frontend/app/projects/[id]/page.tsx
index 0ce80ea..f0490a0 100644
--- a/frontend/app/projects/[id]/page.tsx
+++ b/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>
     </>
   );
 }
diff --git a/frontend/app/projects/[id]/sidebar.tsx b/frontend/app/projects/[id]/sidebar.tsx
index f95a4af..cfb5811 100644
--- a/frontend/app/projects/[id]/sidebar.tsx
+++ b/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>
   );
 }
diff --git a/frontend/app/projects/layout.tsx b/frontend/app/projects/layout.tsx
index d956917..7259ddf 100644
--- a/frontend/app/projects/layout.tsx
+++ b/frontend/app/projects/layout.tsx
@@ -3,9 +3,5 @@ export default function ProjectsLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return (
-      <>
-      {children}
-      </>
-  );
-}
\ No newline at end of file
+  return <>{children}</>;
+}
diff --git a/frontend/app/projects/page.tsx b/frontend/app/projects/page.tsx
index b094408..8a4417b 100644
--- a/frontend/app/projects/page.tsx
+++ b/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>
   );
 }
diff --git a/frontend/app/projects/project-card.tsx b/frontend/app/projects/project-card.tsx
index ca6800f..e4b2ae9 100644
--- a/frontend/app/projects/project-card.tsx
+++ b/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}
diff --git a/frontend/components/icons.tsx b/frontend/components/icons.tsx
index 44e4c40..f381447 100644
--- a/frontend/components/icons.tsx
+++ b/frontend/components/icons.tsx
@@ -185,29 +185,82 @@ export const SearchIcon = (props: IconSvgProps) => (
   </svg>
 );
 
-export const NextUILogo: React.FC<IconSvgProps> = (props) => {
-  const { width, height = 40 } = props;
-
+export const HomeIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
   return (
     <svg
-      fill="none"
-      height={height}
-      viewBox="0 0 161 32"
-      width={width}
-      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 21 21"
+      fill="currentColor"
+      height={size || height}
+      width={size || height}
+      {...props}
+    >
+      <g
+        fill="none"
+        fillRule="evenodd"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M1.5 10.5l9-9 9 9" />
+        <path d="M3.5 8.5v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+      </g>
+    </svg>
+  );
+};
+
+export const PagesIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      viewBox="0 0 21 21"
+      fill="currentColor"
+      height={size || height}
+      width={size || height}
+      {...props}
+    >
+      <g
+        fill="none"
+        fillRule="evenodd"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M15.5 3.5h-7a2 2 0 00-2 2v9a2 2 0 002 2h7a2 2 0 002-2v-9a2 2 0 00-2-2z" />
+        <path d="M6.5 5.5a2 2 0 00-2 2v8a3 3 0 003 3h6a2 2 0 002-2" />
+      </g>
+    </svg>
+  );
+};
+
+export const PlayIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      height={size || height}
+      width={size || height}
       {...props}
     >
       <path
-        className="fill-black dark:fill-white"
-        d="M55.6827 5V26.6275H53.7794L41.1235 8.51665H40.9563V26.6275H39V5H40.89L53.5911 23.1323H53.7555V5H55.6827ZM67.4831 26.9663C66.1109 27.0019 64.7581 26.6329 63.5903 25.9044C62.4852 25.185 61.6054 24.1633 61.0537 22.9582C60.4354 21.5961 60.1298 20.1106 60.1598 18.6126C60.132 17.1113 60.4375 15.6228 61.0537 14.2563C61.5954 13.0511 62.4525 12.0179 63.5326 11.268C64.6166 10.5379 65.8958 10.16 67.1986 10.1852C68.0611 10.1837 68.9162 10.3468 69.7187 10.666C70.5398 10.9946 71.2829 11.4948 71.8992 12.1337C72.5764 12.8435 73.0985 13.6889 73.4318 14.6152C73.8311 15.7483 74.0226 16.9455 73.9968 18.1479V19.0773H63.2262V17.4194H72.0935C72.1083 16.4456 71.8952 15.4821 71.4714 14.6072C71.083 13.803 70.4874 13.1191 69.7472 12.6272C68.9887 12.1348 68.1022 11.8812 67.2006 11.8987C66.2411 11.8807 65.3005 12.1689 64.5128 12.7223C63.7332 13.2783 63.1083 14.0275 62.6984 14.8978C62.2582 15.8199 62.0314 16.831 62.0352 17.8546V18.8476C62.009 20.0078 62.2354 21.1595 62.6984 22.2217C63.1005 23.1349 63.7564 23.9108 64.5864 24.4554C65.4554 24.9973 66.4621 25.2717 67.4831 25.2448C68.1676 25.2588 68.848 25.1368 69.4859 24.8859C70.0301 24.6666 70.5242 24.3376 70.9382 23.919C71.3183 23.5345 71.6217 23.0799 71.8322 22.5799L73.5995 23.1604C73.3388 23.8697 72.9304 24.5143 72.4019 25.0506C71.8132 25.6529 71.1086 26.1269 70.3314 26.4434C69.4258 26.8068 68.4575 26.9846 67.4831 26.9663V26.9663ZM78.8233 10.4075L82.9655 17.325L87.1076 10.4075H89.2683L84.1008 18.5175L89.2683 26.6275H87.103L82.9608 19.9317L78.8193 26.6275H76.6647L81.7711 18.5169L76.6647 10.4062L78.8233 10.4075ZM99.5142 10.4075V12.0447H91.8413V10.4075H99.5142ZM94.2427 6.52397H96.1148V22.3931C96.086 22.9446 96.2051 23.4938 96.4597 23.9827C96.6652 24.344 96.9805 24.629 97.3589 24.7955C97.7328 24.9548 98.1349 25.0357 98.5407 25.0332C98.7508 25.0359 98.9607 25.02 99.168 24.9857C99.3422 24.954 99.4956 24.9205 99.6283 24.8853L100.026 26.5853C99.8062 26.6672 99.5805 26.7327 99.3511 26.7815C99.0274 26.847 98.6977 26.8771 98.3676 26.8712C97.6854 26.871 97.0119 26.7156 96.3973 26.4166C95.7683 26.1156 95.2317 25.6485 94.8442 25.0647C94.4214 24.4018 94.2097 23.6242 94.2374 22.8363L94.2427 6.52397ZM118.398 5H120.354V19.3204C120.376 20.7052 120.022 22.0697 119.328 23.2649C118.644 24.4235 117.658 25.3698 116.477 26.0001C115.168 26.6879 113.708 27.0311 112.232 26.9978C110.759 27.029 109.302 26.6835 107.996 25.9934C106.815 25.362 105.827 24.4161 105.141 23.2582C104.447 22.0651 104.092 20.7022 104.115 19.319V5H106.08V19.1831C106.061 20.2559 106.324 21.3147 106.843 22.2511C107.349 23.1459 108.094 23.8795 108.992 24.3683C109.993 24.9011 111.111 25.1664 112.242 25.139C113.373 25.1656 114.493 24.9003 115.495 24.3683C116.395 23.8815 117.14 23.1475 117.644 22.2511C118.16 21.3136 118.421 20.2553 118.402 19.1831L118.398 5ZM128 5V26.6275H126.041V5H128Z"
-      />
-      <path
-        className="fill-black dark:fill-white"
-        d="M23.5294 0H8.47059C3.79241 0 0 3.79241 0 8.47059V23.5294C0 28.2076 3.79241 32 8.47059 32H23.5294C28.2076 32 32 28.2076 32 23.5294V8.47059C32 3.79241 28.2076 0 23.5294 0Z"
-      />
-      <path
-        className="fill-white dark:fill-black"
-        d="M17.5667 9.21729H18.8111V18.2403C18.8255 19.1128 18.6 19.9726 18.159 20.7256C17.7241 21.4555 17.0968 22.0518 16.3458 22.4491C15.5717 22.8683 14.6722 23.0779 13.6473 23.0779C12.627 23.0779 11.7286 22.8672 10.9521 22.4457C10.2007 22.0478 9.5727 21.4518 9.13602 20.7223C8.6948 19.9705 8.4692 19.1118 8.48396 18.2403V9.21729H9.72854V18.1538C9.71656 18.8298 9.88417 19.4968 10.2143 20.0868C10.5362 20.6506 11.0099 21.1129 11.5814 21.421C12.1689 21.7448 12.8576 21.9067 13.6475 21.9067C14.4374 21.9067 15.1272 21.7448 15.7169 21.421C16.2895 21.1142 16.7635 20.6516 17.0844 20.0868C17.4124 19.4961 17.5788 18.8293 17.5667 18.1538V9.21729ZM23.6753 9.21729V22.845H22.4309V9.21729H23.6753Z"
+        fill="none"
+        stroke="currentColor"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+        d="M112 111v290c0 17.44 17 28.52 31 20.16l247.9-148.37c12.12-7.25 12.12-26.33 0-33.58L143 90.84c-14-8.36-31 2.72-31 20.16z"
       />
     </svg>
   );
diff --git a/frontend/components/navbar.tsx b/frontend/components/navbar.tsx
index 7dab529..358d203 100644
--- a/frontend/components/navbar.tsx
+++ b/frontend/components/navbar.tsx
@@ -14,7 +14,6 @@ import {
 
 import { siteConfig } from "@/config/site";
 import NextLink from "next/link";
-import clsx from "clsx";
 
 import { ThemeSwitch } from "@/components/theme-switch";
 import { GithubIcon, SearchIcon } from "@/components/icons";