All right.
And once we're done with the small sidebar before we continue.
And do the same thing with a big sidebar.
Let's take a look at something where essentially we are using the same links.
Correct.
And that was the whole point why we set up the utils.
Correct.
But if we think about it, can we create a novel component and essentially just reuse this functionality
since we will use it in the big sidebar as well?
And of course the answer is yes.
So here are the steps that I want you to take.
Go to the components and create a novel component.
So now let's just and then set up the components and I'll cover these ones at the very end because I
think they're not going to make that much sense right now.
So first, what we want to do is navigate to components and we want to go with NAV and then links,
address.
We create the component.
Let's right away set up the structure and everything.
And then as far as the return, well, now let's take a look at the small sidebar.
What do I have over here?
I have this div with the class of knowledge and essentially all the links logic is right over here.
Correct.
So what I always like to do, since there's quite a bit of code, I just collapse which part I want
to take out and then take it like so.
So I'm going to go with command and X basically cut it out.
Then we're navigate back to the links, copy and paste.
And we just need to take a look.
What are we rendering here?
So we have links.
We'll definitely need those ones from the small sidebar.
And second, we need the NAV.
Correct.
So let's navigate back to the small sidebar and take both of these things over here.
Again, let's cut it out and then set it up back in that links.
Then once we have both of them available, the last thing that we need to cover is the one click you
see.
On a big sidebar.
Actually, we won't use that on click.
But on a small one, I do want to use it.
I do want to close the sidebar every time I click on a link.
And how we can do that?
Well, we have this toggle sidebar, correct.
So why don't we pass this one in as a prop?
So I'll say here toggle sidebar and I'll pass it from the parent container.
In this case, that is going to be the small sidebar.
Also, a quick side note, since the now links is sitting right next to the small sidebar.
I mean, essentially the paths are going to be exactly the same.
I mean, this one comes from the library and we're just talking about this links one.
And again, it's going to be located in the same place or relative to our knowledge.
So let's save it here.
Let's go back to the small sidebar.
And then in here, I want to import and remember, I want to place it right after the setter.
So I'll test out the auto import in this case.
I'll go with a NAV and then a link.
Notice I can nicely render and I can nicely import them.
Just remember that we do need to pass in that toggle sidebar.
That's what the component is looking for.
I mean, it's not a big deal if you don't pass it.
Just the functionality is not going to work.
So we're going to go over here with toggle sidebar is equal to a toggle sidebar.
Let's save it and then let's test that out in our application.
And if everything is correct again, the goal is that when we'll be setting up the big sidebar instead
of grabbing the list, going over the links and then rendering them one by one, we'll just get the
component.
Yes, of course you can copy and paste the code.
I mean, that's not the point of this video, so let's save it here.
Let's navigate back to our application.
We'll make this one smaller.
And notice, once I open first, I can see all the links, which is just awesome.
And then second, notice the functionality stored.
Now, let me refresh just in case.
Maybe there's some weird bug, but no, everything looks to be about, right?
A quick update.
If you're using latest React router down version, you might have a different result.
Essentially a bug.
Where all the sub.
So in our case, those are stats.
All jobs at job and profile are displayed as active.
Basically there's no distinction between active route and a regular route.
Luckily, the fix is very simple.
We just need to add and prop to the NAV link component.
So in the nav links component where we iterate over the links, we just need to add the end prop to
the NAV link component.
And of course, I'll update the renaming.
So you can always check out the Stack Overflow post and reference the correct NAV link code.
Now let me navigate back to the read me and cover a few things.
First of all.
As you're looking at, you're like, okay, but what about the classes here?
So and here I have the novel links and the novel link as well as the active.
Well, one thing we need to keep in mind that we set those classes from the wrapper.
So in this case, yes, you can technically make a case where you can set up the style globally for
the modeling as well as the entire container.
But keep in mind that you might have a case where those links will be displayed differently.
So at least in my opinion, a better approach is to set up these classes in the knowledge component.
But don't apply some global styles or some local styles here in a component.
Instead, what we're doing.
Remember, we have our wrappers, correct?
So let me just showcase something where if you take a look at the big sidebar, the one that we're about
to work on notice over here again, I have all the styles for hiding, showing all that.
Notice this one since I know that there will be a nav link clash inside of the links component, which
eventually I'm going to render, I can nicely style it from here.
And then also remember that since we are using style components, the styles won't be colliding.
That's a very, very important point.
So essentially what I can do is I can use this novel links nicely over here in the novel links component,
the class and this class, an active class as well.
And then each and every time I'll grab this component in some kind of other component.
Since I'm using stealth components, I'm good to go.
Again, just my preference.
I mean, there's a million ways how you can set it up.
And then lastly, I just want to mention something else that is somewhat of a preference where you're
probably looking at and you're like, okay, but why we have to set up the nav links altogether?
I mean, we could have just added this one to link just over here.
So if I take a look at the utils and then link jazz and you're absolutely correct, it's just my preference
again to keep the data separate from what we're rendering.
Is it the only truth?
No.
I mean, you can set it up however you want.
You literally can go here and take this entire thing and just copy and paste and instead of exporting
links, you're exporting knowledge.
So as always, there's tons of ways how you can set it up.
And this was my choice where links are located in the utils.
But since I know that the now links will be displayed in multiple places, I just set up a Netflix component
and then in this case we import in small sidebar and in the next video we'll do that in the big sidebar.