App layout component used to structure application.

() => {
  const [isNavigationOpen, setIsNavigationOpen] = useState<boolean>(false);
  const [isChildNavigationOpen, setIsChildNavigationOpen] = useState<boolean>(false);

  return (
    <Box width="100%" height={300} borderColor="border.subtle" borderWidth={1}>
      <App>
        <App.Header>
          <Box display="flex" alignItems="center" flex={1} px="$24" height="$64">
            Header
            <Box flex={1} />
            <MenuButton />
          </Box>
        </App.Header>

        <App.Sidebar>
          <Box width={236}>
            <App.Sidebar.Navigation>
              <Box pt={['$32', '$32', '$32', 0]}>
                <App.Sidebar.Navigation.Item icon={<IconDashboard />}>Home</App.Sidebar.Navigation.Item>
                <App.Sidebar.Navigation.Accordion
                  title="Menu"
                  open={isNavigationOpen}
                  onClick={() => setIsNavigationOpen((isOpen) => !isOpen)}
                  icon={<IconDashboard />}
                >
                  <App.Sidebar.Navigation.Item icon={<IconDashboard />}>Menu item</App.Sidebar.Navigation.Item>
                  <App.Sidebar.Navigation.Item icon={<IconDashboard />}>Menu item</App.Sidebar.Navigation.Item>
                  <App.Sidebar.Navigation.Item aria-current="true" icon={<IconDashboard />}>
                    Active item
                  </App.Sidebar.Navigation.Item>
                  <App.Sidebar.Navigation.Item icon={<IconDashboard />}>Menu item</App.Sidebar.Navigation.Item>
                  <App.Sidebar.Navigation.Accordion
                    title="Sub menu"
                    open={isChildNavigationOpen}
                    onClick={() => setIsChildNavigationOpen((isOpen) => !isOpen)}
                    icon={<IconDashboard />}
                  >
                    <App.Sidebar.Navigation.Item icon={<IconDashboard />}>Menu item</App.Sidebar.Navigation.Item>
                    <App.Sidebar.Navigation.Item icon={<IconDashboard />}>Menu item</App.Sidebar.Navigation.Item>
                    <App.Sidebar.Navigation.Item icon={<IconDashboard />}>Menu item</App.Sidebar.Navigation.Item>
                  </App.Sidebar.Navigation.Accordion>
                </App.Sidebar.Navigation.Accordion>

                <App.Sidebar.Navigation.Item icon={<IconDashboard />}>Item</App.Sidebar.Navigation.Item>
              </Box>
            </App.Sidebar.Navigation>
          </Box>
        </App.Sidebar>

        <App.Content>
          <Box minHeight={1000} p="$32" backgroundColor="background.subtle.light">
            Content
          </Box>
        </App.Content>
      </App>
    </Box>
  );
}

App component