Expandable navbar (sidebar)

[atumas-bananamilk]

Could we get an expandable navbar (sidebar) example in Mantine UI?

Probably just a button to smoothly minimise the navbar into its icons, and icons should be taken from NavLinks.

Expanded:

Minimised:

[JasonWeise]

Yes, this would be great! I am trying to implement this but having a terrible time.

[Grantsuu]

Same here would love to see this feature added or at least see an example of how to implement it for myself.

[JudetheGemini]

This would be great. Having a tough go trying to implement.

[dongliangCode]

Have you found the example？

[JudetheGemini]

Closest I've seen is this Here

[atumas-bananamilk]

@rtivital maybe you have some update? most libraries I've checked have it.

[vovasalyha]

@atumas-bananamilk The most obvious solution IMO is to utilize NavLink's leftSection and label props and simply remove label text on toggle. Also change navbar's width on toggle. To make it smooth add some CSS transition on width change and that's it. The only pitfall is that in order to support mobile type of sidebar (drawer) you need more logic, but for PC/laptop screens it should work just fine. Here is a basic example of what I mean: https://codesandbox.io/p/sandbox/mantine-collapsible-sidebar-42jt2m

[atumas-bananamilk]

This is good.
Also, what about subsections? How do they expand on a minimised sidebar?

[markussen145]

I support this one. It would make the AppShell more compatible with mobile devices.