AppShell header only visible when navbar collapsed?

[gloomy surge]

I am trying to get it so the header component only shows up when the navbar component is collapsed, In the image below you can see that currently the header and navbar are both visible.
In the second image I tried using hidden=true on the header but the height of the header is still there. Is there any way I can get this to work.

I am new to mantine, and react in general, so sorry if this was a rough explanation!

[pseudo hearth]

show some code if you could

[gloomy surge]

the code to just the AppShell component?

[pseudo hearth]

yes please

[gloomy surge]

alright let me remove a lot of the clutter

[pseudo hearth]

generally you can do stuff like

<AppShell
  header={aBooleanVariableToMakeHeaderShown ? <YourHeaderComponent/> : undefined}
>
...rest of code

[gloomy surge]

<AppShell
    styles={(theme) => ({
    main: {
        backgroundColor:
        colorScheme === "dark"
            ? theme.colors.dark[8]
            : theme.colors.gray[0],
    },
    })}
    navbarOffsetBreakpoint="sm"
    asideOffsetBreakpoint="sm"
    fixed
    navbar={
    <Navbar
        hiddenBreakpoint="sm"
        hidden={!opened}
        p="md"
        width={{ sm: 200, lg: 300 }}
    >
    { /* ... */ }
    </Navbar>
    }
    header={
    <Header height={70} p="md">
        <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
        <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
            <Burger
            opened={opened}
            onClick={() => setOpened((o) => !o)}
            size="sm"
            color={theme.colors.gray[6]}
            mr="xl"
            />
        </MediaQuery>

        <Text>Application header</Text>
        </div>
    </Header>
    }
>
    <Routes>
    {/* ... */}
    </Routes>
</AppShell>

this is what I got rn

[pseudo hearth]

yeah so what's happening there is

you have a Header and a div wrapped around all of that

that still has a height of at least 70

so even with the MediaQuery inside it will take up that space

[gloomy surge]

but even when I do <Header hidden=true it will have height

[pseudo hearth]

yes

so as an alternative what i would suggest is

https://mantine.dev/hooks/use-media-query/

you can use this to get a boolean depending on whether the header should hide

or if its state based, you can make it with useState() too

[pseudo hearth]

and then, do this above code snippet

this uses a ternary, not sure if you're familiar as you mentioned you started learning recently
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

ternaries work like

booleanCondition? resultIfTrue : resultIfFalse

[gloomy surge]

yea

[pseudo hearth]

so this way, you can make the header show on true, and if not, have no header

should solve it for you

[gloomy surge]

alrighty thank you