All right, so how do we set up the functionality?
Well, first, let's take a look at our state.
And let's jog our memory that we do have the power there, correct?
We have one for sure sidebar.
So now we just need to import that in our small sidebar and then we need to conditionally add or remove
the class depending on the show sidebar value.
And also for this guy.
40 close button.
Well, let's just invoke the toggle sidebar.
I know it kind of is a little bit probably confusing where you go, OK, but we're not toggling.
I mean, this is close button.
And yeah, but remember that you'll only be able to click on a close button if this is true to begin
with.
So I know that technically, yes, we can set up another function where we just close the sidebar,
but I thought that we can save a little bit of time and then use the toggle functionality instead.
Hopefully, what I'm saying makes sense and then how it's going to look like.
Well, in small sidebar, we have a show side bar and toggle sidebar.
So those are the two values that I want.
I want the property.
So that is the Boolean, and I also want the function, the one that always sets it to the opposite
value.
And then as far as the census, well, instead of both classes, I'll say, and this is true, right?
Get me these two singers, if not one, it's only going to be a container.
And what that means is, well, then we won't display the sidebar.
And again, please reference these gestures if you're interested of how I set that up in this case.
Now, as far as the functionality, I just look for my button.
I'm learning here.
I want to add the toggle sidebar.
So every time I click on a button, what I'm going to do well, I'll toggle devours, correct?
So let's navigate back.
We're looking for the show sidebar as well as toggle one.
Let's set up our curlies or say show.
Sidebar comma and then toggle sidebar sidebar and then that is equal to use AMP context, let's invoke
that and let's start over here, and I'm going to cut these ones out because I want to save myself a
little bit of time and actually reduce them.
And here, let's set up our condition where I'll say if they show side bar value is true, what do I
want to do?
Well, then I want to display these two, correct.
But I want to go with this value.
Now, if it is false, well, then I can go with this one.
Let's see if we just set it up.
So if you navigate back right now to your project, you shouldn't see the side bar.
Why?
Well, because by default, it is false.
But now we can actually toggle in the state.
So let's go back here.
Notice this is false.
But then every time you click, you'll be able to see the sidebar.
And once we have that one in place now, we simply want to take our function online instead of this
console.log, simply passing the reference again.
We're not passing anything in the function, so we don't need to set up the arrow function or any of
that stuff.
We simply passed in the reference and now everything is going to work where once we'll click on this
button.
Remember, in the number, we already set up the functionality where we were controlling this value
using this toggle button, correct?
So once I click, I can see the sidebar.
And then once I click on this close one, I can hide it.
And with this in place now, we can toggle our small sidebar in our application.