Apply responsive style for navigator

src/components/organisms/Honkai3rdNavigator.tsx

@@ -1,8 +1,19 @@
 /** @jsxImportSource theme-ui */
-import { NavLink, Heading, Flex, Text } from '@theme-ui/components'
+import { mdiClose, mdiMenu, mdiMenuRight, mdiMenuSwap } from '@mdi/js'
+import Icon from '@mdi/react'
+import {
+  NavLink,
+  Heading,
+  Flex,
+  Text,
+  Box,
+  IconButton,
+} from '@theme-ui/components'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 import { useTranslation } from '../../lib/i18n'
+import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 const Honkai3rdNavigator = () => {
@@ -10,9 +21,27 @@ const Honkai3rdNavigator = () => {
   const { pathname, asPath, query, locale } = router
   const { t } = useTranslation()
 
+  const [hiddenMobileNav, setHiddenMobileNav] = useState(true)
+
+  useEffect(() => {
+    setHiddenMobileNav(true)
+  }, [router.pathname])
+
   return (
-    <Flex mx={3} sx={{ alignItems: 'center' }}>
-      <Flex sx={{ alignItems: 'center', height: 50 }} mr={3}>
+    <Flex
+      mx={3}
+      sx={{
+        alignItems: 'center',
+        position: 'sticky',
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        top: 0,
+        zIndex: 100,
+      }}
+    >
+      <Flex
+        sx={{ alignItems: 'center', height: 50, display: ['none', 'flex'] }}
+        mr={3}
+      >
         <Heading margin={0}>
           <NextLink href='/' passHref>
             <NavLink mr={2}>Abyss Lab</NavLink>
@@ -23,14 +52,74 @@ const Honkai3rdNavigator = () => {
           </NextLink>
         </Heading>
       </Flex>
-      <Flex sx={{ justifyContent: 'space-between', flex: 1 }}>
-        <Flex sx={{ height: 40, alignItems: 'center' }}>
+
+      <Flex sx={{ height: 50, display: ['flex', 'none'] }}>
+        <IconButton
+          sx={{ width: 50, height: 50, ml: -3 }}
+          onClick={() => setHiddenMobileNav(false)}
+        >
+          <Icon path={mdiMenu} size={1} />
+        </IconButton>
+      </Flex>
+      <Box
+        sx={{
+          display: hiddenMobileNav ? 'none' : 'block',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          overflow: 'auto',
+          px: 3,
+          backgroundColor: 'white',
+        }}
+      >
+        <Flex
+          sx={{
+            height: 50,
+            top: 0,
+            position: 'sticky',
+            backgroundColor: 'rgba(255,255,255,0.9)',
+          }}
+        >
+          <IconButton
+            sx={{ width: 50, height: 50, ml: -3 }}
+            onClick={() => setHiddenMobileNav(true)}
+          >
+            <Icon path={mdiClose} size={1} />
+          </IconButton>
+        </Flex>
+
+        <Box>
+          <NavMobileItem href='/' label='Abyss Lab Home' />
+          <NavMobileItem
+            href='/honkai3rd'
+            label={`${t('nav.honkai-3rd')} Home`}
+          />
+
+          <Honkai3rdNavMobileItem target='versions' />
+          <Honkai3rdNavMobileItem target='battlesuits' />
+          <Honkai3rdNavMobileItem target='weapons' />
+          <Honkai3rdNavMobileItem target='stigmata' />
+          <Honkai3rdNavMobileItem target='elfs' />
+        </Box>
+      </Box>
+      <Flex
+        sx={{
+          justifyContent: 'space-between',
+          flex: 1,
+        }}
+      >
+        <Flex
+          sx={{ height: 40, alignItems: 'center', display: ['none', 'flex'] }}
+        >
           <NavItem target='versions' />
           <NavItem target='battlesuits' />
           <NavItem target='weapons' />
           <NavItem target='stigmata' />
           <NavItem target='elfs' />
         </Flex>
+        <Box />
         <Flex sx={{ height: 40, alignItems: 'center' }}>
           <NextLink
             href={{ pathname, query }}
@@ -43,8 +132,11 @@ const Honkai3rdNavigator = () => {
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
+                display: 'flex',
+                alignItems: 'center',
               }}
             >
+              <Text>
                 {locale === 'en-US' ? (
                   '🇺🇸'
                 ) : (
@@ -52,6 +144,8 @@ const Honkai3rdNavigator = () => {
                     🇰🇷 <small>(한글화 작업 중)</small>
                   </>
                 )}
+              </Text>
+              <Icon path={mdiMenuSwap} size='20px' />
             </NavLink>
           </NextLink>
         </Flex>
@@ -97,3 +191,69 @@ const NavItem = ({ target }: NavItemProps) => {
     </NextLink>
   )
 }
+
+const Honkai3rdNavMobileItem = ({ target }: NavItemProps) => {
+  const { t } = useTranslation()
+  return (
+    <PageLink
+      href={`/honkai3rd/${target}`}
+      sx={{
+        fontFamily: 'monospace',
+        display: 'flex',
+        alignItems: 'center',
+        overflow: 'hidden',
+        mb: 2,
+      }}
+    >
+      <SquareImageBox
+        size={40}
+        mr={1}
+        src={`/assets/honkai3rd/nav-icons/${target}.png`}
+      />
+      <Text
+        sx={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          fontSize: 3,
+        }}
+      >
+        {t(`nav.${target}`)}
+      </Text>
+    </PageLink>
+  )
+}
+
+interface NavMobileItemProps {
+  href: string
+  label: string
+}
+
+const NavMobileItem = ({ href, label }: NavMobileItemProps) => {
+  return (
+    <PageLink
+      href={href}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        fontFamily: 'monospace',
+        height: 40,
+        fontSize: 3,
+        mb: 2,
+      }}
+    >
+      <Flex
+        sx={{
+          width: 40,
+          height: 40,
+          alignItems: 'center',
+          justifyContent: 'center',
+          mr: 1,
+        }}
+      >
+        <Icon path={mdiMenuRight} size={'30px'} />
+      </Flex>
+      <Text>{label}</Text>
+    </PageLink>
+  )
+}

src/components/organisms/RootNavigator.tsx

@@ -4,7 +4,17 @@ import NextLink from 'next/link'
 
 const RootNavigator = () => {
   return (
-    <Flex mx={3} sx={{ alignItems: 'center' }}>
+    <Flex
+      as='nav'
+      mx={3}
+      sx={{
+        alignItems: 'center',
+        position: 'sticky',
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        top: 0,
+        zIndex: 100,
+      }}
+    >
       <Flex sx={{ alignItems: 'center', height: 50 }} mr={3}>
         <Heading margin={0}>
           <NextLink href='/' passHref>
@@ -12,7 +22,9 @@ const RootNavigator = () => {
           </NextLink>
         </Heading>
       </Flex>
-      <Flex sx={{ height: 40, alignItems: 'center' }}>
+      <Flex
+        sx={{ height: 40, alignItems: 'center', display: ['none', 'flex'] }}
+      >
         <NextLink href='/genshin' passHref>
           <NavLink mr={3}>Genshin</NavLink>
         </NextLink>