App Shell

1.4.4

The AppShell component is the main outer frame of an application. It provides the basic architecture to build an application inside of our admin.

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;

Instale o componente via terminal.

npm install @nimbus-ds/app-shell

Additional props are passed to the <AppShell> element. See div docs for a list of props accepted by the <AppShell> element.

AppShell

NameTypeDefaultDescription

children*

React.ReactNode

Content for the body of the application.

menu

React.ReactNode

Optional slot for left sidebar menu.

menuProperties

object

Can be used to control the responsive properties of the AppShell menu so you can change which breakpoint the menu hides under.

AppShell.Header

NameTypeDefaultDescription

leftSlot

React.ReactNode

Optional content for the left-hand-side slot.

rightSlot

React.ReactNode

Optional content for the right-hand-side slot.