Move footer
This commit is contained in:
Sakura Knoll
@@ -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
|
||||
sx={{ width: 50, height: 50 }}
|
||||
onClick={() => setHiddenMobileNav(false)}
|
||||
>
|
||||
<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>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
+5
-3
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user