All right.
And once we have the nav bar in place now let's set up the links data.
So what am I talking about?
Well, we'll have the big sidebar as well as the small sidebar.
And in both of them, we'll have list of links.
Which of course are going to represent our pages.
And for each link I want to have three things.
I want to set up the path.
So whether it's going to be all jobs, stats or any of the other pages, then we want to set up a text.
Basically what we're going to show to the user as well as the icon.
And since I'm going to use it in multiple places, it only makes sense to set it up as a data somewhere
separately.
And then I can import, I can iterate over and I can display those links again in multiple places.
And in order to do that.
We want to create the utils folder and a links.
JS And this is the case where I will copy and paste the imports from the Readme.
There's really no point for you to watch how I pretty much import these particular icons.
Also, please keep in mind that you can change the icons if you want.
Essentially we want to set up import from react.
This is a must since these are react components.
Then we want to come up with an array.
In my case, I'm going to call this links and like I said, text path and I'll discuss this dot a little
bit later.
But rest of them should be very straightforward.
Notice I have text all jobs path, all jobs.
Essentially it points to my page and remember we already set up the pages in the app.js and then whichever
icon I want to display.
So first let me again copy these ones.
Like I said, there's no point to type them together.
Let me collapse everything in the source.
I want to create a new folder utils one.
And instead of the utils, we're going to create a file and we're going to call this links j.
S x.
Let's paste our import.
And then also let me grab the react.
So import react from.
And react.
Okay, Awesome.
And now let me set up that array.
I'll collapse the sidebar.
Const links.
And then it's going to be an array.
Each and every item is going to be an object.
And in there I'll have three properties.
First one is going to be text.
So add job.
Then path.
Like I said, I'm going to discuss this dot in following videos.
For now, let's just type it and I'll explain why we need to do that a little bit later.
And then as far as the icon, I'm going to go with this one right now.
So let me close this component.
That is going to be my first page and I need four more.
So one, two, three, four.
Like so.
So the next one is going to be the all jobs.
Or maybe I copied one too many.
That's okay.
All jobs.
That's going to be the text as far as the path.
I'll set it as all jobs.
And as a quick side note, the reason why I have those paths is following notice stats, all jobs and
rest of them.
Hopefully that is clear.
So the last thing we want to do is change the icon.
Instead of this one, we're going to go with the MD one.
Yep, that's the one.
Then we want to set up the stats one.
So text is going to be stats.
Path is going to be also stats.
And then as far as the icon I'm going to go with i o.
The bar chart.
One After that, we have the profile.
Same deal over here.
So the path is also going to be profile.
And then let's set up the Im.
Okay.
And then the last one is the admin one.
So admin here.
I'd been here.
And lastly, let's change this to again MD.
And the panel settings one and with this in place.
We are ready to set up the small sidebar.