Nicely done.
And once we understand how we can share our context throughout our app, I think it's time to tackle
the big beast where of course, we would want to set up the functionality in my app provider and share
her on my app more than just a simple hello.
Now, since it's not our first rodeo, I will set up the whole functionality in this video and also
I'll probably distribute it around our app by the end of this video.
We should have the working up because like I just said, it's not our first time.
So I think we should be fairly comfortable setting up the stage values, setting up the functions and
just access them in home in the sidebar as well as model.
Let's start with two stage values.
I'll have one for model and one for the sidebar.
Where it go with costs, and that is sidebar and then open now I'll go with set is sidebar open and
not by default will be false.
So we go with you state and force.
You can right away copy and paste.
And instead of the sidebar, of course, this is going to be model.
So am I too cautious?
And I'll say set is model open.
So I have both of these state values and now I want to come up with four functions to that open and
close the sidebar and then the same for the model.
So we go with Consed and then I'll call this open sidebar and it's not going to be looking for any parameters
and the only thing it will do is set eres sidebar so that a sidebar open and or set it Ecopetrol.
And you can probably already guess that if we have a function that closes it, the only thing we're
doing is calling it differently.
So in this case, closed sidebar and then of course we pass in the files.
So now this is not Thonglim functionality like we did in previous projects.
So in this case, since I have two separate buttons, one inside the sidebar and then one inside of
the home.
Now, of course, I need to have two different functionalities and I'll copy paste and we just need
to change it around where it's going to be open and closed model.
So again, to Cursus and we're looking for a model here.
And then as far as the function, same spiel part, it is going to be a model like this.
And now what I would want in the value instead of hello, remember, we could pass whatever we want.
And in my case, I would want to pass in the object and in that object I'll pass in my two stage values,
because depending on those values, of course, I will toggle my model on the sidebar.
So is sidebar open as well?
Those are I'm sorry, not the function is sidebar open and then I would want to pass in these four functions.
So open model, open sidebar, close the model and also close the sidebar.
And I guess we can start with home because in the home we would want to grab those two functions to
open the model sidebar since I have two buttons that do exactly that.
So now of course, I'm not looking for data, I'm looking for the object and I would want to write a
way to structure it.
So I'm going to say open sidebar.
I'm not open model model Muchow.
So those are two functions that I'm looking for.
I'm not going to log anything.
All right.
Away had here we're half on click and I will be equal to the sidebar since that is the button that opens
it.
And then of course, the same thing will be for the button.
So on click on that will be equal to a open model.
Now, of course, we won't be able to open them because we also need to pass from the context.
Remember those tetralogy sidebar open and is more open to a model on the sidebar.
So I guess let's start with a sidebar and yes, I'll do a bit of copy pasting, just spruce up.
So in this case, I'm just looking for the global context, of course.
So I'm going to go to my model here and then I'll remove that context.
I don't need it like so I on the same thing like I have in home, of course I would want to access it,
but of course I'm going to be looking for different values.
So copy and paste and I'm not looking for open.
Of course.
Now I would want to grab those two state values and or sorry, one state value.
So is Motal open open Weichsel.
And then also I would want to close the model.
So close model since this is the button that I have.
And I remember I said that where we have the class names.
Yeah, we will set up template string because we will have our ternary operator.
So instead of just one single class, the model overlay, I will set up my interpellation and I'm going
to look for is model open.
If that is the case, then I'll have two classes and then if it is not open, then there's just going
to be one class of model overlay.
So cut it out.
I'll copy and paste and then I'll do the same thing over here where I have two classes.
One will be model overlay and then the second one will be show model copy and paste and then show model.
So what you should notice right now, once you click on a show model and of course we toggle that value
in our global context and of course we can see the model then once I click on.
I should be able to close them all, but of course, I didn't set up the functionality.
So let's go back.
I'm going to go on click.
And once we click on the button, of course, I would want to invoke close model.
And you're not Frank can just go to a bigger browser window.
And then there is I have my provider notice.
Once you click the state value changes, I can see my model and then beautifully I can close it as well.
And if we put two and two together, of course we can do the same thing in a sidebar.
So again, just so we can speed this up a little bit, I'm going to grab my import here.
I'm going to grab my functions.
And I just need to change this around where it's not going to be model.
It is going to be a sidebar.
So is sidebar open?
And we do the same thing.
We set up our interpolation here and we say, is that bar open?
If that is the case, then please do one thing.
Essentially add two classes.
And if not, then just add one seven here.
Let's set up our class of sidebar and learn.
If the sidebar is open, then I also want to add a class.
Let me just double check the name for sure.
And the name was Show Side, Bar Show and sidebar.
And of course we can write or invoke close the sidebar as well.
So we go with Unclick and then we're looking for closed sidebar over here.
Now I can of course save it.
Nonetheless, once I click, I show the sidebar and then I can hide it.
Now, the way I made the sidebar with success is for small screen is going to be spanning all across
the screen.
And then once we get to the bigger screen, then of course it has some kind of with that is just a side
note.
Hopefully everything made sense.
Hopefully you are able to follow that and create that global context so that we can share all around
our application.
And hopefully everyone enjoyed the project.
And I hope to your next one.