Appshell

overview

• manages the banner (header)
• manages the sidebar
• embeds the main section

header (banner)

Appshell.Header

The app's banner that stands ontop.

• manages the burger button.
• manages the logo.
• manages the dark/light mode toggle

header config

header is a prop of AppShell

set the height:

header={{ height: 70 }}

Appshell.Navbar

manages the left-side navbar

• the navbar is hidden by default on mobile. When it is open, it takes the full width.
• we open and close it by toggling collapsed (to false or true). We track the state in a variable such as opened and give it to collapsed. The burger button, should toggle opened to true.
• in desktop, it's better to always show up the navbar. By default, the navbar always shows up: it ignores the opened variable given in collapsed, because we scoped it to mobile. breakpoint determines when it goes into desktop mode. width determines its desktop width.
• we can create a distinct state variable to track the open state in desktop, or the use same as the mobile and provide it in collapsed, to the desktop key.

navbar config

navbar is a prop of AppShell

• width
• breakpoint: from what size onward should we display the navbar unconditionally, aka activate desktop mode. For example, sm, which includes desktop mode for tablets. (see meaning of sm for breakpoint later)
• collapsed, for mobile (can also work for desktop),

navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}

Appshell.Section: implement top and bottom sections

<AppShell.Navbar>
    <AppShell.Section grow> </AppShell.Section>
    <AppShell.Section> </AppShell.Section>
</AppShell.Navbar>

Appshell.Main

The container for the main panel. It's appropriate to set the main panel's background color here.

For light mode, the background is white.

We may pick a light gray such as gray.1, to allow white Papers to standout.

For dark mode, the background is dark.7???

<AppShell.Main bg={colorScheme === "dark" ? "dark.8" : "gray.1"}>{children}</AppShell.Main>

Configure subcomponents at Appshell level

the configuration object is required for each subcomponent.

<AppShell
      header={{ .. }}
      navbar={{ .. }}
      padding="md"
>..subcomponents..</AppShell>

Subcomponents, as children

AppShell.Header
AppShell.Navbar
AppShell.Main

related components

Burger
useDisclosure