Okay.
And when it comes to NAV bar, this is what we're shooting for.
So there's going to be a toggle button for the sidebar.
And again, this toggle button is going to control both sidebars, the big one and the small one.
It's just going to depend on the screen size.
So on the screen size, we'll display the small one and then.
Of course, on a big screen, we'll control the big one and then we'll have some kind of text here.
And on a small one we'll have the logo.
Again, this is just going to depend on the screen size.
There's also going to be a functionality to control the theme and also an option to log out.
So those are the things we want to set up in the nav bar.
And as far as the imports, we want to grab the wrapper, which we already have, we'll need an icon.
So for this one I'll use the icon.
And also we want to grab the logo.
Remember, that was one of the first components we set up and at the very end, we also want to grab
the context.
Why?
Well, because every time we'll click on this function, we'll toggle what?
We'll toggle the sidebar.
And if you remember, we already created a placeholder function for that.
So instead of for home, the icon name is going to be following, we're going to go with for align left.
It's still coming from.
The font awesome library, so that doesn't change.
Also, we want to grab the logo.
But you know what?
Think I'm just going to use the auto import.
So let's start with the wrapper.
Instead of the wrapper, we'll place a nav center again.
CSS is coming up.
Then we want to go with button type is going to be equal to a button.
And we want to add the class name of toggle hyphen BTN.
And on click this is where we'll toggle the sidebar.
But you know what?
Let's first set up the entire return and then we'll worry about it.
So this is the first div, the nav center, and then right next to the button.
But still within this div we'll create another one and in here we'll have the logo.
So that's the component.
And for some reason, again, it's not importing.
So let's try it out.
Okay.
Logo from logo.
And then right below it we'll have the text.
So again, depending on the screen size, we will toggle those things.
So here, let's say logo text.
And I'm just going to go with Dashboard.
And then right outside of this div we'll set up a div with a class of BTN container.
So for now we're not going to worry about the toggle functionality.
So the dark theme toggle as well as the logout one.
Let's put them on hold for now.
So in here, let's go with BTN Container.
And let's just type, toggle and log out.
So all of this is coming up.
And if everything is correct, this is what we should see on the screen.
And once we get to the big screen, we'll just use the CSS to change from the logo to the dashboard.
Why?
Well, because on a big sidebar, we'll have the logo, so there's no point to have that many logos,
at least in my opinion.
And once we have the general structure in place, let's also grab the use dashboard context our hook.
And more specifically get the toggle sidebar function.
So let's go here with use dashboard context.
Let's invoke it.
Let's set it equal to and then from the object.
Remember we logged in small sidebar.
We can grab the toggle sidebar.
That's our placeholder function.
And when do we want to invoke it?
Well, when we click on a button, right.
So we're going to go over here with on click.
And let's set it equal to toggle sidebar.
And if everything is correct, not only we should see these elements on the screen, but also every
time we'll click on this button.
The sidebar.
State value will change now since we don't have the log over there.
It's kind of hard to see.
So you have few options If you want, you can navigate back over here and just log and that way you'll
clearly see over here in the small screen or you can navigate to the big screen.
Of course you need to go to a dashboard, one where you have the nav bar.
Then we're looking for the components and essentially we want to find the dashboard layout.
So this one over here.
Notice I have to state values and check it out.
The moment I click, the first one turns true.
Click again and it's back to false.
And with this in place, we can set up the CSS for the nav bar.