From c586ebd995f60213e17f904b0533d4aae5857622 Mon Sep 17 00:00:00 2001
From: Shugo Kawamura <shugo_k@flowing.tokyo>
Date: Sun, 13 Aug 2023 08:29:44 +0900
Subject: [PATCH] =?UTF-8?q?=E7=B0=A1=E6=98=93=E7=9A=84=E3=81=AA=E3=83=89?=
 =?UTF-8?q?=E3=83=AD=E3=83=AF=E3=83=BC=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/package.json       |  2 ++
 front/pnpm-lock.yaml     | 23 ++++++++++++++++
 front/src/app/layout.tsx |  4 +--
 front/src/app/page.tsx   | 58 +++++++++++++++++++++++++++++++++++++---
 4 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/front/package.json b/front/package.json
index 44f5968..6c8cc72 100644
--- a/front/package.json
+++ b/front/package.json
@@ -16,8 +16,10 @@
     "@emotion/styled": "^11.11.0",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@heroicons/react": "^2.0.18",
+    "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.4",
     "@types/react-dom": "18.2.7",
+    "Groups": "link:@mui/icons-material/Groups",
     "autoprefixer": "10.4.14",
     "cross-fetch": "^4.0.0",
     "eslint": "8.47.0",
diff --git a/front/pnpm-lock.yaml b/front/pnpm-lock.yaml
index a21a641..5bb3422 100644
--- a/front/pnpm-lock.yaml
+++ b/front/pnpm-lock.yaml
@@ -23,12 +23,18 @@ dependencies:
   '@heroicons/react':
     specifier: ^2.0.18
     version: 2.0.18(react@18.2.0)
+  '@mui/icons-material':
+    specifier: ^5.14.3
+    version: 5.14.3(@mui/material@5.14.4)(@types/react@18.2.20)(react@18.2.0)
   '@mui/material':
     specifier: ^5.14.4
     version: 5.14.4(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
   '@types/react-dom':
     specifier: 18.2.7
     version: 18.2.7
+  Groups:
+    specifier: link:@mui/icons-material/Groups
+    version: link:@mui/icons-material/Groups
   autoprefixer:
     specifier: 10.4.14
     version: 10.4.14(postcss@8.4.27)
@@ -1673,6 +1679,23 @@ packages:
     resolution: {integrity: sha512-pW2XghSi3hpYKX57Wu0SCWMTSpzvXZmmucj3TcOJWaCiFt4xr05w2gcwBZi36dAp9uvd9//9N51qbblmnD+GPg==}
     dev: false
 
+  /@mui/icons-material@5.14.3(@mui/material@5.14.4)(@types/react@18.2.20)(react@18.2.0):
+    resolution: {integrity: sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.10
+      '@mui/material': 5.14.4(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
   /@mui/material@5.14.4(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2XUV3KyRC07BQPPzEgd+ss3x/ezXtHeKtOGCMCNmx3MauZojPYUpSwFkE0fYgYCD9dMQMVG4DY/VF38P0KShsg==}
     engines: {node: '>=12.0.0'}
diff --git a/front/src/app/layout.tsx b/front/src/app/layout.tsx
index ae84562..44c41a6 100644
--- a/front/src/app/layout.tsx
+++ b/front/src/app/layout.tsx
@@ -5,8 +5,8 @@ import { Inter } from 'next/font/google'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'get5loader',
+  description: 'get5loader Management Panel',
 }
 
 export default function RootLayout({
diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
index d4ec367..4819fff 100644
--- a/front/src/app/page.tsx
+++ b/front/src/app/page.tsx
@@ -1,7 +1,59 @@
+'use client'
+
+import React from 'react';
+import Drawer from '@mui/material/Drawer';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import GroupsIcon from '@mui/icons-material/Groups';
+import DnsIcon from '@mui/icons-material/Dns';
+
+type menuListProps = {
+  onSelected:(key:string) => void
+}
+
+const MenuList = (props:menuListProps) => {
+  return (
+  <Box
+    role="presentation"
+  >
+    <List>
+    <ListItem disablePadding>
+      <ListItemButton onClick={()=>{props.onSelected("matches")}}> 
+        <ListItemIcon>
+          <GroupsIcon />
+        </ListItemIcon>
+        <ListItemText primary="MATCHES" />
+      </ListItemButton>
+    </ListItem>
+    <ListItem disablePadding>
+    <ListItemButton onClick={()=>{props.onSelected("servers")}}> 
+        <ListItemIcon>
+          <DnsIcon />
+        </ListItemIcon>
+        <ListItemText primary="SERVERS" />
+      </ListItemButton>
+    </ListItem>
+    </List>
+  </Box>
+  )
+};
+
+function MenuDrawer() {
+  const [selected, setSelected] = React.useState<string>("matches")
+  return (
+    <Drawer open={true}>
+      <MenuList onSelected={setSelected} />
+      {selected}
+    </Drawer>
+  )
+}
+
 export default function Home() {
   return (
-    <main>
-      <h1>get5loader</h1>
-    </main>
+    <MenuDrawer />
   )
 }