From 3d8f4f34fe2f08dd7497bdfdb21b9e012931b952 Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Sun, 6 Mar 2022 16:27:45 +0900
Subject: [PATCH] Restructure layout

---
 src/components/layouts/Honkai3rdLayout.tsx    |  60 ++++
 .../organisms/Honkai3rdNavigator.tsx          | 272 ++++--------------
 src/components/pages/SingleStigmataPage.tsx   |   7 +-
 src/components/pages/StigmataSetPage.tsx      |   7 +-
 src/pages/_app.tsx                            |   3 +-
 .../honkai3rd/battlesuits/[battlesuitId].tsx  |   7 +-
 src/pages/honkai3rd/battlesuits/index.tsx     |   7 +-
 src/pages/honkai3rd/elfs/[elfId].tsx          |   7 +-
 src/pages/honkai3rd/elfs/index.tsx            |   9 +-
 src/pages/honkai3rd/enemies/index.tsx         |   7 +-
 src/pages/honkai3rd/index.tsx                 |   7 +-
 src/pages/honkai3rd/stigmata/index.tsx        |   7 +-
 src/pages/honkai3rd/versions/[versionId].tsx  |   7 +-
 src/pages/honkai3rd/versions/index.tsx        |   8 +-
 src/pages/honkai3rd/weapons/[weaponId].tsx    |   7 +-
 src/pages/honkai3rd/weapons/index.tsx         |  81 +++---
 src/pages/index.tsx                           |   3 +-
 src/styles/nextjs.css                         |   7 +
 {public/assets => src/styles}/nprogress.css   |   0
 19 files changed, 204 insertions(+), 309 deletions(-)
 create mode 100644 src/components/layouts/Honkai3rdLayout.tsx
 create mode 100644 src/styles/nextjs.css
 rename {public/assets => src/styles}/nprogress.css (100%)

diff --git a/src/components/layouts/Honkai3rdLayout.tsx b/src/components/layouts/Honkai3rdLayout.tsx
new file mode 100644
index 00000000..07e0f974
--- /dev/null
+++ b/src/components/layouts/Honkai3rdLayout.tsx
@@ -0,0 +1,60 @@
+/** @jsxImportSource theme-ui */
+
+import { mdiMenu } from '@mdi/js'
+import Icon from '@mdi/react'
+import React, { useCallback, useState } from 'react'
+import { Box, Flex, IconButton } from 'theme-ui'
+import Honkai3rdNavigator from '../organisms/Honkai3rdNavigator'
+
+const Honkai3rdLayout: React.FC = ({ children }) => {
+  const [hiddenMobileNav, setHiddenMobileNav] = useState(true)
+
+  const close = useCallback(() => {
+    setHiddenMobileNav(true)
+  }, [])
+
+  return (
+    <Flex
+      sx={{
+        height: '100%',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          width: ['100%', 240],
+          borderRightWidth: 1,
+          borderRightStyle: 'solid',
+          borderRightColor: 'gray.2',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          display: [hiddenMobileNav ? 'none' : 'block', 'block'],
+        }}
+      >
+        <Honkai3rdNavigator close={close} />
+      </Box>
+      <Box sx={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
+        <Flex
+          sx={{
+            position: 'sticky',
+            display: ['block', 'none'],
+            top: 0,
+            height: 50,
+            bg: 'rgba(255,255,255,0.8)',
+          }}
+        >
+          <IconButton
+            sx={{ width: 50, height: 50 }}
+            onClick={() => setHiddenMobileNav(false)}
+          >
+            <Icon path={mdiMenu} size={1} />
+          </IconButton>
+        </Flex>
+
+        {children}
+      </Box>
+    </Flex>
+  )
+}
+
+export default Honkai3rdLayout
diff --git a/src/components/organisms/Honkai3rdNavigator.tsx b/src/components/organisms/Honkai3rdNavigator.tsx
index a173a4bd..3a321d56 100644
--- a/src/components/organisms/Honkai3rdNavigator.tsx
+++ b/src/components/organisms/Honkai3rdNavigator.tsx
@@ -1,159 +1,87 @@
 /** @jsxImportSource theme-ui */
-import { mdiClose, mdiMenu, mdiMenuRight, mdiMenuSwap } from '@mdi/js'
+import { mdiClose, mdiMenuSwap } from '@mdi/js'
 import Icon from '@mdi/react'
 import {
   NavLink,
   Heading,
-  Flex,
   Text,
   Box,
+  Flex,
   IconButton,
-  Link,
 } from '@theme-ui/components'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
-import { useCallback, useState } from 'react'
 import { assetsBucketBaseUrl } from '../../lib/consts'
 import { useTranslation } from '../../lib/i18n'
-import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
-const Honkai3rdNavigator = () => {
+interface Honkai3rdNavigatorProps {
+  close: () => void
+}
+
+const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
   const router = useRouter()
   const { pathname, asPath, query, locale } = router
   const { t } = useTranslation()
-
-  const [hiddenMobileNav, setHiddenMobileNav] = useState(true)
-
-  const close = useCallback(() => {
-    setHiddenMobileNav(true)
-  }, [])
-
   return (
-    <Flex
-      mx={3}
+    <Box
       sx={{
-        alignItems: 'center',
-        position: 'sticky',
-        backgroundColor: 'rgba(255,255,255,0.9)',
-        top: 0,
-        zIndex: 100,
+        p: 2,
       }}
     >
       <Flex
-        sx={{ alignItems: 'center', height: 50, display: ['none', 'flex'] }}
-        mr={3}
+        sx={{
+          position: 'sticky',
+          display: ['block', 'none'],
+          top: 0,
+          height: 50,
+          ml: -2,
+          mt: -2,
+        }}
       >
-        <Heading margin={0}>
-          <NextLink href='/' passHref>
-            <NavLink mr={2}>Abyss Lab</NavLink>
-          </NextLink>
-          :
-          <NextLink href='/honkai3rd' passHref>
-            <NavLink ml={2}>{t('nav.honkai-3rd')}</NavLink>
-          </NextLink>
-        </Heading>
-      </Flex>
-
-      <Flex sx={{ height: 50, display: ['flex', 'none'] }}>
-        <IconButton
-          sx={{ width: 50, height: 50, ml: -3 }}
-          onClick={() => setHiddenMobileNav(false)}
-        >
-          <Icon path={mdiMenu} size={1} />
+        <IconButton sx={{ width: 50, height: 50 }} onClick={close}>
+          <Icon path={mdiClose} 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',
-        }}
+      <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
       >
-        <Flex
+        <NavLink
           sx={{
-            height: 50,
-            top: 0,
-            position: 'sticky',
-            backgroundColor: 'rgba(255,255,255,0.9)',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            display: 'flex',
+            alignItems: 'center',
+            px: 2,
+            mb: 2,
           }}
         >
-          <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' close={close} />
-          <NavMobileItem
-            href='/honkai3rd'
-            label={`${t('nav.honkai-3rd')} Home`}
-            close={close}
-          />
-
-          <Honkai3rdNavMobileItem target='versions' close={close} />
-          <Honkai3rdNavMobileItem target='battlesuits' close={close} />
-          <Honkai3rdNavMobileItem target='weapons' close={close} />
-          <Honkai3rdNavMobileItem target='stigmata' close={close} />
-          <Honkai3rdNavMobileItem target='elfs' close={close} />
-        </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 }}
-            locale={locale === 'en-US' ? 'ko-KR' : 'en-US'}
-            as={asPath}
-            passHref
-          >
-            <NavLink
-              sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
-              <Text>
-                {locale === 'en-US' ? (
-                  '🇺🇸'
-                ) : (
-                  <>
-                    🇰🇷 <small>(한글화 작업 중)</small>
-                  </>
-                )}
-              </Text>
-              <Icon path={mdiMenuSwap} size='20px' />
-            </NavLink>
-          </NextLink>
-        </Flex>
-      </Flex>
-    </Flex>
+          <Text>{locale === 'en-US' ? '🇺🇸 English(US)' : '🇰🇷 한국어'}</Text>
+          <Icon path={mdiMenuSwap} size='20px' />
+        </NavLink>
+      </NextLink>
+    </Box>
   )
 }
 
@@ -168,16 +96,16 @@ const NavItem = ({ target }: NavItemProps) => {
   return (
     <NextLink href={`/honkai3rd/${target}`} passHref>
       <NavLink
-        mr={3}
         sx={{
           fontFamily: 'monospace',
           display: 'flex',
           alignItems: 'center',
           overflow: 'hidden',
+          p: 1,
         }}
       >
         <SquareImageBox
-          size={20}
+          size={30}
           mr={1}
           src={`${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`}
         />
@@ -194,91 +122,3 @@ const NavItem = ({ target }: NavItemProps) => {
     </NextLink>
   )
 }
-
-interface Honkai3rdNavMobileItemProps {
-  target: 'versions' | 'battlesuits' | 'stigmata' | 'weapons' | 'elfs'
-  close: () => void
-}
-
-const Honkai3rdNavMobileItem = ({
-  target,
-  close,
-}: Honkai3rdNavMobileItemProps) => {
-  const { push } = useRouter()
-  const { t } = useTranslation()
-  const href = `/honkai3rd/${target}`
-  return (
-    <PageLink
-      href={href}
-      sx={{
-        fontFamily: 'monospace',
-        display: 'flex',
-        alignItems: 'center',
-        overflow: 'hidden',
-        mb: 2,
-      }}
-      onClick={(event) => {
-        event.preventDefault()
-        close()
-        push(href)
-      }}
-    >
-      <SquareImageBox
-        size={40}
-        mr={1}
-        src={`${assetsBucketBaseUrl}/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
-  close: () => void
-}
-
-const NavMobileItem = ({ href, label, close }: NavMobileItemProps) => {
-  const { push } = useRouter()
-  return (
-    <Link
-      href={href}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        fontFamily: 'monospace',
-        height: 40,
-        fontSize: 3,
-        mb: 2,
-      }}
-      onClick={(event) => {
-        event.preventDefault()
-        close()
-        push(href)
-      }}
-    >
-      <Flex
-        sx={{
-          width: 40,
-          height: 40,
-          alignItems: 'center',
-          justifyContent: 'center',
-          mr: 1,
-        }}
-      >
-        <Icon path={mdiMenuRight} size={'30px'} />
-      </Flex>
-      <Text>{label}</Text>
-    </Link>
-  )
-}
diff --git a/src/components/pages/SingleStigmataPage.tsx b/src/components/pages/SingleStigmataPage.tsx
index 1f319620..b605319b 100644
--- a/src/components/pages/SingleStigmataPage.tsx
+++ b/src/components/pages/SingleStigmataPage.tsx
@@ -11,12 +11,12 @@ import {
 import PageLink from '../../components/atoms/PageLink'
 import StigmataCard from '../../components/molecules/StigmataCard'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
 import SecondaryLabel from '../atoms/SecondaryLabel'
 import { useRouter } from 'next/router'
 import { translate, useTranslation } from '../../lib/i18n'
 import Head from '../atoms/Head'
 import { assetsBucketBaseUrl } from '../../lib/consts'
+import Honkai3rdLayout from '../layouts/Honkai3rdLayout'
 
 export interface SingleStigmataPageProps {
   type: 'single'
@@ -48,7 +48,7 @@ const SingleStigmataPage = ({
   )
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${stigmataName} - ${t(
           'nav.abyss-lab'
@@ -62,7 +62,6 @@ const SingleStigmataPage = ({
           stigmataData.def
         } / CRT : ${stigmataData.crt}`}
       />
-      <Honkai3rdNavigator />
       <Box p={3}>
         <Breadcrumb
           items={[
@@ -179,7 +178,7 @@ const SingleStigmataPage = ({
           </Card>
         )}
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/components/pages/StigmataSetPage.tsx b/src/components/pages/StigmataSetPage.tsx
index 8e15a80b..28114dfb 100644
--- a/src/components/pages/StigmataSetPage.tsx
+++ b/src/components/pages/StigmataSetPage.tsx
@@ -4,12 +4,12 @@ import React from 'react'
 import PageLink from '../../components/atoms/PageLink'
 import StigmataCard from '../../components/molecules/StigmataCard'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
 import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
 import SecondaryLabel from '../atoms/SecondaryLabel'
 import { translate, useTranslation } from '../../lib/i18n'
 import { useRouter } from 'next/router'
 import Head from '../atoms/Head'
+import Honkai3rdLayout from '../layouts/Honkai3rdLayout'
 
 export interface StigmataSetProps {
   type: 'set'
@@ -36,7 +36,7 @@ const StigmataSetPage = ({
   )
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${stigmataSetName} ${t(
           'stigmata-show.stigmata-set'
@@ -45,7 +45,6 @@ const StigmataSetPage = ({
           'stigmata-show.stigmata-set'
         )} / ${'⭐'.repeat(stigmataSet.rarity)} / ${stigmataSetAltName}`}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -167,7 +166,7 @@ const StigmataSetPage = ({
           </Paragraph>
         </Card>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 8a2fa619..f2e44f6c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,8 @@ import { ThemeProvider } from 'theme-ui'
 import { theme } from '../lib/theme'
 import NProgress from 'nprogress'
 import { useRouter } from 'next/router'
-import '../../public/assets/nprogress.css'
+import '../styles/nprogress.css'
+import '../styles/nextjs.css'
 
 function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter()
diff --git a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
index e0751caf..ddaf45d0 100644
--- a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
+++ b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
@@ -17,7 +17,6 @@ import SecondaryLabel from '../../../components/atoms/SecondaryLabel'
 import TypeLabel from '../../../components/atoms/TypeLabel'
 import ValkyrieLabel from '../../../components/atoms/ValkyrieLabel'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import {
   BattlesuitData,
   battlesuitFeatures,
@@ -35,6 +34,7 @@ import { useRouter } from 'next/router'
 import Head from '../../../components/atoms/Head'
 import { capitalize } from '../../../lib/string'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 interface BattlesuitShowPageProps {
   battlesuit: BattlesuitData
@@ -68,7 +68,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
     : capitalize(battlesuit.type)
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${battlesuitName} - ${t(
           'nav.abyss-lab'
@@ -90,7 +90,6 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
           })
           .join(', ')}`}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -215,7 +214,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
           />
         )}
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/battlesuits/index.tsx b/src/pages/honkai3rd/battlesuits/index.tsx
index af33246c..a10980e7 100644
--- a/src/pages/honkai3rd/battlesuits/index.tsx
+++ b/src/pages/honkai3rd/battlesuits/index.tsx
@@ -4,7 +4,6 @@ import { pick } from 'ramda'
 import { useCallback, useMemo, useState } from 'react'
 import FilterButton from '../../../components/atoms/FilterButton'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { listBattlesuits } from '../../../server/data/honkai3rd/battlesuits'
 import {
   BattlesuitData,
@@ -18,6 +17,7 @@ import { NextPageContext } from 'next'
 import { getI18NProps } from '../../../server/i18n'
 import { translate, useTranslation } from '../../../lib/i18n'
 import Head from '../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 type BattlesuitListItemData = Pick<
   BattlesuitData,
@@ -77,14 +77,13 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
   }, [battlesuits, filter])
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${t(
           'breadcrumb.battlesuits'
         )} - ${t('nav.abyss-lab')}`}
         description={t('battlesuits-list.description')}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -163,7 +162,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
           {battlesuitList}
         </Flex>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/elfs/[elfId].tsx b/src/pages/honkai3rd/elfs/[elfId].tsx
index 22551271..05f3da96 100644
--- a/src/pages/honkai3rd/elfs/[elfId].tsx
+++ b/src/pages/honkai3rd/elfs/[elfId].tsx
@@ -12,7 +12,6 @@ import React from 'react'
 import BattlesuitFeatureLabel from '../../../components/atoms/BattlesuitFeatureLabel'
 import SecondaryLabel from '../../../components/atoms/SecondaryLabel'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { ElfData } from '../../../lib/honkai3rd/elfs'
 import { getElfById, listElfs } from '../../../server/data/honkai3rd/elfs'
 import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
@@ -21,6 +20,7 @@ import { useRouter } from 'next/router'
 import Head from '../../../components/atoms/Head'
 import { battlesuitFeatures } from '../../../lib/honkai3rd/battlesuits'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 interface ElfShowPageProps {
   elf: ElfData
@@ -33,7 +33,7 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
   const elfName = translate(locale, { 'ko-KR': elf.krName }, elf.name)
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${elfName} - ${t(
           'nav.abyss-lab'
@@ -55,7 +55,6 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
           })
           .join(', ')}`}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -139,7 +138,7 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
           )
         })}
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/elfs/index.tsx b/src/pages/honkai3rd/elfs/index.tsx
index 3108042f..bbc8a8e4 100644
--- a/src/pages/honkai3rd/elfs/index.tsx
+++ b/src/pages/honkai3rd/elfs/index.tsx
@@ -4,12 +4,12 @@ import { NextPageContext } from 'next'
 import { pick } from 'ramda'
 import ElfCard from '../../../components/molecules/ElfCard'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { ElfData } from '../../../lib/honkai3rd/elfs'
 import { getI18NProps } from '../../../server/i18n'
 import { listElfs } from '../../../server/data/honkai3rd/elfs'
 import { useTranslation } from '../../../lib/i18n'
 import Head from '../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 interface ElfListPageProps {
   elfs: Pick<ElfData, 'id' | 'name' | 'krName'>[]
@@ -19,16 +19,13 @@ const ElfListPage = ({ elfs }: ElfListPageProps) => {
   const { t } = useTranslation()
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${t('breadcrumb.elfs')} - ${t(
           'nav.abyss-lab'
         )}`}
         description={t('elfs-list.description')}
       />
-
-      <Honkai3rdNavigator />
-
       <Box p={3}>
         <Breadcrumb
           items={[
@@ -50,7 +47,7 @@ const ElfListPage = ({ elfs }: ElfListPageProps) => {
           })}
         </Flex>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/enemies/index.tsx b/src/pages/honkai3rd/enemies/index.tsx
index c8c61c6f..342d5bb9 100644
--- a/src/pages/honkai3rd/enemies/index.tsx
+++ b/src/pages/honkai3rd/enemies/index.tsx
@@ -1,13 +1,13 @@
 /** @jsxImportSource theme-ui */
 import { Box, Heading } from '@theme-ui/components'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { NextPageContext } from 'next'
 import { getI18NProps } from '../../../server/i18n'
 import { useTranslation } from '../../../lib/i18n'
 import Head from '../../../components/atoms/Head'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { times } from 'ramda'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 const enemyIdList = [
   ...times((i) => i + 0, 1000).map((i) => {
@@ -110,12 +110,11 @@ const Honkai3rdIndexPage = () => {
   }, [validList])
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: Home - ${t('nav.abyss-lab')}`}
         description={t('index.description')}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -166,7 +165,7 @@ const Honkai3rdIndexPage = () => {
           )
         })}
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/index.tsx b/src/pages/honkai3rd/index.tsx
index 5d157da6..52ecdf00 100644
--- a/src/pages/honkai3rd/index.tsx
+++ b/src/pages/honkai3rd/index.tsx
@@ -2,7 +2,6 @@
 import { Box, Heading, Text, Flex, Link } from '@theme-ui/components'
 import { useCallback, useEffect, useState } from 'react'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
 import { NextPageContext } from 'next'
 import { getI18NProps } from '../../server/i18n'
 import { useTranslation } from '../../lib/i18n'
@@ -12,6 +11,7 @@ import { mdiGithub } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import Head from '../../components/atoms/Head'
 import { assetsBucketBaseUrl } from '../../lib/consts'
+import Honkai3rdLayout from '../../components/layouts/Honkai3rdLayout'
 
 const bannerValkyries = [
   'kiana',
@@ -44,12 +44,11 @@ const Honkai3rdIndexPage = () => {
   }, [bannerIndex, switchBanner])
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: Home - ${t('nav.abyss-lab')}`}
         description={t('index.description')}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -92,7 +91,7 @@ const Honkai3rdIndexPage = () => {
           </Link>
         </Box>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/stigmata/index.tsx b/src/pages/honkai3rd/stigmata/index.tsx
index a384c50a..ee9e15e2 100644
--- a/src/pages/honkai3rd/stigmata/index.tsx
+++ b/src/pages/honkai3rd/stigmata/index.tsx
@@ -8,7 +8,6 @@ import PageLink from '../../../components/atoms/PageLink'
 import StigmataCard from '../../../components/molecules/StigmataCard'
 import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { StigmataData, StigmataSet } from '../../../lib/honkai3rd/stigmata'
 import { getI18NProps } from '../../../server/i18n'
 import {
@@ -17,6 +16,7 @@ import {
 } from '../../../server/data/honkai3rd/stigmata'
 import { useTranslation } from 'next-i18next'
 import Head from '../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 interface StigmataListPageProps {
   stigmataDataList: Pick<StigmataData, 'id' | 'name' | 'rarity' | 'krName'>[]
@@ -38,14 +38,13 @@ const StigmataListPage = ({
   }, [query])
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${t(
           'breadcrumb.stigmata'
         )} - ${t('nav.abyss-lab')}`}
         description={t('stigmata-list.description')}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -94,7 +93,7 @@ const StigmataListPage = ({
               })}
         </Flex>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/versions/[versionId].tsx b/src/pages/honkai3rd/versions/[versionId].tsx
index 4df1d21c..0df4bc31 100644
--- a/src/pages/honkai3rd/versions/[versionId].tsx
+++ b/src/pages/honkai3rd/versions/[versionId].tsx
@@ -3,7 +3,6 @@ import { Box, Heading, Link, Flex, Text, Paragraph } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import GanttChart from '../../../components/organisms/GanttChart'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import {
   getVersion,
   listVersionData,
@@ -26,6 +25,7 @@ import { useRouter } from 'next/router'
 import Head from '../../../components/atoms/Head'
 import PageLink from '../../../components/atoms/PageLink'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 interface VersionShowPageProps {
   versionData: VersionData
@@ -44,7 +44,7 @@ const VersionShowPage = ({
   const { locale } = useRouter()
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: v${versionData.version} - ${t(
           'nav.abyss-lab'
@@ -65,7 +65,6 @@ const VersionShowPage = ({
           })
           .join(',')}`}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -221,7 +220,7 @@ const VersionShowPage = ({
           <Paragraph mb={4}>{t('versions.supply-events-disclaimer')}</Paragraph>
         </Box>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/versions/index.tsx b/src/pages/honkai3rd/versions/index.tsx
index 3509df26..28a154a4 100644
--- a/src/pages/honkai3rd/versions/index.tsx
+++ b/src/pages/honkai3rd/versions/index.tsx
@@ -4,7 +4,6 @@ import NextLink from 'next/link'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import GanttChart from '../../../components/organisms/GanttChart'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits'
 import { listSupplyEventsByVersion } from '../../../server/data/honkai3rd/supplyEvents'
 import {
@@ -26,6 +25,7 @@ import { useRouter } from 'next/router'
 import Head from '../../../components/atoms/Head'
 import PageLink from '../../../components/atoms/PageLink'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
@@ -46,7 +46,7 @@ const VersionIndexPage = ({
   const { locale } = useRouter()
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${t(
           'breadcrumb.versions'
@@ -54,8 +54,6 @@ const VersionIndexPage = ({
         description={t('versions.list-page-description')}
       />
 
-      <Honkai3rdNavigator />
-
       <Box p={3}>
         <Breadcrumb
           items={[
@@ -243,7 +241,7 @@ const VersionIndexPage = ({
           })}
         </Box>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/weapons/[weaponId].tsx b/src/pages/honkai3rd/weapons/[weaponId].tsx
index 5d3e3f7e..f8abfe05 100644
--- a/src/pages/honkai3rd/weapons/[weaponId].tsx
+++ b/src/pages/honkai3rd/weapons/[weaponId].tsx
@@ -3,7 +3,6 @@ import { Box, Card, Heading, Paragraph } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
 import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
 import {
@@ -15,6 +14,7 @@ import { useTranslation, translate } from '../../../lib/i18n'
 import Head from '../../../components/atoms/Head'
 import PageLink from '../../../components/atoms/PageLink'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 interface WeaponShowPageProps {
   weapon: WeaponData
@@ -28,7 +28,7 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
   const weaponCategory = t(`weapons-show.${weapon.category}`)
 
   return (
-    <Box>
+    <Honkai3rdLayout>
       <Head
         title={`${t('breadcrumb.honkai-3rd')}: ${weaponName} - ${t(
           'nav.abyss-lab'
@@ -39,7 +39,6 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
           weapon.atk
         } / CRT : ${weapon.crt}`}
       />
-      <Honkai3rdNavigator />
 
       <Box p={3}>
         <Breadcrumb
@@ -106,7 +105,7 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
           })}
         </Box>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/honkai3rd/weapons/index.tsx b/src/pages/honkai3rd/weapons/index.tsx
index 2028bc36..868b3146 100644
--- a/src/pages/honkai3rd/weapons/index.tsx
+++ b/src/pages/honkai3rd/weapons/index.tsx
@@ -1,7 +1,6 @@
 /** @jsxImportSource theme-ui */
 import { Box, Heading, Flex } from '@theme-ui/components'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { listWeapons } from '../../../server/data/honkai3rd/weapons'
 import { pick } from 'ramda'
 import { useMemo } from 'react'
@@ -13,6 +12,7 @@ import { getI18NProps } from '../../../server/i18n'
 import { NextPageContext } from 'next'
 import { useTranslation, translate } from '../../../lib/i18n'
 import Head from '../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 
 type WeaponListItemData = Pick<
   WeaponData,
@@ -57,50 +57,51 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
   }, [weaponDataList, filter])
 
   return (
-    <Box>
-      <Head
-        title={`${t('breadcrumb.honkai-3rd')}: ${t('breadcrumb.weapons')} - ${t(
-          'nav.abyss-lab'
-        )}`}
-        description={t('weapons-list.description')}
-      />
-      <Honkai3rdNavigator />
-
-      <Box p={3}>
-        <Breadcrumb
-          items={[
-            { href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
-            { href: '/honkai3rd/weapons', label: t('breadcrumb.weapons') },
-          ]}
+    <Honkai3rdLayout>
+      <Box>
+        <Head
+          title={`${t('breadcrumb.honkai-3rd')}: ${t(
+            'breadcrumb.weapons'
+          )} - ${t('nav.abyss-lab')}`}
+          description={t('weapons-list.description')}
         />
 
-        <Heading as='h1'>{t('weapons-list.weapons')}</Heading>
-        <Box>
-          <Heading as='h3'>{t('weapons-list.filter-by-category')}</Heading>
-          <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
-            {weaponFilterOptions.map(({ value, label, krLabel }) => {
-              return (
-                <FilterButton
-                  key={value}
-                  active={value === filter}
-                  value={value}
-                  label={translate(locale, { 'ko-KR': krLabel }, label)}
-                  m={1}
-                />
-              )
-            })}
+        <Box p={3}>
+          <Breadcrumb
+            items={[
+              { href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
+              { href: '/honkai3rd/weapons', label: t('breadcrumb.weapons') },
+            ]}
+          />
+
+          <Heading as='h1'>{t('weapons-list.weapons')}</Heading>
+          <Box>
+            <Heading as='h3'>{t('weapons-list.filter-by-category')}</Heading>
+            <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
+              {weaponFilterOptions.map(({ value, label, krLabel }) => {
+                return (
+                  <FilterButton
+                    key={value}
+                    active={value === filter}
+                    value={value}
+                    label={translate(locale, { 'ko-KR': krLabel }, label)}
+                    m={1}
+                  />
+                )
+              })}
+            </Flex>
+          </Box>
+          <Flex
+            sx={{
+              flexWrap: 'wrap',
+              justifyContent: 'space-around',
+            }}
+          >
+            {weaponList}
           </Flex>
         </Box>
-        <Flex
-          sx={{
-            flexWrap: 'wrap',
-            justifyContent: 'space-around',
-          }}
-        >
-          {weaponList}
-        </Flex>
       </Box>
-    </Box>
+    </Honkai3rdLayout>
   )
 }
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ad65e666..432ad735 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,6 +3,7 @@ import { Box, Text, Image } from '@theme-ui/components'
 import PageLink from '../components/atoms/PageLink'
 import RootNavigator from '../components/organisms/RootNavigator'
 import Head from '../components/atoms/Head'
+import { assetsBucketBaseUrl } from '../lib/consts'
 
 const IndexPage = () => {
   return (
@@ -15,7 +16,7 @@ const IndexPage = () => {
             <Box sx={{ position: 'relative' }}>
               <Image
                 alt='Honkai 3rd Wallpaper'
-                src='/assets/honkai3rd/wallpaper.png'
+                src={`${assetsBucketBaseUrl}/assets/honkai3rd/wallpaper.png`}
                 width={640}
                 height={360}
               />
diff --git a/src/styles/nextjs.css b/src/styles/nextjs.css
new file mode 100644
index 00000000..5b126844
--- /dev/null
+++ b/src/styles/nextjs.css
@@ -0,0 +1,7 @@
+body {
+  height: 100vh;
+}
+
+#__next {
+  height: 100%;
+}
diff --git a/public/assets/nprogress.css b/src/styles/nprogress.css
similarity index 100%
rename from public/assets/nprogress.css
rename to src/styles/nprogress.css