Move footer

src/components/layouts/Honkai3rdLayout.tsx

@@ -1,10 +1,9 @@
 /** @jsxImportSource theme-ui */
-import { mdiArrowUp, mdiDiscord, mdiGithub, mdiLink, mdiMenu } from '@mdi/js'
+import { mdiArrowUp, 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 { Box, Flex, IconButton } from 'theme-ui'
 import Honkai3rdNavigator from '../organisms/Honkai3rdNavigator'
-import NextLink from 'next/link'
 
 const Honkai3rdLayout: React.FC = ({ children }) => {
   const [hiddenMobileNav, setHiddenMobileNav] = useState(true)
@@ -41,7 +40,7 @@ const Honkai3rdLayout: React.FC = ({ children }) => {
     <Flex
       sx={{
         height: '100%',
-        overflow: 'hidden',
+        overflow: 'hidden'
       }}
     >
       <Box
@@ -52,7 +51,7 @@ const Honkai3rdLayout: React.FC = ({ children }) => {
           borderRightColor: 'border',
           overflowY: 'auto',
           overflowX: 'hidden',
-          display: [hiddenMobileNav ? 'none' : 'block', 'block'],
+          display: [hiddenMobileNav ? 'none' : 'block', 'block']
         }}
       >
         <Honkai3rdNavigator close={close} />
@@ -62,7 +61,7 @@ const Honkai3rdLayout: React.FC = ({ children }) => {
           flex: 1,
           overflowY: 'auto',
           overflowX: 'hidden',
-          scrollBehavior: 'smooth',
+          scrollBehavior: 'smooth'
         }}
         onScroll={handleScroll}
         ref={contentBoxRef}
@@ -78,7 +77,7 @@ const Honkai3rdLayout: React.FC = ({ children }) => {
             pointerEvents: scrolled ? 'auto' : 'none',
             opacity: scrolled ? 1 : 0,
             transition: 'opacity 200ms ease-in-out',
-            backgroundColor: 'transparent',
+            backgroundColor: 'transparent'
           }}
           onClick={scrollToTop}
         >
@@ -90,83 +89,15 @@ const Honkai3rdLayout: React.FC = ({ children }) => {
             display: ['block', 'none'],
             top: 0,
             height: 50,
-            bg: 'transparent',
+            bg: 'transparent'
           }}
         >
-          <IconButton
+          <IconButton sx={{ width: 50, height: 50 }} onClick={() => setHiddenMobileNav(false)}>
-            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>
   )

src/components/organisms/Honkai3rdNavigator.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/router'
 import { useColorMode } from 'theme-ui'
 import { useTranslation } from '../../lib/i18n'
 import NavItem from '../atoms/NavItem'
+import Footer from '../v2/Footer'
 
 interface Honkai3rdNavigatorProps {
   close?: () => void
@@ -102,6 +103,7 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
           </Box>
           <Label>{colorMode === 'default' ? '☀️' : '🌙'}</Label>
         </Flex>
+        <Footer />
       </Box>
     </Box>
   )

src/components/v2/Footer.tsx

@@ -0,0 +1,67 @@
+import { mdiDiscord, mdiGithub, mdiLink } from '@mdi/js'
+import Icon from '@mdi/react'
+import React from 'react'
+import { Box, Flex, Link, Text } from 'theme-ui'
+import NextLink from 'next/link'
+
+interface FooterProps {}
+
+const Footer = ({}: FooterProps) => {
+  return (
+    <Box py={3}>
+      <Flex
+        sx={{
+          flexDirection: 'column'
+        }}
+      >
+        <NextLink href="/honkai3rd/about" passHref>
+          <Link
+            sx={{
+              mb: 2
+            }}
+          >
+            About Abyss Lab
+          </Link>
+        </NextLink>
+        <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>
+        <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>
+        <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>
+  )
+}
+
+export default Footer

src/pages/honkai3rd/index.tsx

@@ -15,6 +15,7 @@ import { useRouter } from 'next/router'
 import { mdiMenuSwap } from '@mdi/js'
 import { useColorMode } from 'theme-ui'
 import PageLink from '../../components/atoms/PageLink'
+import Footer from '../../components/v2/Footer'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
@@ -98,6 +99,7 @@ const HomePage = ({}: VersionIndexPageProps) => {
             <Label>{colorMode === 'default' ? '☀️' : '🌙'}</Label>
           </Flex>
         </Box>
+        <Footer />
       </Box>
     </Box>
   )

src/pages/index.tsx

@@ -4,18 +4,19 @@ import PageLink from '../components/atoms/PageLink'
 import RootNavigator from '../components/organisms/RootNavigator'
 import Head from '../components/atoms/Head'
 import { assetsBucketBaseUrl } from '../lib/consts'
+import Footer from '../components/v2/Footer'
 
 const IndexPage = () => {
   return (
     <Box>
-      <Head title='Abyss Lab - Unofficial Honkai3rd Wiki' />
+      <Head title="Abyss Lab - Unofficial Honkai3rd Wiki" />
       <RootNavigator />
       <Box sx={{ p: 3 }}>
         <Box mb={4}>
-          <PageLink href='/honkai3rd'>
+          <PageLink href="/honkai3rd">
             <Box sx={{ position: 'relative' }}>
               <Image
-                alt='Honkai 3rd Wallpaper'
+                alt="Honkai 3rd Wallpaper"
                 src={`${assetsBucketBaseUrl}/honkai3rd/wallpaper.png`}
                 width={640}
                 height={360}
@@ -24,6 +25,7 @@ const IndexPage = () => {
             <Text sx={{ fontSize: 3 }}>Honkai 3rd</Text>
           </PageLink>
         </Box>
+        <Footer />
       </Box>
     </Box>
   )