github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-01-23 13:17:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add responsive page header (#87)

Browse Source
This commit is contained in:
Kris Urbas
2020-08-24 18:41:54 +10:00
committed by GitHub
parent 88553140e6
commit b5f5f661ed
5 changed files with 101 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/web/components/PageHeader.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { Box, Button, Flex, Image, MetaButton, Stack } from '@metafam/ds';
import { MetaLink } from 'components/Link';
import NextLink from 'next/link';
import React from 'react';
import MetaGameImage from '../public/images/metagame.png';
const MenuItem: React.FC = ({ children }) => (
<Box>
<Button variant="link" color="offwhite" p="2">
{children}
</Button>
</Box>
);
export const PageHeader: React.FC = () => {
const [show, setShow] = React.useState(false);
const handleToggle = () => setShow(!show);
return (
<Flex
as="nav"
align="center"
justify="space-between"
wrap="wrap"
color="offwhite"
py="6"
px="8"
>
<MetaLink href="/" display="block" mr="10">
<Image src={MetaGameImage} alt="MetaGame" mt={-2} />
</MetaLink>
<Button
variant="link"
display={{ base: 'block', md: 'none' }}
onClick={handleToggle}
>
<svg
fill="white"
width="1.5rem"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</Button>
<Box
display={{ base: show ? 'block' : 'none', md: 'flex' }}
width={{ base: 'full', md: 'auto' }}
alignItems="center"
flexGrow={1}
my={{ base: 4, md: 0 }}
>
<Stack
direction={{ base: 'column', md: 'row' }}
spacing={{ base: 4, md: 6, lg: 10 }}
>
<MenuItem>Quests</MenuItem>
<MenuItem>Raids</MenuItem>
<MenuItem>Players</MenuItem>
<MenuItem>Forum</MenuItem>
</Stack>
</Box>
<Box display={{ base: show ? 'block' : 'none', md: 'block' }}>
<NextLink href="/login" display="block">
<MetaButton>Sign in</MetaButton>
</NextLink>
</Box>
</Flex>
);
};

2
packages/web/pages/_app.tsx
View File

@@ -1,4 +1,5 @@
import { ChakraProvider, CSSReset, MetaTheme } from '@metafam/ds';
import { PageHeader } from 'components/PageHeader';
import { AppProps } from 'next/app';
import Head from 'next/head';
@@ -9,6 +10,7 @@ const app: React.FC<AppProps> = ({ pageProps, Component }) => {
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
{!pageProps.hidePageHeader && <PageHeader />}
<Component {...pageProps} />
</ChakraProvider>
);

8
packages/web/pages/login.tsx
View File

@@ -8,6 +8,14 @@ import { WelcomePlayer } from '../components/WelcomePlayer';
import BackgroundImage from '../public/images/login-background.jpg';
import MetaGameImage from '../public/images/metagame.png';
export const getStaticProps = async () => {
return {
props: {
hidePageHeader: true,
},
};
};
const Login: React.FC = () => {
const [step, setStep] = useState(0);
return (

8
packages/web/pages/profile/setup.tsx
View File

@@ -11,6 +11,14 @@ import {
} from '../../contexts/SetupContext';
import BackgroundImage from '../../public/images/profile-background.jpg';
export const getStaticProps = async () => {
return {
props: {
hidePageHeader: true,
},
};
};
const ProfileSetup: React.FC = () => {
const { step, numTotalSteps } = useContext(SetupContext);
return (

8
packages/web/pages/profile/success.tsx
View File

@@ -4,6 +4,14 @@ import { PageContainer } from '../../components/Container';
import { SuccessPlayer } from '../../components/SuccessPlayer';
import BackgroundImage from '../../public/images/profile-background.jpg';
export const getStaticProps = async () => {
return {
props: {
hidePageHeader: true,
},
};
};
const Profile: React.FC = () => {
return (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>