All right, and once we know what we're going to be building, of course, let's get to work will navigate
to our people.
We're looking for folder number 13, stripe submenus.
Not once in a while you might see me type something menus, for example.
Maybe a name somewhere might be different.
I believe in the title I named Menu.
Just understand that we're talking about the same project.
In some cases I might call it menus.
In some cases I might call it sub menus.
That really is relevant here.
Let's stop in the integrated terminal, the server and what I want is never get back to the road.
And then of course, I would want to deep dive into the setup folder and my thirteen.
And of course.
Let's go with NPM install and all right away and and start and then in the set of folder, of course,
we're looking for a source.
We're going to have images folder.
These, of course, are the images we're going to use throughout of the project.
Then we've got abcess.
Of course, all our components will meet.
We have global context where we'll be setting up the context.
We have data just now.
In this case, you'll notice that, of course, the projects will also be more complicated because we
need to understand that we'll be dealing with a subject.
So there's going to be some kind of page, whether that is product, whether that is developers and
land inside of that page, we would have those siblings.
So that's why we have a page.
And then we're going to have these links now for every link.
I have the label, the icon, and I also have that URL.
Now, in my case, I'm pointing the URL to the same address, and I purposely did that because I didn't
see the point of changing the URL for every instance.
Just please understand the main idea, which essentially, of course, the URL for each sibling would
be different.
So that is my data.
Then I've got a hero.
Of course I have indexes.
That's where we have all our sources.
We have a number.
And then the submenu and sidebar, like I said, more bells and whistles in this project and in this
project.
I would want to start by setting up everything as far as the global context first.
Now, before we navigate to the context.
Yes.
Though, in the app, just Howard, just want to render all my components.
Now, what am I talking about?
I would want to render Navar sidebar hero and submenu.
So I purposely added here, react fragment just because there's going to be multiple components and
we go with no, then we also want to add a hero.
Then there's going to be a sidebar.
So let's go here with a sidebar.
You know, I will move this one up.
So no sidebar hero.
And then we're going to have a submenu.
So submenu.
And what we should see on the screen is this no sidebar hero and then the sub menu.
And of course, let's navigate to the context JS and here let's set up right away, like I said, the
global context since we have done that already before.
So we're going to go with Constantine.
I'm looking for app context now that is equal to my react, create context and we go with create context.
Then we'll create our providers, the concept and then app provider.
Now that is equal to my function.
So we'll be setting up my arrow function since I'll wrap my whole up in this provider.
I'm going to go with children and I'll right away return from this component, the app context and then
dot provider.
That's what I'm looking for here.
So that online provider.
And then, of course, in here I would want to render children so online as far as the value.
Well, let's set up some state values right away as well.
So we're going to go with const and then is Sayama open?
That's the one that we're looking for.
And that set is sidebar and then open.
Now we want to use your state and by default, let's sit at the table because we'll use these values
when we're setting up the structure.
So we might as well set it up in a way where we can see what is our model or maybe more precisely what
is our submenu and what is the sidebar.
Now I'll set up to cursors and we'll switch this around to a model again by default.
Let's set it up as true.
And then there's going to be two more state values and there's going to be four functions.
Not one function is going to be more complicated.
That is going to be for submenu because again, there's going to be more moving pieces.
But for the opening closing sidebar and closing submenu, it's going to be as straightforward as it
gets.
We're going to go with Open and then Satmar.
And of course, it is a function.
And the only thing that I would want to do is set is set is set bar open.
And I would want to sit at the table like so, so sad are true.
So now I can copy and paste and of course now I just want to close it.
So I'm going to go with close.
And then false, false, or here and again, we just need to copy and paste these values and everywhere
we have the sidebar, we're just going to switch this around to a model.
Now, like I said, eventually, yes, the opening of the model is going to have more functionality.
But for now, you can just leave it the way it is online in here where we have the value.
Beautiful.
What just set up our object and then we have a bunch of state values in model open is sidebar.
Open that open model, open sidebar, close model of course.
And then close sidebar.
OK, that should do it.
And you know what, why don't we call this one actually closed.
And I'm going to go with sidebar and our name the model to be equal to the submenu because I think it's
just going to make a bit more sense.
So my apologies go to model and everywhere where we have the model, what's her name, this to be a
submenu.
So let's do it submenu and we would want to do it over here as well.
So I have not model and one model.
I want open model, close model and it's going to be a submenu.
Let's just leave it the way it is.
Think sidebar and submenu is going to be a good start.
My apologies.
A little bit of detail, but I think we're in good shape.
And then right away I would want to set up my custom HOK.
So we're going to go with export, then Consed and then use again, I'll call this global context and
that is equal to my function and I would want to return, of course, the use and then context and I'll
pass in my app context.
And then eventually, of course I would also want to export the provider so I could either set it up
all the way in the bottom or just so we can change this around a little bit.
I'm going to go with Export and I provider Osam once we have access.
And by the way, let's say I didn't change the model.
My apologies.
That's what happens if you change your name at the very end submenu like.
So let me just double check submenu, sidebar submenu, open sidebar, close submenu, close sidebar.
That should do it.
And of course we need that index in the index Jayesh.
So we're looking here for the app provider and I'm sorry, I just said we need that index, an index.
What I meant we need that app provider that is coming from the context.
So from online or the filename is context.
Yes, we would want to wrap our whole app again.
So we're just going to go to our provider.
We wrap the app and then let me just see what I'm getting back.
So I just wanted to start out with my functionality works and I think I'm going to do that.
I don't know, in a hero.
I think that's an awesome place.
So we're going to go with airport again.
The name for the hook was Use Global Context, and that is coming from and take a look at the context.
And I would want to control my data.
So set up my variable, I'll say data and that is equal to use global context.
I will invoke it and I would want to see my data.
I think I'm going to check that out on a bigger screen.
So I'm going to go with localhost three thousand and nine where I have the hero.
Yeah, there it is.
I have my object with my four functions and my two state powers, beautiful ones.
We have all these boilerplate in place now.
One by one, we can start working on our components.