timetable-app

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

index.tsx (1593B)

      1 import HomeIcon from '@mui/icons-material/Home';
      2 import {
      3 	AppBar,
      4 	Box,
      5 	Container,
      6 	IconButton,
      7 	Toolbar,
      8 	Typography,
      9 } from '@mui/material';
     10 
     11 import { NextLinkComposed } from 'client/components/Link';
     12 
     13 import Menu from './Menu';
     14 
     15 import type { ReactNode } from 'react';
     16 
     17 type Props = {
     18 	children: ReactNode;
     19 	title: string;
     20 	footer?: ReactNode | undefined;
     21 };
     22 
     23 // TODO: トップページへのアイコンをアプリロゴにする（ロゴ完成後）
     24 export default function Layout({ children, title, footer }: Props) {
     25 	return (
     26 		<Container
     27 			maxWidth='sm'
     28 			disableGutters
     29 			sx={[
     30 				(theme) => ({
     31 					[theme.breakpoints.up('sm')]: {
     32 						borderRight: 'solid 1px gray',
     33 						borderLeft: 'solid 1px gray',
     34 					},
     35 					height: '100vh',
     36 					display: 'flex',
     37 					flexDirection: 'column',
     38 					position: 'relative',
     39 				}),
     40 				{ height: '100svh' },
     41 			]}
     42 		>
     43 			<AppBar position='sticky'>
     44 				<Toolbar sx={{ gap: 2 }}>
     45 					<IconButton
     46 						color='inherit'
     47 						title='トップに戻る'
     48 						edge='start'
     49 						component={NextLinkComposed}
     50 						to={{ pathname: '/' }}
     51 					>
     52 						<HomeIcon />
     53 					</IconButton>
     54 
     55 					<Typography variant='h1' fontSize={24} fontWeight={500} flexGrow={1}>
     56 						{title}
     57 					</Typography>
     58 
     59 					<Menu />
     60 				</Toolbar>
     61 			</AppBar>
     62 
     63 			<Box
     64 				component='main'
     65 				display='flex'
     66 				flexGrow={1}
     67 				sx={{ overflowY: 'scroll' }}
     68 			>
     69 				{children}
     70 			</Box>
     71 
     72 			{footer && (
     73 				<Box
     74 					sx={(theme) => ({
     75 						borderTop: `1px solid ${theme.vars.palette.divider}`,
     76 					})}
     77 				>
     78 					{footer}
     79 				</Box>
     80 			)}
     81 		</Container>
     82 	);
     83 }