Wonderful, and once our toggle functionality is in place, I was displayed links on the general ideas
following iterate over, all right, and then will return a novel ink item and in there will provide
five hours more text for the icon as well as the path.
And as far as the code is going to look something like this where we grab the novel, I mean, we already
have the import.
This is just here for demonstration.
And then where we have the dev with Mavericks class, I have my lecturer.
I like, I said we're iterating or we're just using map.
And in each and every iteration, we access the object, correct?
Now what are the properties in the object text path?
Add an icon.
All of that is coming from the link.
And then instead of going with link component, we're going to go with one.
And the setup is extremely similar where we have a dual prop.
So essentially, just like with Link, we go here with two and then whatever is the path.
Now, in this case, I'm hard coding, but keep in mind that, of course, I already have that value
in the path property.
Now don't worry about this one.
I'll cover this one at the very, very end.
But when it comes to key?
Well, this is traditional react lists.
So we need to go with Kiprop in passing something unique in this case.
And then on click I'll right away set up toggle sidebar.
Because what I want as far as functionality that the moment I click on a page actually want to close
the sidebar.
This, to me, makes all the more sense.
Otherwise, while you navigate to the page, but you still have the sidebar on a small screen.
Keep in mind again, we're talking about the small screen.
So again, it's always my preference just to close the sidebar the moment I navigate, how do we do
that?
Well, we have on a click and we already have the function again at this point when you can see this
link.
The only value for show sidebar is going to be true.
That's why we can simply passing a toggle and I already covered it.
Yes, technically you can set up the close one, but I just didn't see the point.
And I also want to display instead of narrowing two things.
I want to display the icon, and it's going to be sitting right here.
And also a text.
So let's go to a small sidebar and let's try to implement that.
So we have and coming from React router or some one where I have the there was just iterate over some
sort of microfiche that's going to be my expression.
Like I said, we're going to go with links.
That's something we sent a few videos ago map than in our callback function as we're iterating.
I guess I'm just going to call this a link again.
You can call this item.
You can call this vegan food truck that's really up to you, and we're going to go here with context.
Let's pull out those properties path hardy and icon.
And that is equal to MyLink.
Now what are we returning from each and every iteration?
Well, let's go here, and let's go with our now link first Suhasini component.
Remember to prop.
So where the user is going to navigate, then we want to go with key and let's passing something unique
or generic as easily.
And then also, we want to go with on click.
And like I said, we want you to toggle this sidebar a.k.a. we want to actually close it and then inside
of the netlink.
Let's go with our span.
And this is for styling.
So out here, class name and then icon.
And then inside of the span, we go with the actual icon.
So that's the property where our React component is sitting.
Remember, that was our setup in the works.
And then also side by side, I'm going to go with text.
So let's save it here.
And then we'll worry about the styling, because at the moment, if you navigate your application,
you pop open the sidebar.
You'll notice that the links are there, but kind of looks a bit ugly.
Correct.
So yes, we have the icon, we have the text and everything works really well.
And we actually also close the sidebar once we navigate to the page.
And I guess more importantly, we're actually navigating to that page whether or not is a profile,
whether that is the ad job.
And hopefully you get the gist.
But there's two things that are missing.
First, our links look somewhat ugly.
So it would be very useful if we would set up the CIUSSS.
Now I already prepared the class, so don't worry about it.
We won't have to type off the see assets together.
And a second thing that I want is to showcase, well, which page we're actually on.
So let's take a look at our complete progression.
If I navigate to the stats, I close the sidebar.
OK, that makes sense.
But then once I crack it open again.
Notice now it signals that I'm in the stats already, and the same thing is going to be with, for example,
Adam.
Now also showcase that is the same thing with a big sidebar.
Maybe this is easier to see or notice every time I navigate to the page.
I actually also showcase the actor one.
Now I apply the same styles as I'm hovering, so please don't confuse it here.
So I have these styles as I'm hovering.
But as far as the actor won, this will always have of this type of styling.
And this is the reason why we used here this modelling.
Because in React Router six, we have this map a link component, and it's actually very straightforward
to set up some kind of style if the link represents the active page.
And let me show you first the syntax, and then I'll quickly show you the sheer size as well.
So here's what we need to do.
We can go to the novel link and instead of just typing class name equals to such and such.
What we want to do over here is to set up our colors so we go back to JavaScript LAN and we actually
passed in the function.
So we're passing the function and whatever classes we return from this function, well, they will be
applied.
So that's the first step.
Now second, what's really interesting inside of this function, there is a prop we can access now.
Again, this is not something that we are going to make.
This is something already provided for us.
Very, very important distinction.
Please don't write over here, shake and bake and expect that everything is going to work.
So what do we need to do?
Is set up this object?
So essentially, what I'm saying here is, yes, I'm looking for specific parameter, but I know that
the property name will be here is active.
Notice how it right away suggests again, this is already set up for us and it is provided by the library.
And then as far as the functionality, remember whatever we're going to be returning from, this function
will be applied as a class, correct?
So technically I set up the curlies, but I think we can go with implicit return where I'll say if is
active is true, then I want to pass my novel in class an active cluster.
Now these are two classes that I did set up, so that's the difference.
This is coming from the library, but this is something that we set up.
So essentially, what are going to be the classes applied if it is an active?
And what is going to be the class if the link is not active?
So in my case, I have the active class and then if the link is not active while, then I'll just go
with an outlook one and before I display how everything looks in a browser.
Let's take a look quickly at the wrapper.
So let me go to my assets, then wrappers.
Then we're looking for a small sidebar somewhere here.
Think it's going to be over here and then again, notice.
Display none.
So starting from the big screen, you won't see the small sidebar in general because I only wanted to
display the big one.
Like I already mentioned, and then this is going to be the surface for the title.
But if you keep on scrolling, keep on scrolling is going to be the thesis for modeling.
So that's how they're going to be displayed right from the get go and then notice the actor one.
Essentially, I just change the color.
So for the active one, I go with this color for the text and then reverse color for the icon.
That's it.
That is the entire logic behind it.
And once we navigate right now to our application and then again, I'll have to make this smaller.
And once we open this up.
Notice if the add job page is going to be the actor, one moment you pop open the sidebar, you'll have
a little bit different styles for this particular link because it is the active link, and that's how
we can set up our links as a memory and display them in our small sidebar.