Let's make a cool sidebar component for your cool
side projects using only react and tailwind CSS. We'll also make it completely retractable into
a mini sidebar with floating labels on hover. So now that I've got you
excited, let's build this thing. I'll wrap the sidebar with an aside
tag having full view-port height. The main navigation will span the whole
height with a background you want. border-right and shadow to make it
look apart from the main content. I'll tell you why I made it flex in a moment. For the top branding part
Give some padding space between our logo and button
and center them vertically. I am using a dummy logo from logo-Ipsum. And the button that'll later
be used to retract this sidebar Apply basic styles of a button. Now for the sidebar links
that we will pass as children. To let it take the rest of the space make
it flex-one that's why we made the nav flex. We'll get to the sidebar link component
in a minute. Let's just finish this sidebar with the user section.
Set it apart using border-top. Flex to align its children in a row.
Add the user avatar. I am using a dummy one. You can set the width and height accordingly
and make it fully rounded if you want. Separate the user info section since
we'll be hiding it for the mini sidebar. Add space between and center vertically. I will use width 52 across the component. You
can make the sidebar narrower or wider than this. And the name and email of the logged-in user. You might want to decrease the line
height a bit to make it look aligned. And finally, an action button that can
be a logout button or a three-dot menu. Now on to the sidebar item component. It will receive an icon,
text, active and alert props. We'll get to the last two props in a minute. Let's first pass in some sidebar items
so that we can have something to look at. Make it relative, we'll see why in a minute,
center the icon and text vertically in a row, with decent padding and margin
in between each of them. Apply transition to colors that we'll change
based on the active and hovered state of the item. So when it's active I want a subtle gradient
background of indigo and text of dark indigo. Else, on hover, background of
light indigo and text gray. Set the same width and margin left for the text. Using the alert prop, you can guide
the user's attention to a certain sidebar item by showing a small
dot on the absolute right of it. Now our full-sized sidebar is complete.
We can start working on its mini-state. For that, we of course need a
state. Let's call it expanded. On click of our button, toggle the expanded state. Based on that, we can show the appropriate icons. Let's start with the logo. To hide it,
we'll transition its width property. Overflow hidden will prevent it from
flowing out when its width is zero. When expanded give it a width else make it zero. And do the same with the user section
below for its width and margin-left. Now to do the same for the links, we'll have
to communicate the state to the children. Instead of passing it as a
prop to each one of them. We can use a context to convey the expanded state. Wrap the children with the
provider and pass in the state. Now we can access it inside the sidebar item. Hide the text similarly. And put the alert dot on the top right. One last thing left is the
floating labels for the mini-state. Make it a group since we'll be
using the group-hover variant. Absolute left-full will align the text
left and position it to the right. padding and margin-left to space
it from the sidebar's edge. It should only appear when not expanded. Set the background and text. Initially set it to invisible with 20% opacity, and place a little to the left
for the reveal effect to work. So, on group hover it will be visible with 100%
opacity and placed in its original position. And there you have it, your own custom
sidebar completely built from scratch. I'll leave a link for this
component in the description. If you've found this helpful, leave a like
and subscribe for more content like this.
