125 lines
3.0 KiB
TypeScript
125 lines
3.0 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { mdiClose, mdiMenuSwap } from '@mdi/js'
|
|
import Icon from '@mdi/react'
|
|
import {
|
|
NavLink,
|
|
Heading,
|
|
Text,
|
|
Box,
|
|
Flex,
|
|
IconButton,
|
|
} from '@theme-ui/components'
|
|
import NextLink from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import { assetsBucketBaseUrl } from '../../lib/consts'
|
|
import { useTranslation } from '../../lib/i18n'
|
|
import SquareImageBox from '../atoms/SquareImageBox'
|
|
|
|
interface Honkai3rdNavigatorProps {
|
|
close: () => void
|
|
}
|
|
|
|
const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
|
|
const router = useRouter()
|
|
const { pathname, asPath, query, locale } = router
|
|
const { t } = useTranslation()
|
|
return (
|
|
<Box
|
|
sx={{
|
|
p: 2,
|
|
}}
|
|
>
|
|
<Flex
|
|
sx={{
|
|
position: 'sticky',
|
|
display: ['block', 'none'],
|
|
top: 0,
|
|
height: 50,
|
|
ml: -2,
|
|
mt: -2,
|
|
}}
|
|
>
|
|
<IconButton sx={{ width: 50, height: 50 }} onClick={close}>
|
|
<Icon path={mdiClose} size={1} />
|
|
</IconButton>
|
|
</Flex>
|
|
<NextLink href='/' passHref>
|
|
<NavLink mb={2}>Abyss Lab</NavLink>
|
|
</NextLink>
|
|
<Heading mb={3}>
|
|
<NextLink href='/honkai3rd' passHref>
|
|
<NavLink>{t('nav.honkai-3rd')}</NavLink>
|
|
</NextLink>
|
|
</Heading>
|
|
|
|
<Box sx={{ mb: 3 }}>
|
|
<NavItem target='versions' />
|
|
<NavItem target='battlesuits' />
|
|
<NavItem target='weapons' />
|
|
<NavItem target='stigmata' />
|
|
<NavItem target='elfs' />
|
|
</Box>
|
|
|
|
<NextLink
|
|
href={{ pathname, query }}
|
|
locale={locale === 'en-US' ? 'ko-KR' : 'en-US'}
|
|
as={asPath}
|
|
passHref
|
|
>
|
|
<NavLink
|
|
sx={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
px: 2,
|
|
mb: 2,
|
|
}}
|
|
>
|
|
<Text>{locale === 'en-US' ? '🇺🇸 English(US)' : '🇰🇷 한국어'}</Text>
|
|
<Icon path={mdiMenuSwap} size='20px' />
|
|
</NavLink>
|
|
</NextLink>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Honkai3rdNavigator
|
|
|
|
interface NavItemProps {
|
|
target: 'versions' | 'battlesuits' | 'stigmata' | 'weapons' | 'elfs'
|
|
}
|
|
|
|
const NavItem = ({ target }: NavItemProps) => {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<NextLink href={`/honkai3rd/${target}`} passHref>
|
|
<NavLink
|
|
sx={{
|
|
fontFamily: 'monospace',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
overflow: 'hidden',
|
|
p: 1,
|
|
}}
|
|
>
|
|
<SquareImageBox
|
|
size={30}
|
|
mr={1}
|
|
src={`${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`}
|
|
/>
|
|
<Text
|
|
sx={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{t(`nav.${target}`)}
|
|
</Text>
|
|
</NavLink>
|
|
</NextLink>
|
|
)
|
|
}
|