TheGame/packages/web/components/PageHeader.tsx

import {
  Box,
  BoxedNextImage,
  Button,
  Flex,
  Image,
  motion,
  Stack,
  useDisclosure,
} from '@metafam/ds';
import { MetaLink } from 'components/Link';
import { LoginButton } from 'components/LoginButton';
import { Ticker } from 'components/Ticker';
import React from 'react';

import { useMounted } from '../lib/hooks';
import { isBackdropFilterSupported } from '../utils/compatibilityHelpers';
import {
  DrawerItemsLeft,
  DrawerItemsRight,
  DrawerSubItems,
} from '../utils/drawerItems';

const MetaDrawer = '/assets/drawer/desktop.gradient.png';
const MetaGradientBottom = '/assets/drawer/desktop.gradient.bottom.png';
const MetaGameLogo = '/assets/logo.alt.png';
const drawer = { width: '39rem', height: '5.5rem' };
const content = { width: '33rem', height: '46rem' };

const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
  children,
  href,
  isExternal,
}) => (
  <MetaLink
    href={href}
    isExternal={isExternal}
    textDecoration="none"
    _hover={{ textDecoration: 'none' }}
    _focus={{ boxShadow: 'none' }}
    zIndex={15}
  >
    <Button
      display="flex"
      flexDirection="column"
      justifyContent="center"
      alignItems="center"
      width={`calc(${drawer.width} / 5 - 1rem)`}
      top="0.25rem"
      textDecoration="none"
      _hover={{ textDecoration: 'none' }}
      _focus={{ boxShadow: 'none' }}
      variant="link"
      p="1"
      fontFamily="mono"
      color="whiteAlpha.700"
    >
      {children}
    </Button>
  </MetaLink>
);

const SubMenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
  children,
  href,
  isExternal,
}) => (
  <MetaLink
    zIndex="2"
    href={href}
    isExternal={isExternal}
    textDecoration="none"
    _hover={{ textDecoration: 'none' }}
  >
    <Button
      position="relative"
      overflow="hidden"
      display="flex"
      flexDirection="column"
      justifyContent="center"
      alignItems="center"
      width="8.25rem"
      height="8.25rem"
      backgroundColor="rgba(255,255,255,0.08)"
      borderRadius="5px"
      textDecoration="none"
      variant="link"
      fontWeight="normal"
      color="whiteAlpha.700"
      margin={3}
      _after={{
        content: "''",
        position: 'absolute',
        display: 'block',
        width: '100%',
        height: '100%',
        filter: 'blur(10px)',
        transform: 'translate3d(-120%, 0, 0)',
        background: `linear-gradient(
              45deg, transparent,
              rgba(255, 255, 255, 0),
              rgba(255, 255, 255, 0.06),
              rgba(255, 255, 255, 0),
              transparent
            )`,
        transition: 'all 0.3s 0.1s ease-in-out',
        zIndex: 1,
      }}
      _hover={{
        textDecoration: 'none',
        boxShadow: '0 0 2rem rgba(0,0,0,.1)',
        _before: { transform: 'translate3d(120%, 0, 0)' },
        _after: { transform: 'translate3d(120%, 0, 0)' },
      }}
    >
      {children}
    </Button>
  </MetaLink>
);

export const PageHeader: React.FC = () => {
  const { isOpen, onToggle, onClose } = useDisclosure();
  const hasMounted = useMounted();

  const drawerOpacity = hasMounted && isBackdropFilterSupported() ? 0.75 : 0.98;

  return (
    <Flex
      as="nav"
      align="center"
      justify="space-between"
      wrap="wrap"
      color="offwhite"
      px={{ base: 4, lg: 8 }}
      position="relative"
    >
      <Box>
        <Ticker />
      </Box>

      <Stack
        display={{ base: 'none', lg: 'flex' }}
        width={drawer.width}
        height="100%"
        direction="row"
        justify="center"
        align="center"
        position="absolute"
        top="0"
        left={`calc(50% - (${drawer.width} / 2))`}
      >
        {/* margin-inline-start = 0.5rem is set and I don't know how to remove it */}
        <Box
          position="absolute"
          left={`calc(50% - (${drawer.width} / 2) + 0.5rem)`}
          top="0"
          zIndex="1"
        >
          <Image
            src={MetaDrawer}
            alt="MetaDrawer"
            width={drawer.width}
            height={drawer.height}
          />
        </Box>

        {DrawerItemsLeft.map((item) => (
          <MenuItem
            key={item.alt}
            href={item.href}
            isExternal={item.isExternal}
          >
            <BoxedNextImage
              width="2rem"
              height="2rem"
              src={item.src}
              alt={item.alt}
            />
            {item.text}
          </MenuItem>
        ))}

        <motion.div
          animate={isOpen ? 'show' : 'hide'}
          transition={{ duration: 0.25 }}
          variants={{
            show: { position: 'relative', top: content.height },
            hide: { position: 'relative', top: '1rem' },
          }}
        >
          <Button
            display="flex"
            zIndex="11"
            textDecoration="none"
            variant="link"
            flexDirection="column"
            justifyContent="center"
            alignItems="center"
            width={`calc(${drawer.width} / 5 - 2rem)`}
            position="relative"
            _focus={{ outline: 0 }}
            onClick={onToggle}
          >
            <BoxedNextImage
              src={MetaGameLogo}
              alt="MetaGameLogo"
              width={drawer.height}
              height={`calc(${drawer.height} * 1.1)`}
            />
          </Button>
        </motion.div>

        {DrawerItemsRight.map((item) => (
          <MenuItem
            key={item.alt}
            href={item.href}
            isExternal={item.isExternal}
          >
            <BoxedNextImage
              src={item.src}
              alt={item.alt}
              width="2rem"
              height="2rem"
            />
            {item.text}
          </MenuItem>
        ))}
      </Stack>

      <Flex justifyContent="center" alignItems="center">
        <LoginButton />
      </Flex>

      <motion.div
        animate={isOpen ? 'show' : 'hide'}
        transition={{ duration: 0.25 }}
        variants={{
          show: { opacity: 1, pointerEvents: 'auto' },
          hide: { opacity: 0, pointerEvents: 'none' },
        }}
        onClick={onClose}
        style={{
          position: 'absolute',
          zIndex: 10,
          top: `calc(${drawer.height} - 0.85rem)`,
          left: `calc(50% - ${content.width} / 2)`,
          opacity: 0,
        }}
      >
        <Stack
          display={{ base: 'none', lg: 'flex' }}
          width={content.width}
          direction="row"
          flexWrap="wrap"
          padding={4}
        >
          <Box
            position="fixed"
            top="0"
            bottom="0"
            left="0"
            right="0"
            onClick={onClose}
          />

          <Box
            position="absolute"
            left={`calc(50% - ${content.width} / 2)`}
            top="0"
            width={`calc(${content.width} - 0.5rem)`}
            height={`calc(${content.height} - 3.5rem)`}
            background={`linear-gradient(
              180deg, rgba(76, 63, 143, ${drawerOpacity}) 62.76%,
              rgba(184, 169, 255, ${drawerOpacity}) 100%
            )`}
            style={{
              backdropFilter: 'blur(10px)',
              WebkitBackdropFilter: 'blur(10px)',
            }}
          />
          {/* ToDo: switch to BoxedNextImage */}
          <Image
            position="absolute"
            left="-0"
            top={`calc(${content.height} - 3.6rem)`}
            src={MetaGradientBottom}
            alt="MetaGradientBottom"
            height="1rem"
            width={`calc(${content.width} - 0.5rem)`}
          />

          {DrawerSubItems.map((item) => (
            <SubMenuItem
              href={item.href}
              key={item.alt}
              isExternal={item.isExternal}
            >
              <BoxedNextImage
                src={item.src}
                alt={item.alt}
                height="5rem"
                width="5rem"
                mb={2}
              />
              {item.text}
            </SubMenuItem>
          ))}
        </Stack>
      </motion.div>
    </Flex>
  );
};