fix: admin dashboard画面のレイアウトを直し、全てのページで同じにする

GiganticMinecraft · Apr 12, 2024 · cf126ec · cf126ec
1 parent fa98792
commit cf126ec
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 12 deletions.
diff --git a/src/app/(authed)/admin/_components/AdminNavigationBar.tsx b/src/app/(authed)/admin/_components/AdminNavigationBar.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import {
+  Typography,
+  Box,
+  AppBar,
+  Toolbar,
+  Link,
+  Paper,
+  IconButton,
+  InputBase,
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import Image from 'next/image';
+
+const SearchField = () => {
+  return (
+    <Paper
+      component="form"
+      sx={{ p: '2px 4px', display: 'flex', alignItems: 'center', width: 400 }}
+    >
+      <IconButton sx={{ p: '10px' }} aria-label="search">
+        <SearchIcon />
+      </IconButton>
+      <InputBase
+        sx={{ ml: 1, flex: 1 }}
+        placeholder="Search..."
+        inputProps={{ 'aria-label': 'search...' }}
+      />
+    </Paper>
+  );
+};
+
+const NavBar = () => {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar
+        position="fixed"
+        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+      >
+        <Toolbar>
+          <Image
+            src="/favicon.ico"
+            width={32}
+            height={32}
+            alt={'seichi-portal logo'}
+          />
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            <Link href="/admin" color="#fff" sx={{ textDecoration: 'none' }}>
+              Seichi Portal Admin
+            </Link>
+          </Typography>
+          <SearchField />
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+};
+
+export default NavBar;
diff --git a/src/components/DashboardMenu.tsx → ...thed)/admin/_components/DashboardMenu.tsx b/src/components/DashboardMenu.tsx → ...thed)/admin/_components/DashboardMenu.tsx
@@ -1,15 +1,25 @@
 'use client';
 
 import { Star } from '@mui/icons-material';
-import { styled, Grid, Typography, MenuList, MenuItem } from '@mui/material';
+import { styled, Typography, MenuList, MenuItem } from '@mui/material';
+import Drawer from '@mui/material/Drawer';
 
 const Demo = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
+  color: theme.palette.text.primary,
 }));
 
+const drawerWidth = 240;
+
 const DashboardMenu = () => {
   return (
-    <Grid item xs={12} md={6}>
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: drawerWidth,
+        [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+      }}
+    >
       <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
         Menu
       </Typography>
@@ -25,7 +35,7 @@ const DashboardMenu = () => {
           })}
         </MenuList>
       </Demo>
-    </Grid>
+    </Drawer>
   );
 };
 

diff --git a/src/app/(authed)/admin/forms/create/page.tsx b/src/app/(authed)/admin/forms/create/page.tsx
@@ -1,11 +1,9 @@
 'use client';
 
-import DashboardMenu from '@/components/DashboardMenu';
 import { CreateFormComponent } from '@/features/form/components/CreateForm';
 const Home = () => {
   return (
     <>
-      <DashboardMenu />
       <CreateFormComponent />
     </>
   );

diff --git a/src/app/(authed)/admin/forms/edit/[id]/page.tsx b/src/app/(authed)/admin/forms/edit/[id]/page.tsx
@@ -2,7 +2,6 @@
 
 import { redirect } from 'next/navigation';
 import useSWR from 'swr';
-import DashboardMenu from '@/components/DashboardMenu';
 import { EditFormComponent } from '@/features/form/components/editForm';
 import type { Form } from '@/_schemas/formSchema';
 
@@ -21,7 +20,6 @@ const Home = ({ params }: { params: { id: number } }) => {
 
   return (
     <>
-      <DashboardMenu />
       <EditFormComponent form={data} />
     </>
   );

diff --git a/src/app/(authed)/admin/forms/page.tsx b/src/app/(authed)/admin/forms/page.tsx
@@ -2,7 +2,6 @@
 
 import { redirect } from 'next/navigation';
 import useSWR from 'swr';
-import DashboardMenu from '@/components/DashboardMenu';
 import {
   CreateFormButton,
   Forms,
@@ -24,7 +23,6 @@ const Home = () => {
 
   return (
     <>
-      <DashboardMenu />
       <CreateFormButton />
       <Forms forms={forms} />
     </>

diff --git a/src/app/(authed)/admin/layout.tsx b/src/app/(authed)/admin/layout.tsx
@@ -1,13 +1,14 @@
 import '../../globals.css';
 import { Inter } from 'next/font/google';
-import NavBar from '@/components/NavBar';
 import { AuthenticatedTemplate } from '@/features/user/components/AuthenticatedTemplate';
 import { MsalProvider } from '@/features/user/components/MsalProvider';
 import { NeedToSignin } from '@/features/user/components/NeedToSignin';
 import { UnauthenticatedTemplate } from '@/features/user/components/UnauthenticatedTemplate';
 import styles from '../../page.module.css';
 import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
+import AdminNavigationBar from './_components/AdminNavigationBar';
+import DashboardMenu from './_components/DashboardMenu';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -22,7 +23,8 @@ const RootLayout = ({ children }: { children: ReactNode }) => {
       <body className={inter.className}>
         <main className={styles['main']}>
           <MsalProvider>
-            <NavBar />
+            <AdminNavigationBar />
+            <DashboardMenu />
             <AuthenticatedTemplate>{children}</AuthenticatedTemplate>
             <UnauthenticatedTemplate>
               <NeedToSignin />

diff --git a/src/app/(authed)/admin/page.tsx b/src/app/(authed)/admin/page.tsx
@@ -3,8 +3,8 @@
 import { redirect } from 'next/navigation';
 import useSWR from 'swr';
 import DataTable from '@/components/Dashboard';
-import DashboardMenu from '@/components/DashboardMenu';
 import type { BatchAnswer } from '@/_schemas/formSchema';
+import DashboardMenu from './_components/DashboardMenu';
 
 const Home = () => {
   const fetcher = (url: string) => fetch(url).then((res) => res.json());