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>

packages/web/components/LoginButton.tsx

@@ -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>
   );
 };

packages/web/components/MobileFooter.tsx

@@ -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>
+  );
+};

packages/web/components/PageHeader.tsx

@@ -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>
   );
 };

packages/web/package.json

@@ -17,9 +17,10 @@
     "@walletconnect/web3-provider": "^1.2.1",
     "ethers": "^5.0.8",
     "fake-tag": "2.0.0",
+    "framer-motion": "^3.1.1",
     "graphql": "^15.0.0",
     "isomorphic-unfetch": "^3.0.0",
-    "next": "latest",
+    "next": "^10.0.3",
     "next-images": "^1.4.1",
     "next-urql": "2.0.0",
     "node-fetch": "^2.6.1",

packages/web/pages/_app.tsx

@@ -1,4 +1,5 @@
 import { ChakraProvider, CSSReset, MetaTheme } from '@metafam/ds';
+import { MobileFooter } from 'components/MobileFooter';
 import { PageHeader } from 'components/PageHeader';
 import { CONFIG } from 'config';
 import { Web3ContextProvider } from 'contexts/Web3Context';
@@ -16,7 +17,8 @@ const app: React.FC<AppProps> = ({ pageProps, Component }) => {
         <title>MetaGame</title>
       </Head>
       <Web3ContextProvider>
-        {!pageProps.hidePageHeader && <PageHeader />}
+        {!pageProps.hideAppDrawer && <PageHeader />}
+        {!pageProps.hideAppDrawer && <MobileFooter />}
         <Component {...pageProps} />
       </Web3ContextProvider>
     </ChakraProvider>

packages/web/pages/profile/setup.tsx

@@ -21,7 +21,7 @@ export const getStaticProps = async () => {
       skillsList,
       personalityTypes,
       playerTypes,
-      hidePageHeader: true,
+      hideAppDrawer: true,
     },
   };
 };

packages/web/pages/profile/success.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 export const getStaticProps = async () => {
   return {
     props: {
-      hidePageHeader: true,
+      hideAppDrawer: true,
     },
   };
 };

packages/web/pages/register.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 export const getStaticProps = async () => {
   return {
     props: {
-      hidePageHeader: true,
+      hideAppDrawer: true,
     },
   };
 };

packages/web/pages/welcome.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 export const getStaticProps = async () => {
   return {
     props: {
-      hidePageHeader: true,
+      hideAppDrawer: true,
     },
   };
 };

packages/web/utils/drawerItems.ts

@@ -0,0 +1,132 @@
+const MetaCalendarImageUrl = '/assets/drawer/calendar.png';
+const MetaDiscordImageUrl = '/assets/drawer/discord.png';
+const MetaGithubImageUrl = '/assets/drawer/github.png';
+const MetaGuildsImageUrl = '/assets/emojis/crossed-swords.png';
+const MetaSeedPoolImageUrl = '/assets/drawer/seed_pool.png';
+const MetaLeaderboardImageUrl = '/assets/drawer/leaderboard.png';
+const MetaLibraryImageUrl = '/assets/drawer/library.png';
+const MetaViewImageUrl = '/assets/drawer/metaview.png';
+const MetaNewsletterImageUrl = '/assets/drawer/newsletter.png';
+const MetaSeedmarketImageUrl = '/assets/drawer/seedmarket.png';
+const MetaTwitterImageUrl = '/assets/drawer/twitter.png';
+
+const MetaQuestsImageUrl = '/assets/drawer/quests.png';
+const MetaRaidsImageUrl = '/assets/drawer/raids.png';
+const MetaPlayersImageUrl = '/assets/drawer/players.png';
+const MetaForumImageUrl = '/assets/drawer/forum.png';
+
+export interface DrawerItemType {
+  href: string;
+  isExternal?: boolean;
+  src: string;
+  alt: string;
+  text?: string;
+}
+
+export const DrawerItemsLeft: DrawerItemType[] = [
+  {
+    href: '/',
+    isExternal: false,
+    src: MetaPlayersImageUrl,
+    alt: 'MetaPlayers',
+    text: 'Players',
+  },
+  {
+    href: '/guilds',
+    isExternal: false,
+    src: MetaGuildsImageUrl,
+    alt: 'MetaGuilds',
+    text: 'Guilds',
+  },
+];
+
+export const DrawerItemsRight: DrawerItemType[] = [
+  {
+    href: 'https://forum.metagame.wtf/',
+    isExternal: true,
+    src: MetaForumImageUrl,
+    alt: 'MetaForm',
+    text: 'Forum',
+  },
+  {
+    href:
+      'https://miro.com/app/live-embed/o9J_knhEt7w=/?moveToViewport=-8516,-5516,21788,13742',
+    isExternal: true,
+    src: MetaRaidsImageUrl,
+    alt: 'MetaRaids',
+    text: 'Raids',
+  },
+];
+
+export const DrawerSubItems: DrawerItemType[] = [
+  {
+    href: 'https://metagame.substack.com/',
+    isExternal: true,
+    src: MetaNewsletterImageUrl,
+    alt: 'MetaNewsletter',
+  },
+  {
+    href: 'https://anchor.fm/MetaGame/',
+    isExternal: true,
+    src: MetaViewImageUrl,
+    alt: 'MetaView',
+  },
+  {
+    href: 'https://wiki.metagame.wtf/docs/home',
+    isExternal: true,
+    src: MetaLibraryImageUrl,
+    alt: 'MetaLibrary',
+  },
+  {
+    href: 'https://twitter.com/Metafam',
+    isExternal: true,
+    src: MetaTwitterImageUrl,
+    alt: 'MetaTwitter',
+  },
+  {
+    href: 'https://discord.gg/XazuypRcv6',
+    isExternal: true,
+    src: MetaDiscordImageUrl,
+    alt: 'MetaDiscord',
+  },
+  {
+    href: 'https://github.com/MetaFam/TheGame',
+    isExternal: true,
+    src: MetaGithubImageUrl,
+    alt: 'MetaGithub',
+  },
+  {
+    href:
+      'https://calendar.google.com/calendar/u/1?cid=bmloNTlrdGdhZm1tNjRlZDRxazZ1ZTh2djRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ',
+    isExternal: true,
+    src: MetaCalendarImageUrl,
+    alt: 'MetaCalendar',
+  },
+  {
+    href:
+      'https://balancer.exchange/#/swap/ether/0x30cf203b48edaa42c3b4918e955fed26cd012a3f',
+    isExternal: true,
+    src: MetaSeedmarketImageUrl,
+    alt: 'MetaSeedmarket',
+  },
+  {
+    href:
+      'https://pools.balancer.exchange/#/pool/0xea05a15dbce2eb543ffda16950e95b2bd2e40d0e/',
+    isExternal: true,
+    src: MetaSeedPoolImageUrl,
+    alt: 'MetaSeedPool',
+  },
+  {
+    href: 'https://wiki.metagame.wtf/docs/enter-metagame/leaderboard',
+    isExternal: true,
+    src: MetaLeaderboardImageUrl,
+    alt: 'MetaLeaderboard',
+  },
+  {
+    href: 'https://discord.gg/WYUkVpe',
+    isExternal: true,
+    src: MetaQuestsImageUrl,
+    alt: 'MetaQuests',
+    text: 'Quests',
+  },
+];