簡易的なドロワーの追加

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",

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({

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