And once we have the general numbers structure in place now, let's start adding slowly, the functionality
on the first one on Add is toggle sidebar now.
In our case, what we're going to focus on is to set up this state of power here.
So talking about this one nurse in the state in the complete application you noticed somewhere.
Cheryl Qanbar Yep, there it is.
Notice how this one is false.
Now if I click, this is going to be true right now.
And don't worry about why this is actually happening the other way around.
It all makes sense once we have these ideas.
And keep in mind that at the moment, there's really not that much about the sidebars that we have right
now.
So there is a big sidebar text here, and then there's also some text on a small screen.
So for now, what I want to focus on is to set up all the functionality as far as changing that state
in the state, and then we'll focus on implementing that in the sidebars.
So for me, that kind of makes a little bit more sense where we set up the logic will control the state
value.
And then eventually, once we implement those sidebars right from the get go, we will use that state
value to either showcase or hide the sidebar.
Hopefully, this makes sense.
And essentially, our steps are going to be following where we want to go to access, address and create
our action.
Gosh, straight up, it's going to be toggle sidebar when import export.
I mean, again, not to be redundant, but at this point it's kind of already self-explanatory.
What am I talking about?
And then in the app context, you want to create another property in the initial state.
In this case, it's going to be show sidebar and in my case by default, is going to be set equal to
false.
Then we want to set up a function where we simply dispatch our action.
So toggle sidebar and then in the reducer, what do we want to do?
Well.
We want to toggle Devourer, so we will return our entire state as it is.
And then when it comes to a show sidebar and here I'm going to go with my exclamation point.
And in other places, you might probably read a term bang.
And essentially, I'm going to go with state and show sidebar.
And effectively, what that means is that whatever is the current value will set it equal to an opposite.
Since we have a Boolean in state one, let's keep on moving and not in the nevada-las.
I want to grab my toggle sidebar.
And this is going to be coming from used context.
And again, I mean, at this point, it's pretty clear that we also need to add to the value correct.
And essentially, where I have the button, the toggle one, I want to invoke toggle sidebar.
And again, our main goal is to toggle the value in a state.
I fully understand that we're not implementing it anywhere yet, but once we'll set up the sidebar,
it will make all the sense in the world.
So let's start, I guess, over here where I want to navigate through my actions.
So let's see.
Let's see.
I have a context.
I have the actions, and I think I'm going to come up with new ones.
I'll say, Oh, here comes and then toggle underscore sidebar.
Now that is equal to what?
Same deal.
Just a string value.
So I'm right or exporting.
That is cool.
And then I want to go to, I guess, app context.
Let's start over there.
We're going to go with toggle sidebar.
Then let's keep on moving.
Remember, we need to set up a state value that's extremely important and the value will be show and
then sidebar like.
So that in my case, by default, it is going to be false.
Then we want to set up our function.
So toggle sidebar.
So I'm going to keep on scrolling, set up user, yada yada yada.
And let's go.
Here comes and we're looking for a toggle and then sidebar.
That's the function now inside of the function.
What do we want to do?
Well, we simply want to invoke the dispatch, correct?
So we're going to go here with dispatch and learn what type we want to pass and what action type.
Well, we already have toggle sidebar.
Let's explore this in the value.
That's an important step, so toggle sidebar here, because otherwise we won't have access to it in
our application.
And now let's jump over to the producer and probably I'll copy and paste just to speed this up.
I still want to return to state that stays the same.
And you know what?
I forgot to grab my toggle sidebar.
So let me move up.
Grab it from my actions, and then I want to go toggle sidebar.
And like I said, I am show side bar value, and I just want to set it equal to the opposite.
So we're going to go with state and then whatever is the opposite of the current value.
So state dots show sidebar and exclamation point.
Then let's hop over to our number.
And in this case, we're looking for the toggle sidebar function from the app context.
Let's go here.
And we're looking for toggle, toggle sidebar.
And then now one is equal to.
And then use AMP context.
So we grabbed the function.
And now what do we want to do is to invoke it every time we click on the button?
Correct.
So here's what we can do instead of equal to a toggle and that sidebar, let's say it, and then let's
see whether everything works.
So now I'm going to go to my application and what I'm looking for is the state value.
So let me go to my app provider more specifically show on sidebar.
And then every time we click, we're going to be turning to our car.
And if that is the case, then we have successfully set up the toggle sidebar functionality.