Okay.
And once we have the structure in place, now let's understand how the functionality works.
So first of all, regardless whether we have the show, sidebar or not, with the help of CSS, once
we get to the big screen, we hide the small sidebar.
So we only display the big one.
And of course, once we set up the CSS, you'll see how we do that again.
Hopefully that is clear.
So regardless of the status of show sidebar, we hide it once we get to the big screen, then second
in order to show.
The sidebar.
We use this show sidebar class.
If the class is not present.
Check it out.
We don't display it.
So if we put two and two together, we could get the state value from our context.
And then effectively in here set up the ternary operator.
So if the state value is true, then we show the sidebar.
If not, then we hide it.
And of course, when it comes to close button and when we click on the links, we could actually hide
the sidebar.
So how is that going to look like?
Well, first of all, remember, from our context, we're getting back the object and the state value
is show sidebar.
And in order to toggle it, we have a function.
Toggle sidebar.
Correct.
So now let's navigate over here.
Where we have the class name and let's set up that ternary operator.
So we want to go here with the correlation.
Then we'll go with show sidebar, and if it's true, then we'll display both of the classes.
So let's cut it out.
And if it's false, then of course we're going to just display one.
We'll say here, sidebar and container, let's save it.
And of course, once we do that, the sidebar is hidden.
Correct.
We cannot see the sidebar.
Why?
Well, because the default value is false.
But remember, we already set in the nav bar.
The toggle button.
Correct.
So every time we click on a toggle button, we actually toggle this state, value the show sidebar.
So check it out.
The moment I click on the toggle button, we can actually see the sidebar.
So now, of course, our next step is going to be adding toggle sidebar to this button because we want
to close it.
Pretty much the same deal.
And yes, I know that we could have technically set up two functions, one to open, the other one to
close, but I think it's just easier if we have one toggle sidebar.
Remember, in this case, once we click on close, there's only one option we have.
If we can see the close button, that means that show sidebar is true.
So this will always set it back to false.
So let's go here.
Want to toggle one.
Let's go with on click and we'll just go with toggle sidebar and now check it out.
Click hide.
And once we click in the nav bar, we display the small sidebar.
And also we want to do the same thing.
When we click on a link because again, yeah, we can nicely navigate to the page.
I can clearly see that in the URL, but unfortunately I cannot see anything because the way the sidebar
is set up, it pretty much takes up the entire screen.
So here's what we can do.
Notice this nav link.
We'll do the same thing once we click on the link.
Not only we're going to navigate, but we'll also toggle the sidebar effectively.
We'll just hide it.
So notice something interesting.
Let's say I click on stats and now I nicely navigate to the stat page.
And at the very, very end, let's discuss three things.
So let me first of all, open up the sidebar.
I want to inspect the elements and here in the content we'll see the NAV links and you'll notice something
interesting.
Where.
Modeling component has this active class.
So this is set with React router.
So essentially this active class gets added to the link, which of course represents that page.
So, for example, if I'm on the all jobs right now, this is going to be active.
Now, of course, we do need to add some CSS to this active class and I'll showcase that once we set
up the CSS.
Just keep in mind that by default.
With the React router.
We get this active class to the link that represents the page.
So for example, if I go here to the profile and notice how this profile link right away gets this active
class.
So essentially with the CSS, as you can see, I'm just adding the primary color to the active link.
Okay.
Hopefully that is clear.
So every time we navigate to the page, the nav link is going to get that active class.
However, there's one.
Gotcha.
Since we have a nested structure and the dashboard is the parent, notice how?
Every time we navigate to a page, ajob always stays active.
So it always has this active class.
And again, the reason for that is because we have this nested structure.
So basically the dashboard always matches the route since it's a parent and therefore it's always active.
And in order to avoid that, we just need to add the end prop to the nav link save.
And once we do that, notice ajob doesn't get the active class unless we actually navigate to that page.
So once we navigate to the page, then of course it's going to get that active link.
And at the very end, let's talk about why we use Dot over here in the path.
You see all of these links again are going to be relative.
So let's say if we're going to write forward slash here, what's going to happen?
We're actually going to navigate to the home page.
So notice I click on Add Job and we navigate to the landing page because effectively that's our home
page.
So let me get back right now to my dashboard and showcase where we navigate if, let's say we're going
to right here Dashboard.
Let's save that.
Let's open up the sidebar and check it out.
The moment I click on Add Job, I navigate to Dashboard Forward slash Dashboard.
Like I said, these links are going to be relative.
So technically if we want to fix this.
First, let me navigate back home.
Let me add here a forward slash.
We could go with forward slash dashboard.
Then, of course, we'll navigate to the dashboard page, which is our parent.
And of course, we'll display the Add job.
Or we can simply add here a dot and that is going to right away navigate to the parent.
So this is totally up to you.
Just please keep in mind the gotcha that of course the links are going to be relative and therefore
we need to be careful with our index one.
So now notice everything is correct.
We go to all jobs and then if we want to navigate back to add job, we nicely navigate back to this
particular page.
And with this in place, we're done with small sidebar and we can move on to the next topic.