Creating a responsive drawer sidebar

[pinkboid]

I am currently using the Drawer component combined with a Burger for a sidebar, with the sidebar being hidden by default and popping up from the left when burger is clicked. I only want this behavior on mobile, and want the drawer to persistently be on the left when on larger devices like desktops.

I do not see any examples on how to do this. I am sure it is quite trivial to an experienced frontend react dev. Most of my googling just results Material UI tutorials. I am not primarily a web developer, I'm using a UI library specifically get this sort of GUI functionality out of the box instead of having to implement much myself. But it looks like Mantine wants me to do a bit of manual work to get this behavior.

Here's what I've got so far

import { useDisclosure } from '@mantine/hooks'
import { Drawer, Burger } from '@mantine/core'

function Sidebar() {
    const [opened, { open, close }] = useDisclosure(true)
  
    return (
        <>
            <Drawer position='left' opened={opened} onClose={close} title="Authentication">
                <h1>hello</h1>
            </Drawer>

            <Burger opened={opened} onClick={open} aria-label="Toggle navigation" />
        </>
    )
}

export { Sidebar }

Anyone have any easy approaches?

[rtivital]

Your example should work just fine. What issue do you experience with it?

[pinkboid]

@rtivital I want it to have two different modes based on if using mobile device or wider devices.

If on wider devices, there should be no ability to close the drawer; it should permanently be on the left side of the screen always visible, and the burger should not exist/be rendered.

If on mobile device, it should behave as the code example currently has it; you can close the drawer with the x, and open it up again with the burger.

[rtivital]

You can use AppShell component for that, it works exactly as you described – https://mantine.dev/core/app-shell

[roker16]

@rtivital i want drawer to be persistent, drawer given in example works just fine, only thing is that it lost state once closed and opened again with initial state., tell me if it is possible with drawer , or alternate solution if any

[Toshinaki]

If anyone still interested, try this:

<Drawer
  opened={opened}
  onClose={close}
  withinPortal={false}
  withOverlay={false}
  styles={{
    root: { height: "100%", width: "fit-content" },
    inner: {
      position: "relative",
    },
    content: { boxShadow: "none" },
  }}
  title="Authentication"
>
  {/* Drawer content */}
</Drawer>

though when close, the layout is changing only after the close animation ends, so you can keep the drawer opened={true}, and control open & close with margin.

And with this code, there is a

wrapping the drawer, and I have no idea how to remove the div,
so to style the wrapper, add another wrapper to the drawer and style with .wapper > div {}