Sidebar
A sidebar is a component that helps you organize your content and navigation.
Basic
I can't display a live example here. Click on the image to view it in full screen, or here.
Installation
If you hit any issues, make sure you check out the installation guide here.
Composed Components
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The Aside's decked out with several components to make it bangin'.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
And next, you can copy the code below and paste it into your dopest component folder.
Layout
If we're only considering the sidebar, the layout might not seem like a concern. However, to ensure everything works smoothly, especially in terms of responsiveness, we need to use the Layout
component. Within the Layout
component, we can call Aside.Layout
and pass the navbar
and aside
props. The navbar
prop represents the navigation bar displayed in mobile view, while the aside
prop represents the sidebar displayed in both desktop and mobile views.
If you're using Next.js, you don't have to do anything. But if you're using a different framework, you can use the Layout
component to wrap your entire application. This is how it looks like:
Inertia.js
Inertia.js comes with a built-in persistent layout, so you can do it like this:
Badge
Sometimes you need to display a total number of items in a list. You can use the badge
prop within the Aside.Item
component like this:
Icon
The icon is provided as a prop to maintain simplicity, especially since ListBoxItem
requires a textValue
. By default, if the child element is a string, it will automatically be used as the textValue
:
This is why the icon is passed as a prop, allowing you to include it like this:
If you prefer to pass the icon as a child element, remember to manually provide the textValue
prop:
Failing to provide textValue
when using non-plain text children will result in the following warning:
Blurred
The isBlurred
prop can be used to blur the background of the Aside.Content
component. To do that, simply add the prop to the Aside.Layout
component:
Is Stack
By default, the Layout will be stacked on mobile. However, if you don't want that, you can use the isStack
prop to change that:
Side
The side
prop can be used to change the side of the Aside.Content
component. By default, it's set to left
, but you can change it to right
by adding the prop:
Current Active Item
The isCurrent
prop can be used to highlight the current active item. To do that, simply add the prop to the Aside.Item
component:
Carefully
Under the hood, Aside.Content
and Aside.Item
utilizes ListBox
, so be aware of any caveats associated with it.