Is there any way to center an AppShell?

[FelixH2012]

Hello,
How can I set a fixed width for my AppShell component so that all its contents automatically have consistent spacing on the left and right, similar to a container?

I’ve tried using a container, but it didn’t work as expected. Additionally, I’d like the navbar to have some spacing on the left.

`return (
<AppShell
header={{ height: 64 }}
navbar={{ width: 300, collapsed: navbarCollapsed }}
padding="md"
styles={{ main: { paddingTop: 68 } }}

<AppShell.Header>
  <Header
    title={props.title}
    burger={
      !disableNavbar && (
        <Burger
          opened={!navbarCollapsed.mobile}
          onClick={toggleNavbar}
        />
      )
    }
  />
  <LoadingOverlay visible={isLoading} zIndex={1000} />
</AppShell.Header>

<AppShell.Navbar>
  <Box>
    <Group>
      <Box>{navigation.state === 'loading' ? <Loader size={32} /> : <LogoSymbol />}</Box>
      {customer && (
        <Anchor to={`/0/${customer.customerNr}`}>{customer.name}</Anchor>
      )}
      <Burger opened={!navbarCollapsed.mobile} onClick={toggleNavbar} />
    </Group>
  </Box>
  {props.navbar}
</AppShell.Navbar>

<AppShell.Main>
  <Container>{props.children}</Container>
</AppShell.Main>

); `

Kind regards :)

[rtivital]

No, AppShell does not support such feature, it is designed to work with position: fixed elements.

[FelixH2012]

So would you say that it doesn't work at all, or is there a workaround?