176 lines
4.6 KiB
TypeScript
176 lines
4.6 KiB
TypeScript
/** @jsxImportSource theme-ui */
|
|
import { mdiArrowUp, mdiDiscord, mdiGithub, mdiLink, mdiMenu } from '@mdi/js'
|
|
import Icon from '@mdi/react'
|
|
import React, { useCallback, useRef, useState } from 'react'
|
|
import { Box, Flex, IconButton, Link, Text } from 'theme-ui'
|
|
import Honkai3rdNavigator from '../organisms/Honkai3rdNavigator'
|
|
import NextLink from 'next/link'
|
|
|
|
const Honkai3rdLayout: React.FC = ({ children }) => {
|
|
const [hiddenMobileNav, setHiddenMobileNav] = useState(true)
|
|
const contentBoxRef = useRef<HTMLDivElement>(null)
|
|
const [scrolled, setScrolled] = useState(false)
|
|
|
|
const close = useCallback(() => {
|
|
setHiddenMobileNav(true)
|
|
}, [])
|
|
|
|
const handleScroll = useCallback(() => {
|
|
if (contentBoxRef.current == null) {
|
|
return
|
|
}
|
|
|
|
if (contentBoxRef.current.scrollTop === 0) {
|
|
return setScrolled(false)
|
|
}
|
|
if (scrolled) {
|
|
return
|
|
}
|
|
setScrolled(true)
|
|
}, [scrolled])
|
|
|
|
const scrollToTop = useCallback(() => {
|
|
if (contentBoxRef.current == null) {
|
|
return
|
|
}
|
|
|
|
contentBoxRef.current.scrollTop = 0
|
|
}, [])
|
|
|
|
return (
|
|
<Flex
|
|
sx={{
|
|
height: '100%',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: ['100%', 240],
|
|
borderRightWidth: 1,
|
|
borderRightStyle: 'solid',
|
|
borderRightColor: 'border',
|
|
overflowY: 'auto',
|
|
overflowX: 'hidden',
|
|
display: [hiddenMobileNav ? 'none' : 'block', 'block'],
|
|
}}
|
|
>
|
|
<Honkai3rdNavigator close={close} />
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
flex: 1,
|
|
overflowY: 'auto',
|
|
overflowX: 'hidden',
|
|
scrollBehavior: 'smooth',
|
|
}}
|
|
onScroll={handleScroll}
|
|
ref={contentBoxRef}
|
|
>
|
|
<IconButton
|
|
sx={{
|
|
width: 50,
|
|
height: 50,
|
|
position: 'absolute',
|
|
bottom: 1,
|
|
right: 1,
|
|
zIndex: 1000,
|
|
pointerEvents: scrolled ? 'auto' : 'none',
|
|
opacity: scrolled ? 1 : 0,
|
|
transition: 'opacity 200ms ease-in-out',
|
|
backgroundColor: 'transparent',
|
|
}}
|
|
onClick={scrollToTop}
|
|
>
|
|
<Icon path={mdiArrowUp} size={1} />
|
|
</IconButton>
|
|
<Flex
|
|
sx={{
|
|
position: 'sticky',
|
|
display: ['block', 'none'],
|
|
top: 0,
|
|
height: 50,
|
|
bg: 'transparent',
|
|
}}
|
|
>
|
|
<IconButton
|
|
sx={{ width: 50, height: 50 }}
|
|
onClick={() => setHiddenMobileNav(false)}
|
|
>
|
|
<Icon path={mdiMenu} size={1} />
|
|
</IconButton>
|
|
</Flex>
|
|
|
|
{children}
|
|
|
|
<Box py={3}>
|
|
<Flex
|
|
sx={{
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
flexDirection: ['column', 'column', 'column', 'row'],
|
|
}}
|
|
>
|
|
<NextLink href='/honkai3rd/about' passHref>
|
|
<Link
|
|
sx={{
|
|
mb: 2,
|
|
}}
|
|
>
|
|
About Abyss Lab
|
|
</Link>
|
|
</NextLink>
|
|
<Text sx={{ mx: 2, display: ['none', 'none', 'none', 'block'] }}>
|
|
/
|
|
</Text>
|
|
<Link
|
|
href='https://github.com/sakura-knoll/abyss-lab'
|
|
target='_blank'
|
|
sx={{
|
|
mb: 2,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Icon path={mdiGithub} size='20px' />
|
|
<Text sx={{ ml: 1 }}>GitHub(Source Code)</Text>
|
|
</Link>
|
|
<Text sx={{ mx: 2, display: ['none', 'none', 'none', 'block'] }}>
|
|
/
|
|
</Text>
|
|
<Link
|
|
href='https://discord.gg/UnrM9T9PRs'
|
|
target='_blank'
|
|
sx={{
|
|
mb: 2,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Icon path={mdiDiscord} size='20px' />
|
|
<Text sx={{ ml: 1 }}>Discord (EN)</Text>
|
|
</Link>
|
|
<Text sx={{ mx: 2, display: ['none', 'none', 'none', 'block'] }}>
|
|
/
|
|
</Text>
|
|
<Link
|
|
href='https://arca.live/b/cherryhill'
|
|
target='_blank'
|
|
sx={{
|
|
mb: 2,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Icon path={mdiLink} size='20px' />
|
|
<Text sx={{ ml: 1 }}>arca.live (KR)</Text>
|
|
</Link>
|
|
</Flex>
|
|
</Box>
|
|
</Box>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default Honkai3rdLayout
|