timetable-app

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

Menu.tsx (3287B)

      1 import { useDisclosure } from '@mantine/hooks';
      2 import BugReportIcon from '@mui/icons-material/BugReportOutlined';
      3 import HelpIcon from '@mui/icons-material/HelpOutline';
      4 import InfoIcon from '@mui/icons-material/InfoOutlined';
      5 import MenuIcon from '@mui/icons-material/Menu';
      6 import RateReviewIcon from '@mui/icons-material/RateReviewOutlined';
      7 import SettingsIcon from '@mui/icons-material/SettingsOutlined';
      8 import ShareIcon from '@mui/icons-material/ShareOutlined';
      9 import UpdateIcon from '@mui/icons-material/UpdateOutlined';
     10 import {
     11 	IconButton,
     12 	Link,
     13 	ListItemIcon,
     14 	MenuItem,
     15 	Menu as MuiMenu,
     16 } from '@mui/material';
     17 import { useRouter } from 'next/router';
     18 import { useId, useRef } from 'react';
     19 
     20 import { BUG_REPORT_FORM_URL, FEEDBACK_FORM_URL } from 'common/constant';
     21 
     22 import { NextLinkComposed } from '../Link';
     23 
     24 export default function Menu() {
     25 	const [open, handlers] = useDisclosure(false);
     26 	const anchorEl = useRef<HTMLButtonElement | null>(null);
     27 	const menuId = useId();
     28 	const buttonId = useId();
     29 
     30 	const router = useRouter();
     31 
     32 	return (
     33 		<>
     34 			<IconButton
     35 				onClick={handlers.open}
     36 				ref={anchorEl}
     37 				color='inherit'
     38 				edge='end'
     39 				id={buttonId}
     40 				aria-label='メニュー'
     41 				aria-controls={open ? menuId : undefined}
     42 				aria-haspopup='true'
     43 				aria-expanded={open ? true : undefined}
     44 			>
     45 				<MenuIcon />
     46 			</IconButton>
     47 
     48 			<MuiMenu
     49 				anchorEl={anchorEl.current}
     50 				id={menuId}
     51 				open={open}
     52 				onClose={handlers.close}
     53 				MenuListProps={{
     54 					'aria-labelledby': buttonId,
     55 				}}
     56 				anchorOrigin={{
     57 					vertical: 'bottom',
     58 					horizontal: 'right',
     59 				}}
     60 				transformOrigin={{
     61 					vertical: 'top',
     62 					horizontal: 'right',
     63 				}}
     64 			>
     65 				<MenuItem
     66 					component={NextLinkComposed}
     67 					to='/about'
     68 					selected={router.pathname === '/about'}
     69 				>
     70 					<ListItemIcon>
     71 						<InfoIcon />
     72 					</ListItemIcon>
     73 					このアプリについて
     74 				</MenuItem>
     75 
     76 				<MenuItem
     77 					component={NextLinkComposed}
     78 					to='/how-to-use'
     79 					selected={router.pathname === '/how-to-use'}
     80 				>
     81 					<ListItemIcon>
     82 						<HelpIcon />
     83 					</ListItemIcon>
     84 					使い方
     85 				</MenuItem>
     86 
     87 				<MenuItem
     88 					component={NextLinkComposed}
     89 					to='/setting'
     90 					selected={router.pathname === '/setting'}
     91 				>
     92 					<ListItemIcon>
     93 						<SettingsIcon />
     94 					</ListItemIcon>
     95 					設定
     96 				</MenuItem>
     97 
     98 				<MenuItem
     99 					component={NextLinkComposed}
    100 					to='/update-info'
    101 					selected={router.pathname === '/update-info'}
    102 				>
    103 					<ListItemIcon>
    104 						<UpdateIcon />
    105 					</ListItemIcon>
    106 					更新情報
    107 				</MenuItem>
    108 
    109 				<MenuItem
    110 					component={Link}
    111 					href={BUG_REPORT_FORM_URL}
    112 					target='_blank'
    113 					rel='noopener'
    114 				>
    115 					<ListItemIcon>
    116 						<BugReportIcon />
    117 					</ListItemIcon>
    118 					不具合・誤情報報告
    119 				</MenuItem>
    120 
    121 				<MenuItem
    122 					component={Link}
    123 					href={FEEDBACK_FORM_URL}
    124 					target='_blank'
    125 					rel='noopener'
    126 				>
    127 					<ListItemIcon>
    128 						<RateReviewIcon />
    129 					</ListItemIcon>
    130 					フィードバック
    131 				</MenuItem>
    132 
    133 				<MenuItem
    134 					onClick={() => {
    135 						handlers.close();
    136 						navigator.share({ title: document.title, url: document.URL });
    137 					}}
    138 				>
    139 					<ListItemIcon>
    140 						<ShareIcon />
    141 					</ListItemIcon>
    142 					共有
    143 				</MenuItem>
    144 			</MuiMenu>
    145 		</>
    146 	);
    147 }