explore/ui/snippets/header/Burger.tsx

import React from 'react';

import { DrawerBody, DrawerContent, DrawerRoot, DrawerTrigger } from '@luxfi/ui/drawer';
import { IconButton } from '@luxfi/ui/icon-button';
import { useDisclosure } from 'toolkit/hooks/useDisclosure';
import IconSvg from 'ui/shared/IconSvg';
import NavigationMobile from 'ui/snippets/navigation/mobile/NavigationMobile';
import RollupStageBadge from 'ui/snippets/navigation/RollupStageBadge';
import TestnetBadge from 'ui/snippets/navigation/TestnetBadge';
import NetworkLogo from 'ui/snippets/networkLogo/NetworkLogo';

interface Props {
  isMarketplaceAppPage?: boolean;
}

const Burger = ({ isMarketplaceAppPage }: Props) => {
  const { open, onOpen, onClose, onOpenChange } = useDisclosure();

  return (
    <DrawerRoot
      open={ open }
      onOpenChange={ onOpenChange }
      placement="left"
      lazyMount={ false }
    >
      <DrawerTrigger>
        <IconButton onClick={ onOpen } className="p-2" aria-label="Menu button">
          <IconSvg
            name="burger"
            className="w-6 h-6 block text-gray-600 dark:text-white"
          />
        </IconButton>
      </DrawerTrigger>
      <DrawerContent >
        <DrawerBody className="flex flex-col overflow-x-hidden overflow-y-auto">
          <TestnetBadge className="self-start mb-2"/>
          <RollupStageBadge className="self-start mb-2"/>
          <NetworkLogo/>
          <NavigationMobile onNavLinkClick={ onClose } isMarketplaceAppPage={ isMarketplaceAppPage }/>
        </DrawerBody>
      </DrawerContent>
    </DrawerRoot>
  );
};

export default Burger;