And once we're done with the small sidebar, now let's set up the CSS.
So we want to navigate to the assets wrappers we're looking for.
Small sidebar over here.
Let's delete everything.
And let's set up everything from scratch.
So once we remove the styles, this is what we're going to see on the screen.
As far as the element, I use the aside.
For the actual sidebar and right out of the gate I want to hide it once we get to 992.
So essentially, the way we do that, we just go with media.
Then in my case, I'm going to go with 992 because that's where all the changes are taking place.
And we'll just say here, display none.
Essentially, that's the logic.
So now notice once we get to 992, we hide it and then we can see the big sidebar.
And then pretty much we set up the styles for the small screen.
Again, that's all we need to do.
So this automatically hides the element.
Once we get to 992.
Now we'll just apply styles when we are on the small screen.
Keep in mind that of course you can add this at the very end, but I just thought that it's going to
be easier to understand the logic if we set it up right at the top.
First, let's start with sidebar container.
Remember, that's the parent.
And we'll set it as position fixed.
So essentially I just want to take it out of the normal flow and I want the sidebar to take up the entire
screen.
And in order to do that, we need to provide top left, right, as well as the bottom one zero.
However, there's a nifty property called Inset, and if we set this equal to zero, then it pretty
much does the same thing again behind the scenes.
It sets the top, bottom left and right equals to zero.
And as a result, the.
Element is going to take up the entire screen.
As far as the background, I'm going to go with the black one.
So 000 and then 0.7.
So black one with some kind of opacity.
Again, this is that black overlay.
And then the links and everything is going to be sitting in that content div Then we want to place the
content div in the center, essentially our child.
And therefore this one, the overlay will set up display flex.
Remember we have justify content and we'll set it equal to center.
So this sits horizontally and align items.
We'll set it equal to center as well.
So this will set it vertically.
I do want to go with the Z index.
And remember, we're using the class to show and hide the sidebar.
Correct.
So not only we're hiding at 992, but also in here we have this class of show sidebar.
And if it's present, then we display it.
So the way we'll do that, we'll hide the sidebar container by default, and only if that class is present,
then we'll display it.
And therefore in here we'll go with negative one.
So again, by default, it's going to be hidden.
Opacity is going to be equal to zero.
So once I save notice, we won't be able to see anything.
Then we'll add the transition.
Since I want this change to happen over time.
And for this I'll use my transition variable over here and then at the very end we'll go with visibility.
And we'll set it equal to hidden.
Let's save.
And now we want to create that class.
The show one The show sidebar class.
So show, sidebar.
And essentially we want to take these values, the Z indexes, the opacity and visibility and set it
to the opposite.
So first, let me remove this transition.
We don't need it.
Zindex is going to be equal to 99.
Opacity is going to be equal to one and visibility is going to be equal to visible.
So let's save and check it out.
Since we have the show sidebar class present now again, we display it.
Hopefully it's clear.
And now let's start working on the content where all of the elements are sitting.
So we're going to go over here with class then As far as the background, again, same deal.
We're going to go with Var and we'll use one of the CSS variables.
So we're going to look for background.
Secondary and color.
That's number one.
And then the width is going to be the fluid width.
So var hyphen.
Hyphen fluid.
And hyphen width.
Let's save.
Check it out.
Now we have a white background and we have some kind of width for our content as far as the height.
Let's set it equal to 95 units.
And also, let's add the border radius.
So border radius and we'll set it equal to CSS variable.
So var hyphen hyphen border.
Radius.
Let's see.
Yep.
We should have the rounded edges.
Let's add some padding here.
So in my case, I'm going to go with four rims and then two rims.
After that, let's set up position relative because the close button is going to be position absolute
and in order to control it, we need to set the parent to be position relative.
With that said, rest of them, I want to set up in one column and for that I'm going to use the Flexbox.
So first, let's start with position relative.
Again, this is for.
The close button.
And then we want to go with display.
Let's set it equal to flex, then align items.
Let's set it to center.
But the flex direction is going to be column like so.
And once we have the flex styles in place, let's go with close hyphen BTN.
In here, like I said, we want to go with position.
Absolute.
And since, again, we need to provide the coordinates.
I'm going to go with top ten pixels and left ten pixels.
So ten pixels from the top and ten pixels from the left.
Since it's a button, I'm going to add background transparent.
And also we want to do the same thing with border color.
And also we'll set it to Transparent.
And then we'll increase the font size and we'll set it equal to two rems like so.
And let's also add the color.
So we're going to set color Var and this is going to be equal to red dark, one of the CSS variables.
And as far as the cursor, I'm going to set it equal to a pointer one.
Then we have the nav links.
So essentially we don't need to do anything with the logo.
It's just going to stay over there.
But we do want to style the nav links.
Remember we added the class of NAV links.
That was our div.
And here we first want to start with padding and you know it's going to be padding top and we'll set
it equal to two rems.
Okay, Awesome.
And for some reason, we have some kind of bug over here.
Let me try.
Yep.
Everything works right now.
And we want to again go with display, flex and flex direction column.
So display, flex.
Flex direction.
And we're going to set it equal to column.
If you're familiar, you know that the flex direction row is the default one.
But since I want to stack them one on top of the other one, that's why we'll go with flex direction
and column.
Now, when it comes to the nav link, since we have.
A icon as well as the text.
We'll set this one as a flex parent as well.
So we're going to be looking for NAV link class.
First, let's start with display flex.
Again, let's save.
And we're going to align both of them in the center vertically, and therefore we'll set up align items
and equal to center.
And essentially we want to.
The color and this is going to be equal to.
Our variables.
So text secondary.
Color.
And then let's also add a padding of one REM top, bottom and zero left and right.
Okay, good.
And then let's capitalize the text.
So text transform.
And this is going to be equal to capitalize.
And then let's also add the transition since there's going to be a hover effect.
So for this one, we're going to go with transition and we'll set it equal to variable transition.
Now let's target the nav link when we hover.
So nav link.
Hover.
And effectively I just want to change the color.
So this is not going to be equal to the secondary one.
We're actually going to go with primary 500.
So effectively, when we hover over the link notice, we'll get this primary color.
Then we want to style the icon.
For that.
We have the class, I believe.
Let me double check.
Let's navigate back.
Yep.
Notice the span as the class of icon and we'll increase the font size.
We'll set it equal to 1.5 rems.
Then we'll go with margin.
Right.
We'll set that one equal to one REM.
We'll go display grid and we'll place the items in the center because, again, same deal.
Since we have the icon inside of the span in order to place it exactly in the center, we need to do
a little bit of acrobatics, I should say.
So we'll go here with place items and let's set it equal to center.
So now the icons are exactly in the center.
We do want to add some transition since there's going to be a hover effect and all that.
And once the icon is exactly in the center.
Now let's discuss the active class.
Remember in the previous video I showcased that.
When we use the nav link component, the link which represents the active page gets the active class
and I'm not going to open up the dev tools to show that one more time.
In this case, we simply want to add some styles.
So I want to say the active class is also going to get the primary 500.
And since I already have the color over here, I can just copy and paste and now check it out.
Not only.
We have this primary color when we hover over the link, but also we nicely display what is the current
active page.