All right.
And up next, let's start working on the small sidebar at the beginning we'll just set up.
A basic structure.
Effectively, we want to see something on a screen and then we'll worry about the functionality.
So first, let's navigate to components.
We're looking for a small sidebar.
We already have the use dashboard context, which eventually we will implement.
For now, we just want to go with wrapper and inside of the wrapper let's set up a div.
Now this div is going to have a following structure.
We'll set up a class name and right away, right out of the gate, we'll set up two classes.
One is going to be sidebar container and then show sidebar because we'll use the show sidebar to toggle
the small sidebar.
Effectively, if the class is present, then we'll display it.
If not, then it's going to be hidden.
And since I want to see something on a screen as we're building it, therefore, of course I'll add
it and this is what I'm talking about.
So eventually we will use the values from our context to control it.
For now, let's just hard code.
So we're going to go here with sidebar container and show.
Sidebar.
And of course, once we'll set up the CSS, you'll see the actual logic.
And notice once we do that, it gets darker.
Effectively, we get the overlay.
Now inside of it we're going to go with another div and here we'll have the content and we'll start
by setting up the close button.
So we want to go here with button.
The type will be button somewhat straightforward.
Then let's add a class name.
Close hyphen BTN and inside of this button we want to set up a icon and the icon name is for times.
Let me see.
Sometimes This one over here?
Yep.
Everything worked.
Notice this is my small sidebar, and this is my button now.
Eventually.
Once we click, of course we'll close it.
And then right after the button we have a header and we want to set up our logo, something we already
did before.
And for some reason it's not importing.
So let me grab the logo from logo.
Yep, that should do it.
And then we want to set up a div right below it with a list of links.
So I'll add a nav links class and then we'll iterate over the links array we just set up in the utils.
So let me try.
I'm going to go with the links and fortunately it's not getting here, so let me go with import links
and let me double check that I export.
Of course not.
So I'm going to go here with export default and links.
Let me save it.
And then back in the small sidebar, we want to go here with links from the utils.
Okay, beautiful.
And then we want to iterate over so I'll have my links array and then pretty much for every item I want
to return a nav link and effectively nav link component is very similar to a link.
It's going to navigate to that specific page.
However, there are some advantages which we're going to use and I'll talk about them a little bit later.
So basically I want to iterate over those links now, remember.
In the callback function in a map we can pass in the parameter.
And effectively I'm just referencing right now that object we created in the previous video.
And I know that the object has three properties the text path and icon and let's set it equal to a link.
And now what do we want to return?
In each iteration we want to go with nav link.
So that's the component again coming from React router Dom and nav link has the same to prop and essentially
in here we want to pass in the path.
Then key is going to be equal to text.
Since we didn't set up the IDs, we do want to add a class name of nav link again eventually.
We will also set up the on click, but that is coming up.
And then in here inside of this one, we want to go span and we'll add a class name.
Classname of icon.
And remember, there's also a property we can access, which is icon and then right outside of the span.
So this is a little bit tricky.
We want to pass here the text.
Let's save it.
If everything is correct, this is what we should see on the screen.
So notice these are our links.
And in this case, we're using the nav link component.
Now here's the gotcha notice we navigate to the correct page, but nothing changes.
Why is that?
Well, because we're not closing the sidebar so we can nicely see in the URL bar that actually our path
is changing.
So notice we go to all jobs, then back to Dashboard Profile and all of them.
So everything works.
We just need to make sure that we close the sidebar and this is something that we're going to do in
the next video.