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.

[SqlOwl]

Please implement this feature I would really love it for my project

[KGBuApparata]

WE NEED THIS!!!

[leomerida15]

Attached is a very simple collapsible sidebar component that I mounted with mantine, as a suggestion

`typescript
"use client";
import logo from "@/public/logo/logo.svg";
import { Button, Group, Image } from "@mantine/core";
import {
IconBooks,
IconChevronRight,
IconHome2,
IconLogout,
IconSwitchHorizontal,
} from "@tabler/icons-react";
import NextImage from "next/image";
import { useMemo, useState } from "react";
import classes from "./NavbarSimple.module.css";

const data = [
{ icon: IconHome2, label: "Home", link: "" },
{ icon: IconBooks, label: "catalogo", link: "" },
];

export function Sidebar() {
const [active, setActive] = useState("Billing");
const [expanded, setExpanded] = useState(false);

const links = data.map((item) => {
	const Label = useMemo(() => expanded && <span>{item.label}</span>, [item.label, expanded]);

	return (
		<a
			className={classes.link}
			data-active={item.label === active || undefined}
			href={item.link}
			key={item.label}
			onClick={(event) => {
				event.preventDefault();
				setActive(item.label);
			}}
		>
			<item.icon className={classes.linkIcon} stroke={1.5} />

			{Label}
		</a>
	);
});

return (
	<nav className={`${classes.navbar} ${expanded ? classes.expanded : ""} h-full w-auto`}>
		<div
			className={`${classes.navbarMain} relative h-full ${
				expanded ? "w-60" : "w-20"
			} transition-width duration-500`}
		>
			<Group className={classes.header} justify="space-between">
				<Image
					component={NextImage}
					loading="lazy"
					radius="md"
					h={49}
					w="auto"
					fit="contain"
					alt={"logo"}
					src={logo}
				/>
				<Button
					className="absolute right-[-52px] top-[73%] transform"
					onClick={() => setExpanded((expanded) => !expanded)}
					variant="gradient"
				>
					<IconChevronRight
						className={`${
							expanded ? "rotate-180" : ""
						} transition-transform duration-300`}
					/>{" "}
				</Button>
			</Group>
			{links}
		</div>

		<div className={classes.footer}>
			<a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
				<IconSwitchHorizontal className={classes.linkIcon} stroke={1.5} />
				{expanded && <span>Change account</span>}
			</a>

			<a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
				<IconLogout className={classes.linkIcon} stroke={1.5} />
				{expanded && <span>Logout</span>}
			</a>
		</div>
	</nav>
);

}
`
.navbar {
padding: var(--mantine-spacing-md);
display: flex;
flex-direction: column;
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

.navbarMain {
flex: 1;
}

.header {
padding-bottom: var(--mantine-spacing-md);
margin-bottom: calc(var(--mantine-spacing-md) * 1.5);
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

.footer {
padding-top: var(--mantine-spacing-md);
margin-top: var(--mantine-spacing-md);
border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

.link {
display: flex;
align-items: center;
text-decoration: none;
font-size: var(--mantine-font-size-sm);
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
border-radius: var(--mantine-radius-sm);
font-weight: 500;

@mixin hover {
	background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));

	.linkIcon {
		color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
	}
}

&[data-active] {

	&,
	&:hover {
		background-color: var(--mantine-color-blue-light);
		color: var(--mantine-color-blue-light-color);

		.linkIcon {
			color: var(--mantine-color-blue-light-color);
		}
	}
}

}

.linkIcon {
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
margin-right: var(--mantine-spacing-sm);
width: 25px;
height: 25px;
}

/* NavbarSimple.module.css */
.navbar {
position: relative;
transition: width 0.3s;
}

.expandButton {
position: absolute;
top: 50%;
right: -20px;
/* Ajusta este valor según tus necesidades */
}

.iconRotated {
transition: width 0.3s;
transform: rotate(180deg);
}

.header {
position: relative;
}

.expandButton {
position: absolute;
right: -52px;
top: 73%;
}
`

`

[SqlOwl]

Thank you I will give it a try

[leomerida15]

@SqlOwl did it work for you?

[SqlOwl]

Partially. We are building new shell right now. I hope when it is finished we will share it

[atumas-bananamilk]

Doesn't look "very simple"..