AppShell with Navbar that don't fully close/open

[Crocsx]

Hi,

I am using AppShell and AppShell.Navbar. I am trying to achieve something that I see fairly common on the internet, a Navbar that would not fully close (so remain like open ~10% with a burger icon at the vertical center) and open when that burger icon within the Navbar is clicked.

I tried this kind of setup

import { AppShell, Burger, rem } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

export const Shell = ({
  children,
  header,
  navbar,
}: {
  children: React.ReactNode;
  header: React.ReactNode;
  navbar: React.ReactNode;
}) => {
  const [opened, { toggle }] = useDisclosure();

  return (
    <AppShell
      header={{ height: rem(60) }}
      navbar={{
        width: { base: opened ? 200 : 60 },
        collapsed: { mobile: false, desktop: true },
        breakpoint: 'sm',
      }}
      padding="md"
    >
      <AppShell.Header>{header}</AppShell.Header>
      <AppShell.Navbar>
        <Burger
          variant="subtle"
          pos="absolute"
          top="50%"
          right={0}
          ml="auto"
          bg="var(--mantine-color-body)"
          size="md"
          onClick={toggle}
          hiddenFrom="sm"
          opened={opened}
        />

        <AppShell.Section>{navbar}</AppShell.Section>
      </AppShell.Navbar>
      <AppShell.Main>{children}</AppShell.Main>
    </AppShell>
  );
};

But if I just want this on mobile, it is not possible because mobile will always to 100% no matter the width set.

[rtivital]

navbar={{ width: navbarOpened ? 320 : 80, breakpoint: 0 }}

[Crocsx]

Thank I was experimenting with something like this

      header={{ height: rem(60) }}
      navbar={{
        width: opened ? rem(200) : rem(20),
        collapsed: { desktop: false },
        breakpoint: 0,
      }}
      padding="md"
    >
    ```
    
    but the nivebar will 
    
    1) Remain with this behavior on desktop, which I wanted to do only on mobile
    2) Push all the content and there is no way to put it "over the content"
    
   But I guess I will try to do a inbetween thanks.
    
    

[rtivital]

You can configure offset with

.shell {
  &[data-navbar-expanded] {
    @mixin smaller-than $mantine-breakpoint-sm {
      --app-shell-navbar-offset: rem(80px) !important;
    }
  }
}

<AppShell
        header={{ height: 60 }}
        navbar={{
          width: navbarOpened ? 320 : 80,
          breakpoint: 0,
        }}
        className={classes.shell}
        data-navbar-expanded={navbarOpened || undefined}
      >

[rtivital]

Additionally, you do not need to use collapsed: { desktop: false }, because navbar is not collapsed.