Hide header on breakpoint | Mantine | Page 1

I am hiding the header on a breakpoint and wanted to get some feedback on my method. Being new to Mantine I'm not sure if there is a better way and I just missed it.

What I found out is that you can't use 0 for the breakpoint and instead of have to unset it to work correctly. From there, you just need to add the hiddenFrom prop to AppShell.Header and it will respond to the breakpoint correctly without messing up AppShell.Main. Thoughts?

      <AppShell
        header={{ height: { base: 60, md: "unset" } }}
        navbar={{ width: rem(288), breakpoint: "md", collapsed: { mobile: !opened } }}
      >
        <AppShell.Header hiddenFrom="md">
          <Group h="100%" px="md" justify="space-between" align="center">
            <Group gap="xs" align="center">
              <Burger opened={opened} onClick={toggle} hiddenFrom="md" size="sm" />
              <IconSettings2 stroke={2} />
              <Title order={3}>Logix</Title>
            </Group>

            <Code fw={600}>0.0.1</Code>
          </Group>
        </AppShell.Header>

        <Navbar />

        <AppShell.Main style={{ maxHeight: "100vh", overflow: "auto" }}>
          <Outlet />
        </AppShell.Main>
      </AppShell>

#Hide header on breakpoint