From b5f5f661eda74577d5a23fa57f5de2b74cbcbc64 Mon Sep 17 00:00:00 2001 From: Kris Urbas Date: Mon, 24 Aug 2020 18:41:54 +1000 Subject: [PATCH] Add responsive page header (#87) --- packages/web/components/PageHeader.tsx | 75 ++++++++++++++++++++++++++ packages/web/pages/_app.tsx | 2 + packages/web/pages/login.tsx | 8 +++ packages/web/pages/profile/setup.tsx | 8 +++ packages/web/pages/profile/success.tsx | 8 +++ 5 files changed, 101 insertions(+) create mode 100644 packages/web/components/PageHeader.tsx diff --git a/packages/web/components/PageHeader.tsx b/packages/web/components/PageHeader.tsx new file mode 100644 index 00000000..c0b63055 --- /dev/null +++ b/packages/web/components/PageHeader.tsx @@ -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 }) => ( + + + +); + +export const PageHeader: React.FC = () => { + const [show, setShow] = React.useState(false); + const handleToggle = () => setShow(!show); + + return ( + + + MetaGame + + + + + + + Quests + Raids + Players + Forum + + + + + + Sign in + + + + ); +}; diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx index d1d5178d..bc32b957 100644 --- a/packages/web/pages/_app.tsx +++ b/packages/web/pages/_app.tsx @@ -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 = ({ pageProps, Component }) => { + {!pageProps.hidePageHeader && } ); diff --git a/packages/web/pages/login.tsx b/packages/web/pages/login.tsx index bcd327cd..ecdbb646 100644 --- a/packages/web/pages/login.tsx +++ b/packages/web/pages/login.tsx @@ -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 ( diff --git a/packages/web/pages/profile/setup.tsx b/packages/web/pages/profile/setup.tsx index fa57752f..7c0bf9d2 100644 --- a/packages/web/pages/profile/setup.tsx +++ b/packages/web/pages/profile/setup.tsx @@ -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 ( diff --git a/packages/web/pages/profile/success.tsx b/packages/web/pages/profile/success.tsx index 62c9f884..1a364053 100644 --- a/packages/web/pages/profile/success.tsx +++ b/packages/web/pages/profile/success.tsx @@ -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 (