All right.
And once we have the big sidebar in place, now let's set up the CSS.
Again, we're looking for rappers and in this case, big sidebar DJs.
And the logic is going to be opposite.
So since we want to hide the big sidebar on a small screen, we'll go right away with display none.
So now we cannot see this particular sidebar on small screen.
And then when it comes to rest of the styles, we'll set them up in a media query.
Now, what is going to be the min width?
Well, remember, we're hiding the small sidebar on 992.
So, of course, all of the styles are going to be applied when we get to 992.
Yep, that's correct.
So we're going to go here with min width and we'll set it to 992 pixels over here.
And we'll start by just saying display and block.
Let's save that.
And this is what we should see on the screen.
Again, we won't be able to see anything once we get to the screen size, which is less than 992.
Once it's 992, that's when we display the big sidebar.
And essentially, let's just start with the box shadow.
Now, in this case, we're not setting up the line in the bottom.
We're setting it on the right hand side.
So we're going to go here with box shadow one pixel zero.
Pixels.
Zero pixels over here.
Then one more zero pixels, and then we have rgba.
And we're going to set it to 0000.1.
Let's save this.
And then.
Remember again, we have the parent, the sidebar container, and then we have the content.
So we're going to go here with sidebar container.
And for this one, we're going to go first with the background and we want to set it equal to X variable.
And again, since we have that dark mode eventually coming up, we're going to go with background,
secondary and then color.
And then let's go with Min.
Right.
And let's set it equal to 100%.
Now, also, we want to set up the height to be 100%.
So set it right after that.
Then let's go with the width and remember.
On apparent.
We're setting up that column layout.
Correct.
Remember it was auto and then one fraction.
So in this case, we need to decide what is going to be the width and I'm going to go with 250 pixels.
So now I can clearly see my big sidebar and then we want to hide it by default pretty much.
Again, we're only going to show it if that show sidebar class is present.
So what do we want to do?
Well, we're going to go here with margin left and -250 pixels like so.
Notice now, of course, it's going to be hidden.
And yes, while I'm styling the big sidebar, unfortunately I'll have to toggle the screens in such
way just so you can see.
Now, of course, I'm not going to do it after every property that is going to be extremely annoying.
But here and there, yes, I'll toggle it just to showcase.
Now, as far as transition, I want to be very specific.
I only want transition for my.
Margin left and therefore I'm going to go with margin left, 0.3 seconds, ease in and out.
Then let's go with the content.
And since I want to display the sidebar when there's more content.
For example, all the jobs I need to keep this content as position sticky.
Now, since I'm using render, it just takes a little bit of time for the server to wake up.
So I'll showcase that in a second.
So let me set up the styles first.
We're going to go here with Position Sticky.
And again, I cannot showcase that in our current project since we don't have any content and we want
to go with top zero just like we did in the nav bar.
And then remember, we also have this show.
Sidebar and this one, we want to set up margin left and we want to set it equal to zero.
So by default, we hide it -250.
And then if the show sidebar class is present, then we go back to the zero.
So notice these are all the jobs, right?
And when we start scrolling, not only the nav bar stays on the page, but also the sidebar.
That's why we went with the content and sticky.
Okay, good.
Then remember, we have the header one.
That's where we have the logo.
Let's just go here with height and six rims.
After that, we want to go with display flex.
We want to align everything in the center.
So align items center and then padding left is going to be.
2.5.
So batting left and let's go with 2.5.
Rims.
Then we also have the nav links.
And remember, we have the classes in there in the component, the nav links class and the nav link.
And again, what's super, super cool with styled components, we can style them differently because
we need to keep in mind that of course.
There's a difference between big sidebar and a small sidebar.
So on a big sidebar, I want to style my nav links, let's say, differently.
But what's really awesome is that we already have the classes there and we can nicely access them and
whatever styles I apply over here are going to be only applied to the links that are located in the
big sidebar.
Hopefully that is clear.
So padding.
Top and we're going to go here with two rams.
Then we want to go with Display Flex.
After that, we want to go with flex direction.
And we want to set it equal to a column one.
Then when it comes to a NAV link.
Same deal.
It's going to be display flex since there is an icon as well as the.
Text.
So we'll go here with display flex, then align.
Items center.
So we just set them up vertically in the center.
Color in this case is going to be equal to text.
Secondary and color.
Beautiful.
And then let's also add some padding here.
We're going to go with one REM and then zero.
Then same deal.
We'll go with padding left and we'll go to 2.5 REM.
So we'll just add some padding on left and side.
So padding, hyphen left and that is going to be equal to 2.5 rems.
Text, transform, capitalize.
And then let's also add the transition.
So whenever we will hover over the links, I want to push them a little bit more to the right.
And essentially, the way we do that, we just add this padding to the left, to all of the links.
And then notice when we hover, we just increase a little bit that padding.
That's it.
That's all the logic to it.
So for that, we want to go here with transition.
We want to set up padding left.
0.3 seconds, ease in and out.
And then when we hover, what do we want to do?
Well, like I said, we will increase that padding a little bit, so we'll go with nav link hover padding
left is going to be three rems, so a little bit more.
And also I want to add the color primary.
Effectively.
Let's set it up over here.
We're going to go with color and let's try out primary 500.
Then let's style the icon and active and let's see, maybe we'll need to add a little bit more styles.
So for now, let's just go here with Icon.
We'll go with font size and that is equal to 1.5 Rems.
Then we're going to go with margin, right?
So this is going to be equal to one Rmse.
Let's check it out.
Yep.
This is how they look like.
Okay, Awesome.
And then.
We also want to set up over here display grid.
And place items in the center.
So place items and we'll set it equal to center.
And you know what?
I'm noticing that the text and icon are changing the color instantly.
So you know what?
We can actually go over here as well with the transition.
So when we hover over, there's going to be a transition and that is going to be equal to my CSS variable.
So let's save it over here.
And now this should take some time before we flip the color on the icon as well as the text.
And that's what I wanted.
And at the very, very, very, very, very end, we want to go with active class again, same deal.
I'm not going to repeat the whole spiel.
So essentially we get that active class and I just want to add the color and that is going to be equal
to 500.
So let me find it somewhere here.
Yep.
So over here I'm just going to grab this value so it's a little bit faster.
So copy and paste and for the last time I'll toggle the screen and notice since we're located on stats
page, these are the styles that we have in the big sidebar a job, all jobs and rest of the pages.
And with this in place, we are ready to move on to the next step.