The Sidebar component is used to create a full-page Sidebar navigation menu. It is used in both the Kits Dashboard and the Admin pages.
Usage
Let's explore the different ways the Sidebar component can be used.
Basic Usage
Below is a basic example of how to use the Sidebar component.
import {
Cog8ToothIcon,
CreditCardIcon,
Square3Stack3DIcon,
Squares2X2Icon
} from "@heroicons/react/24/outline";
import { Sidebar, SidebarItem, SidebarContent } from "~/core/ui/Sidebar";
function AppSidebar() {
return (
<Sidebar>
<SidebarContent className={'py-4'}>
<SidebarItem
path={'#dashboard'}
Icon={() => <Square3Stack3DIcon className={'w-4'} />}
>
Dashboard
</SidebarItem>
<SidebarItem
path={'#workspace'}
Icon={() => <Squares2X2Icon className={'w-4'} />}
>
Workspace
</SidebarItem>
<SidebarItem
path={'#subscription'}
Icon={() => <CreditCardIcon className={'w-4'} />}
>
Subscription
</SidebarItem>
<SidebarItem
path={'#settings'}
Icon={() => <Cog8ToothIcon className={'w-4'} />}
>
Settings
</SidebarItem>
</SidebarContent>
</Sidebar>
);
}Sidebar with Groups
You can create groups of Sidebar items by using the SidebarGroup component.
import {
Cog8ToothIcon,
CreditCardIcon,
Square3Stack3DIcon,
Squares2X2Icon
} from "@heroicons/react/24/outline";
import { Sidebar, SidebarItem, SidebarContent } from "~/core/ui/Sidebar";
function AppSidebar() {
return (
<Sidebar>
<SidebarContent className={'py-4'}>
<SidebarGroup label='App' collapsible={false}>
<SidebarItem
path={'#dashboard'}
Icon={() => <Square3Stack3DIcon className={'w-4'} />}
>
Dashboard
</SidebarItem>
<SidebarItem
path={'#workspace'}
Icon={() => <Squares2X2Icon className={'w-4'} />}
>
Workspace
</SidebarItem>
</SidebarGroup>
<SidebarGroup label='Settings' collapsible>
<SidebarItem
path={'#subscription'}
Icon={() => <CreditCardIcon className={'w-4'} />}
>
Subscription
</SidebarItem>
<SidebarItem
path={'#profile'}
Icon={() => <Cog8ToothIcon className={'w-4'} />}
>
Profile
</SidebarItem>
</SidebarGroup>
</SidebarContent>
</Sidebar>
);
}API
The following props are available for the Sidebar components.
<Sidebar>
The Sidebar component accepts the following props:
collapsed- Whether the sidebar is initially collapsed or not. Defaults tofalse.
<Sidebar collapsed={false}>
...
</Sidebar><SidebarItem>
The SidebarItem component accepts the following props:
path- The path to navigate to when the item is clicked.Icon- The icon to display next to the item.end- Whether the item should look as "active" when the path matches the current path. Defaults tofalse. By default, the path will match sub-paths up to 3 levels deep. For example, if the current path is/dashboard, then the item will look as "active" if the path is/dashboard,/dashboard/overview,/dashboard/overview/1, etc. If you want to match the path exactly, then setendtotrue. In this way, the item will only look as "active" if the path is/dashboard.
<SidebarItem
path={'/dashboard'}
Icon={() => <Square3Stack3DIcon className={'w-4'} />}
end={true}
>...</SidebarItem><SidebarContent>
The SidebarContent component accepts the following props:
className- The class name to apply to the content container.
<SidebarContent className={'py-4'}>...<SidebarContent><SidebarGroup>
The SidebarGroup component accepts the following props:
label- The label of the group.collapsible- Whether the group is collapsible or not. Defaults totrue.collapsed- Whether the group is initially collapsed or not. Defaults tofalse.
<SidebarGroup
label='App'
collapsible={true}
collapsed={false}>
...
</SidebarGroup>