Not bad and meant we knocked out the neighbor.
So what's next?
Well, next, I want to work on the big sidebar over here as well as the small sidebar, and I'm only
referencing them in such a way because this one will be displayed on a small screen.
And then once we get to the big screen notice, then we'll use the big sidebar like show.
Now, if you take a look at both of them, you'll notice that we have links over there.
And essentially, for Link, we have a path.
So where the user will navigate, we have the icon and we also have the text, and since we are using
that in multiple places, it kind of makes sense for us to set up a list so that where if there's ever
change, let's say I change the path, text or the icon.
I only have to do that in one place.
And here's how we're going to do that.
First, we'll create a new photos folder in the source that will set up links Jaspal, and we want to
import the following icons.
Now this is the case where I will speed everything up and I'm just going to copy and paste.
Now, if you're not a fan of that, I mean, you can stop the video, type out the imports and then
you can resume.
But in my case, I think I'm going to do the copy and paste thing because a lot of people probably will
find it annoying if I'm just going to start typing them out one by one.
That's just a side note.
Essentially, again, what we're doing, we're just importing icons one by one from multiple libraries
star.
Honestly, it's always my preference to kind of stick with one library if I can, just because, in
my opinion, it looks a little bit more consistent.
But this was the case where I couldn't find the icons that I was looking for from the same library.
And that's what you see or hear.
There's organic food market where essentially each icon is coming from the separate library.
And then we set up a links array and then each link is going to be an object and then I'll have, you
know, the property since when we ran the list, we have a key problem and we need to press something
unique.
So in this case, we're going to go with it.
Well, then we have a text.
So this is what is going to be displayed inside of the link within the path where user will navigate.
And then the icon and what we're going to do in our code will iterate over this list.
We will use and now link instead.
So even though I showed you your link, there's actually a novel component coming from reactor number
down.
And of course, I'll spend more time on explaining why we go with not one and not essentially we'll
just pass in these writers.
So hopefully that is clear.
And no, I just need to go to this source.
And like I said, we need to set up our utos one.
So let's go here and let's say utils folder, and then I'm going to go with my address one.
So let's go with links and address.
And like I mentioned already previously, in order to save us a little bit of time, I'm going to grab
the imports and translate as I'm looking at the application.
There's going to be some other times when I'm going to do that as well.
So I'll go over the imports one by one.
Where are they coming from?
What's the purpose for them?
But as far as typing them out, I think we're at the point where it's much more useful for us to spend
time on a logic, not typing out the imports and fully understand that some people still complain regardless.
But if this is the route that I'm going to take, so if there's going to be a component with tons of
imports, yes, I will set up the imports in the lead me and then I'll just copy and paste when I'm
about to set up the component.
And once I'm done with my Rahmbo, let me go to the links.
Just copy and paste and I'll set up data.
So I'm going to go here with Konst and then links.
Now that is equal to an all right.
And like I said, each link will be that object.
And we're going to go with it.
And Marcus, I'm just going to hard code one.
Then as far as the text one.
Well, this is going to be the first one.
And in my case, it's going to be a static one.
So set up my text on set equal to stats and we want to go with path.
And you're probably wondering, OK, well, why do we go with 4GB?
Well, let's take a look at our Jess.
What do you think is happening over here?
So we have there out this is the path for the parent.
And then we have all of these nested ones.
Correct.
So what happens with index?
Well, that will be relative to this one.
And then since the links will reference the pages that we have, essentially when I say forward slash,
I mean my homepage now again, if this is going to be dashboard like I already previously mentioned,
then of course, this link will also point to a dashboard.
Hopefully that makes sense.
So essentially when we go with this forward slash, since we are in this nested Rowland, that means
that we're pointing to the parent wherever it is, whether that is Dashboard Blog's product or whatever.
And then we want to add an icon so comma and an icon, and that will be equal to our React component.
So we're going to go here with I o and then we'll get our icon.
Let's say this one.
And now what I want to do essentially is to copy and paste and just add different values, a copy and
paste.
And I believe there's going to be four of them.
So I just add a comma just so I don't have some dumb typos, and I'll write a way, set up the exports
or export default.
And I'm looking for two links, of course.
Then let's change the text first or no?
Let's start with ideas that's going to be simpler.
So one, two three four.
Ryan, we want to go with all jobs, and I was going to be the texts of all jobs around this one will
be equal to and know what I think I can like, actually start and remove them both.
Then let's go here with ad jump.
That's going to be the second one.
And then the third one will be a profile, basically a fourth one.
I'm sorry.
And as far as the path, well, this one is the first.
OK, that makes sense.
That means that it will point in our case to the parent, which is our homepage correct now in here.
Where do I want to go?
Well, I want to go to you all.
And then hyphen jobs y wants to go back to the app.
Yes.
What is the path for my all job throughout?
It is all hyphen jobs, correct?
So that's why we go here and we say all jobs.
Now we also want to do the same thing with our job.
And then lastly, we want to go with our profile as well.
Now the last thing that we need to do is just to change the icons, and I purposely set the imports
in the exact.
So it's less confusing.
So now we want to go with this one than this one and this one over here.
So let me remove this sucker and this is going to be the case where I'll select.
All of them are gone and we're going to go with Andy that I want to go with the FAA, one FAA and nine
forms.
And then lastly, it's also set up the profile one like so now I didn't set it up as a components or
Mr. Diplomate.
Now let me add proper syntax, and we're pretty much good to go once we have a list logic in place.
Now we can start implementing those links in our sidebars.