1
00:00:00,330 --> 00:00:05,520
All right, and once we know what we're going to be building, of course, let's get to work will navigate

2
00:00:05,520 --> 00:00:06,390
to our people.

3
00:00:06,390 --> 00:00:10,770
We're looking for folder number 13, stripe submenus.

4
00:00:11,040 --> 00:00:14,940
Not once in a while you might see me type something menus, for example.

5
00:00:14,940 --> 00:00:17,400
Maybe a name somewhere might be different.

6
00:00:17,700 --> 00:00:20,220
I believe in the title I named Menu.

7
00:00:20,220 --> 00:00:22,710
Just understand that we're talking about the same project.

8
00:00:23,040 --> 00:00:24,960
In some cases I might call it menus.

9
00:00:24,960 --> 00:00:27,990
In some cases I might call it sub menus.

10
00:00:27,990 --> 00:00:30,930
That really is relevant here.

11
00:00:30,930 --> 00:00:37,680
Let's stop in the integrated terminal, the server and what I want is never get back to the road.

12
00:00:37,680 --> 00:00:44,130
And then of course, I would want to deep dive into the setup folder and my thirteen.

13
00:00:44,640 --> 00:00:45,600
And of course.

14
00:00:45,630 --> 00:00:53,190
Let's go with NPM install and all right away and and start and then in the set of folder, of course,

15
00:00:53,190 --> 00:00:54,540
we're looking for a source.

16
00:00:55,020 --> 00:00:56,430
We're going to have images folder.

17
00:00:56,760 --> 00:01:01,200
These, of course, are the images we're going to use throughout of the project.

18
00:01:01,590 --> 00:01:03,390
Then we've got abcess.

19
00:01:03,390 --> 00:01:05,550
Of course, all our components will meet.

20
00:01:05,850 --> 00:01:09,120
We have global context where we'll be setting up the context.

21
00:01:09,120 --> 00:01:11,130
We have data just now.

22
00:01:11,130 --> 00:01:17,520
In this case, you'll notice that, of course, the projects will also be more complicated because we

23
00:01:17,520 --> 00:01:20,550
need to understand that we'll be dealing with a subject.

24
00:01:20,940 --> 00:01:26,020
So there's going to be some kind of page, whether that is product, whether that is developers and

25
00:01:26,040 --> 00:01:29,190
land inside of that page, we would have those siblings.

26
00:01:29,520 --> 00:01:31,140
So that's why we have a page.

27
00:01:31,380 --> 00:01:34,560
And then we're going to have these links now for every link.

28
00:01:34,770 --> 00:01:39,300
I have the label, the icon, and I also have that URL.

29
00:01:39,600 --> 00:01:46,230
Now, in my case, I'm pointing the URL to the same address, and I purposely did that because I didn't

30
00:01:46,230 --> 00:01:50,190
see the point of changing the URL for every instance.

31
00:01:50,520 --> 00:01:57,600
Just please understand the main idea, which essentially, of course, the URL for each sibling would

32
00:01:57,600 --> 00:01:58,260
be different.

33
00:01:58,500 --> 00:01:59,550
So that is my data.

34
00:02:00,000 --> 00:02:01,470
Then I've got a hero.

35
00:02:02,340 --> 00:02:03,350
Of course I have indexes.

36
00:02:03,360 --> 00:02:06,030
That's where we have all our sources.

37
00:02:06,150 --> 00:02:07,440
We have a number.

38
00:02:07,680 --> 00:02:16,140
And then the submenu and sidebar, like I said, more bells and whistles in this project and in this

39
00:02:16,140 --> 00:02:16,560
project.

40
00:02:16,560 --> 00:02:22,290
I would want to start by setting up everything as far as the global context first.

41
00:02:22,620 --> 00:02:24,680
Now, before we navigate to the context.

42
00:02:24,690 --> 00:02:24,900
Yes.

43
00:02:24,930 --> 00:02:30,450
Though, in the app, just Howard, just want to render all my components.

44
00:02:30,480 --> 00:02:31,650
Now, what am I talking about?

45
00:02:31,860 --> 00:02:35,760
I would want to render Navar sidebar hero and submenu.

46
00:02:35,940 --> 00:02:40,890
So I purposely added here, react fragment just because there's going to be multiple components and

47
00:02:40,890 --> 00:02:45,270
we go with no, then we also want to add a hero.

48
00:02:45,600 --> 00:02:48,180
Then there's going to be a sidebar.

49
00:02:48,600 --> 00:02:51,090
So let's go here with a sidebar.

50
00:02:51,360 --> 00:02:53,160
You know, I will move this one up.

51
00:02:53,580 --> 00:02:55,770
So no sidebar hero.

52
00:02:55,980 --> 00:02:58,710
And then we're going to have a submenu.

53
00:02:59,040 --> 00:03:00,640
So submenu.

54
00:03:00,990 --> 00:03:07,800
And what we should see on the screen is this no sidebar hero and then the sub menu.

55
00:03:08,130 --> 00:03:15,030
And of course, let's navigate to the context JS and here let's set up right away, like I said, the

56
00:03:15,030 --> 00:03:18,210
global context since we have done that already before.

57
00:03:18,510 --> 00:03:20,580
So we're going to go with Constantine.

58
00:03:20,580 --> 00:03:29,640
I'm looking for app context now that is equal to my react, create context and we go with create context.

59
00:03:30,000 --> 00:03:35,550
Then we'll create our providers, the concept and then app provider.

60
00:03:35,850 --> 00:03:38,640
Now that is equal to my function.

61
00:03:39,630 --> 00:03:44,130
So we'll be setting up my arrow function since I'll wrap my whole up in this provider.

62
00:03:44,160 --> 00:03:51,180
I'm going to go with children and I'll right away return from this component, the app context and then

63
00:03:51,510 --> 00:03:53,010
dot provider.

64
00:03:53,350 --> 00:03:54,870
That's what I'm looking for here.

65
00:03:55,110 --> 00:03:57,080
So that online provider.

66
00:03:57,360 --> 00:04:03,660
And then, of course, in here I would want to render children so online as far as the value.

67
00:04:03,690 --> 00:04:06,950
Well, let's set up some state values right away as well.

68
00:04:07,200 --> 00:04:11,050
So we're going to go with const and then is Sayama open?

69
00:04:11,070 --> 00:04:12,470
That's the one that we're looking for.

70
00:04:12,480 --> 00:04:17,110
And that set is sidebar and then open.

71
00:04:17,460 --> 00:04:24,360
Now we want to use your state and by default, let's sit at the table because we'll use these values

72
00:04:24,360 --> 00:04:25,650
when we're setting up the structure.

73
00:04:25,890 --> 00:04:32,640
So we might as well set it up in a way where we can see what is our model or maybe more precisely what

74
00:04:32,640 --> 00:04:35,620
is our submenu and what is the sidebar.

75
00:04:35,940 --> 00:04:42,100
Now I'll set up to cursors and we'll switch this around to a model again by default.

76
00:04:42,120 --> 00:04:43,610
Let's set it up as true.

77
00:04:44,070 --> 00:04:49,260
And then there's going to be two more state values and there's going to be four functions.

78
00:04:49,710 --> 00:04:52,380
Not one function is going to be more complicated.

79
00:04:52,380 --> 00:04:57,210
That is going to be for submenu because again, there's going to be more moving pieces.

80
00:04:57,570 --> 00:05:03,330
But for the opening closing sidebar and closing submenu, it's going to be as straightforward as it

81
00:05:03,330 --> 00:05:03,710
gets.

82
00:05:03,720 --> 00:05:07,470
We're going to go with Open and then Satmar.

83
00:05:07,950 --> 00:05:10,140
And of course, it is a function.

84
00:05:10,380 --> 00:05:16,200
And the only thing that I would want to do is set is set is set bar open.

85
00:05:16,470 --> 00:05:20,110
And I would want to sit at the table like so, so sad are true.

86
00:05:20,460 --> 00:05:24,080
So now I can copy and paste and of course now I just want to close it.

87
00:05:24,390 --> 00:05:25,800
So I'm going to go with close.

88
00:05:26,750 --> 00:05:34,550
And then false, false, or here and again, we just need to copy and paste these values and everywhere

89
00:05:34,550 --> 00:05:40,070
we have the sidebar, we're just going to switch this around to a model.

90
00:05:40,430 --> 00:05:46,820
Now, like I said, eventually, yes, the opening of the model is going to have more functionality.

91
00:05:46,830 --> 00:05:51,640
But for now, you can just leave it the way it is online in here where we have the value.

92
00:05:51,690 --> 00:05:52,270
Beautiful.

93
00:05:52,550 --> 00:05:59,330
What just set up our object and then we have a bunch of state values in model open is sidebar.

94
00:05:59,330 --> 00:06:05,630
Open that open model, open sidebar, close model of course.

95
00:06:05,630 --> 00:06:08,020
And then close sidebar.

96
00:06:08,570 --> 00:06:11,360
OK, that should do it.

97
00:06:11,810 --> 00:06:16,790
And you know what, why don't we call this one actually closed.

98
00:06:17,330 --> 00:06:25,310
And I'm going to go with sidebar and our name the model to be equal to the submenu because I think it's

99
00:06:25,370 --> 00:06:27,260
just going to make a bit more sense.

100
00:06:27,710 --> 00:06:35,390
So my apologies go to model and everywhere where we have the model, what's her name, this to be a

101
00:06:35,390 --> 00:06:36,020
submenu.

102
00:06:36,260 --> 00:06:41,270
So let's do it submenu and we would want to do it over here as well.

103
00:06:41,270 --> 00:06:44,810
So I have not model and one model.

104
00:06:45,020 --> 00:06:51,110
I want open model, close model and it's going to be a submenu.

105
00:06:51,680 --> 00:06:53,120
Let's just leave it the way it is.

106
00:06:53,570 --> 00:06:57,390
Think sidebar and submenu is going to be a good start.

107
00:06:57,410 --> 00:06:58,260
My apologies.

108
00:06:58,430 --> 00:07:01,420
A little bit of detail, but I think we're in good shape.

109
00:07:01,730 --> 00:07:05,930
And then right away I would want to set up my custom HOK.

110
00:07:06,980 --> 00:07:13,910
So we're going to go with export, then Consed and then use again, I'll call this global context and

111
00:07:13,910 --> 00:07:20,840
that is equal to my function and I would want to return, of course, the use and then context and I'll

112
00:07:20,840 --> 00:07:22,820
pass in my app context.

113
00:07:23,090 --> 00:07:31,850
And then eventually, of course I would also want to export the provider so I could either set it up

114
00:07:31,850 --> 00:07:35,840
all the way in the bottom or just so we can change this around a little bit.

115
00:07:36,180 --> 00:07:41,260
I'm going to go with Export and I provider Osam once we have access.

116
00:07:41,270 --> 00:07:44,850
And by the way, let's say I didn't change the model.

117
00:07:45,440 --> 00:07:46,400
My apologies.

118
00:07:46,430 --> 00:07:51,820
That's what happens if you change your name at the very end submenu like.

119
00:07:51,840 --> 00:07:58,810
So let me just double check submenu, sidebar submenu, open sidebar, close submenu, close sidebar.

120
00:07:59,030 --> 00:08:00,500
That should do it.

121
00:08:00,830 --> 00:08:04,520
And of course we need that index in the index Jayesh.

122
00:08:04,850 --> 00:08:10,940
So we're looking here for the app provider and I'm sorry, I just said we need that index, an index.

123
00:08:11,270 --> 00:08:16,000
What I meant we need that app provider that is coming from the context.

124
00:08:16,010 --> 00:08:20,020
So from online or the filename is context.

125
00:08:20,030 --> 00:08:23,150
Yes, we would want to wrap our whole app again.

126
00:08:23,480 --> 00:08:25,190
So we're just going to go to our provider.

127
00:08:25,610 --> 00:08:29,630
We wrap the app and then let me just see what I'm getting back.

128
00:08:29,960 --> 00:08:36,530
So I just wanted to start out with my functionality works and I think I'm going to do that.

129
00:08:36,530 --> 00:08:37,730
I don't know, in a hero.

130
00:08:38,290 --> 00:08:40,090
I think that's an awesome place.

131
00:08:40,490 --> 00:08:42,620
So we're going to go with airport again.

132
00:08:42,630 --> 00:08:49,970
The name for the hook was Use Global Context, and that is coming from and take a look at the context.

133
00:08:50,390 --> 00:08:52,610
And I would want to control my data.

134
00:08:53,060 --> 00:08:57,290
So set up my variable, I'll say data and that is equal to use global context.

135
00:08:57,290 --> 00:09:01,010
I will invoke it and I would want to see my data.

136
00:09:01,490 --> 00:09:04,760
I think I'm going to check that out on a bigger screen.

137
00:09:04,850 --> 00:09:09,620
So I'm going to go with localhost three thousand and nine where I have the hero.

138
00:09:09,620 --> 00:09:10,370
Yeah, there it is.

139
00:09:10,370 --> 00:09:18,050
I have my object with my four functions and my two state powers, beautiful ones.

140
00:09:18,050 --> 00:09:21,530
We have all these boilerplate in place now.

141
00:09:21,530 --> 00:09:25,250
One by one, we can start working on our components.