Research - Navigation - AppBarContainer structured with routes children

[Dias999]

Today the AppBarContainer is composed like this in the AppBarContainer:

<AppBar.Root key={location.pathname}>
  <AppBar.Drawer
    currentId={location.pathname}
    logo="/logo.svg"
    collapsible
    expandedWidth={120}
    {...drawerProps}
    items={drawerItems}
  />
  <AppBar.Main>
    <AppBar.Nav
      text={(user as any)?.username || ''}
      headerMenuOptions={(handleClose) => (
        <MenuItem onClick={() => onLogoutClick(handleClose)}>
          Sign Out
        </MenuItem>
      )}
      {...navbarProps}
    />
    <Container>{children}</Container>
  </AppBar.Main>
</AppBar.Root>

This causes the drawer to be remounted in every route change and this is probably why it's open/close state is lost.
Ideally we should use react-router-dom routes, children routes and Outlet to render the container in a separate hierarchy from the router content. This will prevent the container re-rendering, (probably) keep the drawer state and improve performance on changing routes.

Research how to structure the following components in the routes structure:
AppBar.Root
AppBar.Drawer
AppBar.Main
AppBar.Nav
Container