App Shell

import React from "react";
import { Box, Button, Icon, Text } from "@nimbus-ds/components";
import { ChevronLeftIcon, GiftBoxIcon, UserIcon } from "@nimbus-ds/icons";
import { AppShell } from "@nimbus-ds/patterns";

const Example: React.FC = () => {
  const backButton = (
    <Button appearance="transparent">
      <Icon source={<ChevronLeftIcon />} />
      Volver
    </Button>
  );

  const buttonStack = (
    <>
      <Button appearance="transparent">
        <Icon source={<GiftBoxIcon />} />
        Novedades
      </Button>
      <Button appearance="transparent">
        <Icon source={<UserIcon />} />
        Mi cuenta
      </Button>
    </>
  );

  const sampleMenu = (
    <Box
      backgroundColor="primary-surface"
      borderColor="primary-interactive"
      borderStyle="dashed"
      borderWidth="1"
      borderRadius="2"
      width="15rem"
      height="100vh"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Text fontSize="base" color="primary-interactive">
        Menu content
      </Text>
    </Box>
  );

  return (
    <AppShell menu={sampleMenu}>
      <AppShell.Header leftSlot={backButton} rightSlot={buttonStack} />
      <Box
        backgroundColor="primary-surface"
        borderColor="primary-interactive"
        borderStyle="dashed"
        borderWidth="1"
        borderRadius="2"
        width="100%"
        height="calc(100vh - 66px)"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Text fontSize="base" color="primary-interactive">
          Children content
        </Text>
      </Box>
    </AppShell>
  );
};

export default Example;