All right.
And once we have the small sidebar in place now let's also work on the big one and let's start with
imports.
So we're going to be looking for NAV links.
Something we just created.
So let's take a look.
Yep.
Now links.
Then we want to grab the logo.
So import logo.
And also we want to get the use dashboard context since again, we'll use the show sidebar state value
in order to control whether we're showing or hiding the big sidebar.
So these are going to be our imports.
And let's start right away by grabbing the state value and we'll set it equal to show sidebar.
And that is coming from use dashboard context.
Now, when it comes to the wrapper, it's going to be the same idea.
We'll have the parent and the parent is going to have two classes.
So one will use to.
Show and hide the big sidebar.
And the other one is going to be in general to apply the style.
So notice over here, same deal.
So we're toggling the same state value and based on that value, we either hide or show the big sidebar.
Now, in this case, it's going to be a little bit different, and I'll discuss that at the very end
of the video.
So for now, let's do it the same way where we'll have the div.
And Dave was going to have some classes and I'll right away make this dynamic.
I'll say, if show sidebar is true, pretty much the same deal.
We'll display two classes and if not, then we'll display one.
But again, at the end of the day, it's going to be a little bit different.
So sidebar container here and show sidebar.
So pretty much the same class and if.
It's false.
Then we'll do it over here.
The sidebar container.
So now let's navigate to the big screen since we won't be able to see the big one.
On a small screen.
Let's go with Dashboard and check it out since this value is false.
Now, of course we cannot see it.
Now, if I click notice, this is going to be our big sidebar now as far as the content.
First of all, same deal.
We'll go with content.
And this is something that I covered before when I talked about styled components.
Since these classes are used only in installed component, they're not global.
I can reuse the same class name and this is one of the reasons why I prefer using styled components.
Because I don't have to be original with my class names.
Notice same show, sidebar, same content and no issues.
Then inside of the header here we'll place a logo.
Let's close the component and then since we have already a nav links component right outside of this
one, we'll go with NAV links and let's close it.
And now let's navigate to the big screen.
Let's refresh just to stay on the safe side and check it out.
Since NAV Links contains all of the data, we nicely display a list of links.
Now there are two things that I want to change over here.
First of all, like I said.
This is going to be a little bit different since by default, what do we do?
We hide the sidebar.
Correct.
So once I refresh notice, it's hidden.
But to tell you honestly, my preference is to show the big sidebar right out of the gate.
So if you want, you can keep this kind of setup.
But what I'm going to do is just change the logic over here.
I'll say if the show sidebar is false, then I'll actually display it and the result is going to be
following.
Once I refresh notice by default, I'll always show the sidebar.
So essentially I'm just flipping it.
That's my preference.
If you want to keep the big sidebar hidden, just leave the same syntax.
Also, I don't want to close the sidebar every time I navigate to that particular page.
So yes, I want to do it on a small sidebar, but I don't want to do it.
When I click on a nav link which is located in the big sidebar, hopefully that is clear and in order
to fix that.
I'll actually pass in the prop I'll say is big sidebar.
And as a side note, if you're setting up a Boolean prop like big sidebar, then we actually don't need
to set up the value here.
We can just write it and if it's present, then yes, we'll grab it.
If not, then it's going to be false regardless.
So you don't need to go with is big sidebar equals to true or false?
No, just add it and if it's present then you'll have access to it.
So only in the big sidebar, of course, we'll pass this prop and then back in the nav links.
Let's destructure it.
Is big sidebar.
That's the prop I'm looking for.
And in here, where I toggle, I'll check if this is present.
Then I actually don't want to toggle it.
And basically I'm going to go with Null.
And if it's false, if essentially I'm clicking on the nav link which is located in the small one,
then of course I want to hide it.
And how is that going to look like?
So notice in here we still hide the sidebar, but on a big screen.
First of all, we show it by default.
And if we click on a page, we don't close it again.
This is my preference.
If you like the previous setup, just keep the logic and you're going to be in good shape.