mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-02-09 21:45:53 -05:00
MyMeta - App Drawer (#234)
* MyMeta - App Drawer * MyMeta - App Drawer - help (#242) * update nextjs @10.0.3 * Use next image component for main app drawer icons * change links * backdrop to close drawer * Links * typecheck * Removed py for page header Co-authored-by: The Lone Rōnin <log2n@protonmail.com> * Framer Motion Integration * Removed drawer transparency * Fix disappeared Login component * remove unnecessary pointerevent thing (thanks to display=none) * Fix ticker display * Added guilds Co-authored-by: Pacien Boisson <pakokrew@users.noreply.github.com> Co-authored-by: Pacien Boisson <pakokrew@gmail.com>
This commit is contained in:
The Lone Rōnin
@@ -14,32 +14,31 @@ export const LoginButton: React.FC = () => {
|
||||
await connectWeb3();
|
||||
}, [connectWeb3]);
|
||||
|
||||
if (isConnected) {
|
||||
return (
|
||||
<Box>
|
||||
<Text fontFamily="body" color="whiteAlpha.700">
|
||||
{formatAddress(address)}
|
||||
</Text>
|
||||
<HStack spacing={2}>
|
||||
<MetaLink href="/profile/setup">Setup profile</MetaLink>
|
||||
<Text color="cyan.400">|</Text>
|
||||
<Button
|
||||
onClick={disconnect}
|
||||
fontFamily="body"
|
||||
color="cyan.400"
|
||||
variant="link"
|
||||
fontWeight="normal"
|
||||
>
|
||||
Disconnect
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Box>
|
||||
{isConnected ? (
|
||||
<Box>
|
||||
<Text fontFamily="body" color="whiteAlpha.700">
|
||||
{formatAddress(address)}
|
||||
</Text>
|
||||
<HStack spacing={2}>
|
||||
<MetaLink href="/profile/setup">Setup profile</MetaLink>
|
||||
<Text color="cyan.400">|</Text>
|
||||
<Button
|
||||
onClick={disconnect}
|
||||
fontFamily="body"
|
||||
color="cyan.400"
|
||||
variant="link"
|
||||
fontWeight="normal"
|
||||
>
|
||||
Disconnect
|
||||
</Button>
|
||||
</HStack>
|
||||
</Box>
|
||||
) : (
|
||||
<MetaButton size="md" px={8} onClick={handleLoginClick}>
|
||||
Connect wallet
|
||||
</MetaButton>
|
||||
)}
|
||||
</Box>
|
||||
<MetaButton size="md" px={8} onClick={handleLoginClick}>
|
||||
Connect wallet
|
||||
</MetaButton>
|
||||
);
|
||||
};
|
||||
|
||||
182
packages/web/components/MobileFooter.tsx
Normal file
182
packages/web/components/MobileFooter.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { Button, Flex, Image, Stack, useDisclosure } from '@metafam/ds';
|
||||
import MetaGameLogo from 'assets/logo.png';
|
||||
import { MetaLink } from 'components/Link';
|
||||
import { motion } from 'framer-motion';
|
||||
import NextImage from 'next/dist/client/image';
|
||||
import MetaBoxButton from 'public/assets/drawer/box.button.bg.png';
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
DrawerItemsLeft,
|
||||
DrawerItemsRight,
|
||||
DrawerSubItems,
|
||||
} from '../utils/drawerItems';
|
||||
|
||||
const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
|
||||
children,
|
||||
href,
|
||||
isExternal,
|
||||
}) => {
|
||||
return (
|
||||
<MetaLink zIndex="2" href={href} isExternal={isExternal}>
|
||||
<Button
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="20vw"
|
||||
height="5rem"
|
||||
textDecoration="none"
|
||||
variant="link"
|
||||
p="1"
|
||||
fontFamily="mono"
|
||||
color="whiteAlpha.700"
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
</MetaLink>
|
||||
);
|
||||
};
|
||||
|
||||
const SubMenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
|
||||
children,
|
||||
href,
|
||||
isExternal,
|
||||
}) => {
|
||||
return (
|
||||
<MetaLink
|
||||
zIndex="2"
|
||||
href={href}
|
||||
isExternal={isExternal}
|
||||
margin="0 !important"
|
||||
width="7rem"
|
||||
height="7rem"
|
||||
>
|
||||
<Button
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
width="6rem"
|
||||
height="6rem"
|
||||
textDecoration="none"
|
||||
variant="link"
|
||||
margin="0.5rem"
|
||||
padding="0.5rem"
|
||||
backgroundImage={`url(${MetaBoxButton})`}
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
</MetaLink>
|
||||
);
|
||||
};
|
||||
|
||||
export interface SubImageProps {
|
||||
src: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
export const SubImage: React.FC<SubImageProps> = ({ src, alt }) => {
|
||||
return <Image src={src} alt={alt} height="85%" />;
|
||||
};
|
||||
|
||||
export const MobileFooter: React.FC = () => {
|
||||
const { isOpen, onToggle, onClose } = useDisclosure();
|
||||
|
||||
return (
|
||||
<Flex
|
||||
as="nav"
|
||||
align="center"
|
||||
justify="center"
|
||||
wrap="wrap"
|
||||
color="offwhite"
|
||||
position="fixed"
|
||||
display={{ base: 'flex', md: 'none' }}
|
||||
left="0"
|
||||
bottom="0"
|
||||
width="100%"
|
||||
height="5rem"
|
||||
zIndex="11"
|
||||
background="linear-gradient(180deg, #40347C 58.55%, #A751BD 100%)"
|
||||
>
|
||||
{DrawerItemsLeft.map((item) => (
|
||||
<MenuItem href={item.href} isExternal={item.isExternal} key={item.href}>
|
||||
<NextImage src={item.src} alt={item.alt} width={35} height={35} />
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
))}
|
||||
|
||||
<motion.div
|
||||
animate={isOpen ? 'show' : 'hide'}
|
||||
transition={{ duration: 0.25 }}
|
||||
variants={{
|
||||
show: {
|
||||
position: 'relative',
|
||||
top: '-3rem',
|
||||
filter: 'drop-shadow(0 0 15px #a5b9f680)',
|
||||
},
|
||||
hide: { position: 'relative', top: 0, filter: 'none' },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
display="flex"
|
||||
zIndex="11"
|
||||
textDecoration="none"
|
||||
variant="link"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="20vw"
|
||||
height="5rem"
|
||||
onClick={onToggle}
|
||||
>
|
||||
<Image // TODO use NextImage component once images are without text
|
||||
src={MetaGameLogo}
|
||||
alt="MetaGameLogo"
|
||||
height="6rem"
|
||||
position="relative"
|
||||
top="0.5rem"
|
||||
/>
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{DrawerItemsRight.map((item) => (
|
||||
<MenuItem href={item.href} isExternal={item.isExternal} key={item.href}>
|
||||
<NextImage src={item.src} alt={item.alt} width={35} height={35} />
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
))}
|
||||
|
||||
<motion.div
|
||||
animate={isOpen ? 'show' : 'hide'}
|
||||
transition={{ duration: 0.25 }}
|
||||
variants={{
|
||||
show: { opacity: 1, pointerEvents: 'inherit' },
|
||||
hide: { opacity: 0, pointerEvents: 'none' },
|
||||
}}
|
||||
onClick={onClose}
|
||||
>
|
||||
<Stack
|
||||
position="fixed"
|
||||
left="0"
|
||||
top="0"
|
||||
width="100vw"
|
||||
height="calc(100vh - 5rem)"
|
||||
background="linear-gradient(180deg, rgba(76, 63, 143, 0.95) 62.76%, rgba(184, 169, 255, 0.95) 100%);"
|
||||
display="grid"
|
||||
gridTemplateColumns="auto auto auto"
|
||||
justify="center"
|
||||
align="center"
|
||||
padding="1rem 1rem 6rem 1rem"
|
||||
>
|
||||
{DrawerSubItems.map((item) => {
|
||||
return (
|
||||
<SubMenuItem href={item.href} key={item.alt}>
|
||||
<SubImage src={item.src} alt={item.alt} />
|
||||
</SubMenuItem>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</motion.div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -1,10 +1,23 @@
|
||||
import { Box, Button, Flex, Image, Stack } from '@metafam/ds';
|
||||
import MetaGameImage from 'assets/metagame.png';
|
||||
import { Box, Button, Flex, Image, Stack, useDisclosure } from '@metafam/ds';
|
||||
import { MetaLink } from 'components/Link';
|
||||
import { LoginButton } from 'components/LoginButton';
|
||||
import { Ticker } from 'components/Ticker';
|
||||
import { motion } from 'framer-motion';
|
||||
import NextImage from 'next/image';
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
DrawerItemsLeft,
|
||||
DrawerItemsRight,
|
||||
DrawerSubItems,
|
||||
} from '../utils/drawerItems';
|
||||
|
||||
const MetaBoxButton = '/assets/drawer/box.button.bg.png';
|
||||
const MetaBox = '/assets/drawer/desktop-box.png';
|
||||
const MetaDrawer = '/assets/drawer/desktop.gradient.png';
|
||||
const MetaGameLogo = '/assets/logo.png';
|
||||
const MetaGameImage = '/assets/metagame.png';
|
||||
|
||||
const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
|
||||
children,
|
||||
href,
|
||||
@@ -12,18 +25,66 @@ const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
|
||||
}) => {
|
||||
return (
|
||||
<MetaLink
|
||||
zIndex="2"
|
||||
href={href}
|
||||
isExternal={isExternal}
|
||||
textDecoration="none"
|
||||
_hover={{ textDecoration: 'none' }}
|
||||
>
|
||||
<Button
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="calc(32rem / 5)"
|
||||
textDecoration="none"
|
||||
_hover={{ textDecoration: 'none' }}
|
||||
variant="link"
|
||||
p="1"
|
||||
fontFamily="mono"
|
||||
color="whiteAlpha.700"
|
||||
className="filter-effect"
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
</MetaLink>
|
||||
);
|
||||
};
|
||||
|
||||
const SubMenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
|
||||
children,
|
||||
href,
|
||||
isExternal,
|
||||
}) => {
|
||||
return (
|
||||
<MetaLink
|
||||
zIndex="2"
|
||||
href={href}
|
||||
isExternal={isExternal}
|
||||
textDecoration="none"
|
||||
_hover={{ textDecoration: 'none' }}
|
||||
>
|
||||
<style jsx>{`
|
||||
button.hover-effect:hover {
|
||||
filter: drop-shadow(0 0 15px #a5b9f680);
|
||||
}
|
||||
`}</style>
|
||||
<Button
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="8.25rem"
|
||||
height="8.25rem"
|
||||
textDecoration="none"
|
||||
variant="link"
|
||||
p="1"
|
||||
fontFamily="mono"
|
||||
color="whiteAlpha.700"
|
||||
_hover={{ color: 'pink.500', textDecoration: 'none' }}
|
||||
className="hover"
|
||||
margin="1rem"
|
||||
padding="1rem"
|
||||
backgroundImage={`url(${MetaBoxButton})`}
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
@@ -32,8 +93,7 @@ const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
|
||||
};
|
||||
|
||||
export const PageHeader: React.FC = () => {
|
||||
const [show, setShow] = React.useState(false);
|
||||
const handleToggle = () => setShow(!show);
|
||||
const { isOpen, onToggle, onClose } = useDisclosure();
|
||||
|
||||
return (
|
||||
<Flex
|
||||
@@ -42,65 +102,142 @@ export const PageHeader: React.FC = () => {
|
||||
justify="space-between"
|
||||
wrap="wrap"
|
||||
color="offwhite"
|
||||
py="6"
|
||||
px="8"
|
||||
position="relative"
|
||||
display={{ base: 'none', md: 'flex' }}
|
||||
>
|
||||
<MetaLink href="/" display="block" mr="10">
|
||||
<Image src={MetaGameImage} alt="MetaGame" mt={-2} w="9rem" />
|
||||
<Box mt={2}>
|
||||
<NextImage
|
||||
src={MetaGameImage}
|
||||
alt="MetaGame"
|
||||
width={144}
|
||||
height={62}
|
||||
/>
|
||||
</Box>
|
||||
</MetaLink>
|
||||
|
||||
<Button
|
||||
variant="link"
|
||||
display={{ base: 'block', md: 'none' }}
|
||||
onClick={handleToggle}
|
||||
<Stack
|
||||
width="48rem"
|
||||
height="100%"
|
||||
direction="row"
|
||||
justify="center"
|
||||
align="center"
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="calc(50% - 24rem)"
|
||||
padding="0 0 0.5rem 0"
|
||||
>
|
||||
<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 position="absolute" left="calc(50% - 24rem)" top="0" zIndex="1">
|
||||
<NextImage
|
||||
src={MetaDrawer}
|
||||
alt="MetaDrawer"
|
||||
width={768}
|
||||
height={94}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display={{ base: show ? 'block' : 'none', md: 'flex' }}
|
||||
width={{ base: 'full', md: 'auto' }}
|
||||
alignItems="center"
|
||||
flexGrow={1}
|
||||
my={{ base: 8, md: 0 }}
|
||||
>
|
||||
<Stack
|
||||
direction={{ base: 'column', md: 'row' }}
|
||||
spacing={{ base: 4, md: 6, lg: 10 }}
|
||||
>
|
||||
<MenuItem href="/guilds">Guilds</MenuItem>
|
||||
<MenuItem href="https://discord.gg/VYZPBnx" isExternal>
|
||||
Discord
|
||||
{DrawerItemsLeft.map((item) => (
|
||||
<MenuItem
|
||||
key={item.alt}
|
||||
href={item.href}
|
||||
isExternal={item.isExternal}
|
||||
>
|
||||
<NextImage src={item.src} alt={item.alt} width={35} height={35} />
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
<MenuItem href="https://wiki.metagame.wtf/" isExternal>
|
||||
Wiki
|
||||
</MenuItem>
|
||||
<MenuItem href="https://forum.metagame.wtf" isExternal>
|
||||
Forums
|
||||
</MenuItem>
|
||||
<MenuItem href="https://metagame.substack.com" isExternal>
|
||||
Blog
|
||||
</MenuItem>
|
||||
</Stack>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
<Box
|
||||
display={{ base: show ? 'block' : 'none', md: 'flex' }}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width={{ base: 'full', md: 'auto' }}
|
||||
>
|
||||
<motion.div
|
||||
animate={isOpen ? 'show' : 'hide'}
|
||||
transition={{ duration: 0.25 }}
|
||||
variants={{
|
||||
show: { position: 'relative', top: '46rem' },
|
||||
hide: { position: 'relative', top: '1rem' },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
display="flex"
|
||||
zIndex="11"
|
||||
textDecoration="none"
|
||||
variant="link"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="calc(32rem / 5)"
|
||||
className="filter-effect"
|
||||
position="relative"
|
||||
left="-0.25rem"
|
||||
onClick={onToggle}
|
||||
>
|
||||
<NextImage
|
||||
src={MetaGameLogo}
|
||||
alt="MetaGameLogo"
|
||||
width={80}
|
||||
height={96}
|
||||
/>
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{DrawerItemsRight.map((item) => (
|
||||
<MenuItem
|
||||
key={item.alt}
|
||||
href={item.href}
|
||||
isExternal={item.isExternal}
|
||||
>
|
||||
<NextImage src={item.src} alt={item.alt} width={35} height={35} />
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<Flex justifyContent="center" alignItems="center">
|
||||
<Ticker />
|
||||
<LoginButton />
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<motion.div
|
||||
animate={isOpen ? 'show' : 'hide'}
|
||||
transition={{ duration: 0.25 }}
|
||||
variants={{
|
||||
show: { display: 'block', opacity: 1 },
|
||||
hide: { display: 'none', opacity: 0 },
|
||||
}}
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
zIndex: 10,
|
||||
top: '5rem',
|
||||
left: 'calc(50% - 16.5rem)',
|
||||
display: 'none',
|
||||
}}
|
||||
>
|
||||
<Stack width="33rem" direction="row" flexWrap="wrap" padding="1rem 0">
|
||||
<Box
|
||||
position="fixed"
|
||||
top="0"
|
||||
bottom="0"
|
||||
left="0"
|
||||
right="0"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<Box position="absolute" left="calc(50% - 16.5rem)" top="0">
|
||||
<NextImage src={MetaBox} alt="MetaBox" width={528} height={695} />
|
||||
</Box>
|
||||
{DrawerSubItems.map((item) => {
|
||||
return (
|
||||
<SubMenuItem
|
||||
href={item.href}
|
||||
key={item.alt}
|
||||
isExternal={item.isExternal}
|
||||
>
|
||||
<Image src={item.src} alt={item.alt} />
|
||||
{item.text}
|
||||
</SubMenuItem>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</motion.div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user