1
00:00:00,300 --> 00:00:07,500
And once we have the general numbers structure in place now, let's start adding slowly, the functionality

2
00:00:07,980 --> 00:00:11,850
on the first one on Add is toggle sidebar now.

3
00:00:12,910 --> 00:00:18,760
In our case, what we're going to focus on is to set up this state of power here.

4
00:00:19,290 --> 00:00:26,140
So talking about this one nurse in the state in the complete application you noticed somewhere.

5
00:00:26,560 --> 00:00:29,080
Cheryl Qanbar Yep, there it is.

6
00:00:29,110 --> 00:00:30,580
Notice how this one is false.

7
00:00:31,000 --> 00:00:34,420
Now if I click, this is going to be true right now.

8
00:00:35,020 --> 00:00:39,580
And don't worry about why this is actually happening the other way around.

9
00:00:39,850 --> 00:00:42,940
It all makes sense once we have these ideas.

10
00:00:43,240 --> 00:00:48,490
And keep in mind that at the moment, there's really not that much about the sidebars that we have right

11
00:00:48,490 --> 00:00:48,730
now.

12
00:00:49,060 --> 00:00:53,890
So there is a big sidebar text here, and then there's also some text on a small screen.

13
00:00:54,250 --> 00:01:01,930
So for now, what I want to focus on is to set up all the functionality as far as changing that state

14
00:01:02,260 --> 00:01:07,480
in the state, and then we'll focus on implementing that in the sidebars.

15
00:01:07,600 --> 00:01:13,550
So for me, that kind of makes a little bit more sense where we set up the logic will control the state

16
00:01:13,600 --> 00:01:14,080
value.

17
00:01:14,530 --> 00:01:20,500
And then eventually, once we implement those sidebars right from the get go, we will use that state

18
00:01:20,500 --> 00:01:24,610
value to either showcase or hide the sidebar.

19
00:01:24,760 --> 00:01:26,020
Hopefully, this makes sense.

20
00:01:26,380 --> 00:01:32,560
And essentially, our steps are going to be following where we want to go to access, address and create

21
00:01:32,560 --> 00:01:33,070
our action.

22
00:01:33,670 --> 00:01:38,190
Gosh, straight up, it's going to be toggle sidebar when import export.

23
00:01:38,200 --> 00:01:43,420
I mean, again, not to be redundant, but at this point it's kind of already self-explanatory.

24
00:01:43,690 --> 00:01:44,710
What am I talking about?

25
00:01:45,040 --> 00:01:51,490
And then in the app context, you want to create another property in the initial state.

26
00:01:51,850 --> 00:01:57,070
In this case, it's going to be show sidebar and in my case by default, is going to be set equal to

27
00:01:57,070 --> 00:01:57,490
false.

28
00:01:58,010 --> 00:02:02,350
Then we want to set up a function where we simply dispatch our action.

29
00:02:02,500 --> 00:02:06,620
So toggle sidebar and then in the reducer, what do we want to do?

30
00:02:06,640 --> 00:02:06,970
Well.

31
00:02:07,800 --> 00:02:12,810
We want to toggle Devourer, so we will return our entire state as it is.

32
00:02:13,140 --> 00:02:18,120
And then when it comes to a show sidebar and here I'm going to go with my exclamation point.

33
00:02:18,540 --> 00:02:22,530
And in other places, you might probably read a term bang.

34
00:02:22,860 --> 00:02:25,920
And essentially, I'm going to go with state and show sidebar.

35
00:02:26,160 --> 00:02:31,620
And effectively, what that means is that whatever is the current value will set it equal to an opposite.

36
00:02:31,620 --> 00:02:36,990
Since we have a Boolean in state one, let's keep on moving and not in the nevada-las.

37
00:02:37,380 --> 00:02:39,360
I want to grab my toggle sidebar.

38
00:02:39,870 --> 00:02:43,280
And this is going to be coming from used context.

39
00:02:43,560 --> 00:02:49,290
And again, I mean, at this point, it's pretty clear that we also need to add to the value correct.

40
00:02:49,530 --> 00:02:55,260
And essentially, where I have the button, the toggle one, I want to invoke toggle sidebar.

41
00:02:55,350 --> 00:02:59,190
And again, our main goal is to toggle the value in a state.

42
00:02:59,490 --> 00:03:05,430
I fully understand that we're not implementing it anywhere yet, but once we'll set up the sidebar,

43
00:03:05,640 --> 00:03:07,860
it will make all the sense in the world.

44
00:03:08,340 --> 00:03:13,620
So let's start, I guess, over here where I want to navigate through my actions.

45
00:03:14,100 --> 00:03:15,030
So let's see.

46
00:03:15,030 --> 00:03:15,300
Let's see.

47
00:03:15,300 --> 00:03:15,690
Let's see.

48
00:03:15,690 --> 00:03:16,540
I have a context.

49
00:03:16,560 --> 00:03:19,740
I have the actions, and I think I'm going to come up with new ones.

50
00:03:19,740 --> 00:03:24,840
I'll say, Oh, here comes and then toggle underscore sidebar.

51
00:03:25,110 --> 00:03:26,490
Now that is equal to what?

52
00:03:27,270 --> 00:03:27,960
Same deal.

53
00:03:28,230 --> 00:03:29,580
Just a string value.

54
00:03:29,790 --> 00:03:30,990
So I'm right or exporting.

55
00:03:31,110 --> 00:03:31,890
That is cool.

56
00:03:32,280 --> 00:03:35,520
And then I want to go to, I guess, app context.

57
00:03:35,910 --> 00:03:36,870
Let's start over there.

58
00:03:36,930 --> 00:03:38,910
We're going to go with toggle sidebar.

59
00:03:39,180 --> 00:03:40,340
Then let's keep on moving.

60
00:03:40,350 --> 00:03:47,490
Remember, we need to set up a state value that's extremely important and the value will be show and

61
00:03:47,490 --> 00:03:48,810
then sidebar like.

62
00:03:48,810 --> 00:03:52,050
So that in my case, by default, it is going to be false.

63
00:03:52,530 --> 00:03:54,720
Then we want to set up our function.

64
00:03:55,080 --> 00:03:56,490
So toggle sidebar.

65
00:03:56,760 --> 00:04:00,170
So I'm going to keep on scrolling, set up user, yada yada yada.

66
00:04:00,210 --> 00:04:01,140
And let's go.

67
00:04:01,200 --> 00:04:05,790
Here comes and we're looking for a toggle and then sidebar.

68
00:04:06,150 --> 00:04:08,520
That's the function now inside of the function.

69
00:04:08,550 --> 00:04:09,190
What do we want to do?

70
00:04:09,210 --> 00:04:13,350
Well, we simply want to invoke the dispatch, correct?

71
00:04:13,650 --> 00:04:18,720
So we're going to go here with dispatch and learn what type we want to pass and what action type.

72
00:04:19,079 --> 00:04:21,240
Well, we already have toggle sidebar.

73
00:04:21,660 --> 00:04:23,880
Let's explore this in the value.

74
00:04:25,020 --> 00:04:30,780
That's an important step, so toggle sidebar here, because otherwise we won't have access to it in

75
00:04:30,780 --> 00:04:31,530
our application.

76
00:04:31,950 --> 00:04:39,000
And now let's jump over to the producer and probably I'll copy and paste just to speed this up.

77
00:04:39,300 --> 00:04:42,510
I still want to return to state that stays the same.

78
00:04:42,820 --> 00:04:43,530
And you know what?

79
00:04:43,530 --> 00:04:45,630
I forgot to grab my toggle sidebar.

80
00:04:46,050 --> 00:04:47,130
So let me move up.

81
00:04:47,850 --> 00:04:52,680
Grab it from my actions, and then I want to go toggle sidebar.

82
00:04:52,920 --> 00:04:59,160
And like I said, I am show side bar value, and I just want to set it equal to the opposite.

83
00:04:59,490 --> 00:05:04,740
So we're going to go with state and then whatever is the opposite of the current value.

84
00:05:04,770 --> 00:05:08,190
So state dots show sidebar and exclamation point.

85
00:05:08,490 --> 00:05:10,620
Then let's hop over to our number.

86
00:05:11,070 --> 00:05:16,950
And in this case, we're looking for the toggle sidebar function from the app context.

87
00:05:17,260 --> 00:05:17,820
Let's go here.

88
00:05:18,750 --> 00:05:22,680
And we're looking for toggle, toggle sidebar.

89
00:05:22,970 --> 00:05:24,620
And then now one is equal to.

90
00:05:24,930 --> 00:05:26,520
And then use AMP context.

91
00:05:26,850 --> 00:05:28,500
So we grabbed the function.

92
00:05:29,010 --> 00:05:35,670
And now what do we want to do is to invoke it every time we click on the button?

93
00:05:35,730 --> 00:05:36,150
Correct.

94
00:05:36,480 --> 00:05:43,530
So here's what we can do instead of equal to a toggle and that sidebar, let's say it, and then let's

95
00:05:43,530 --> 00:05:44,700
see whether everything works.

96
00:05:45,090 --> 00:05:50,700
So now I'm going to go to my application and what I'm looking for is the state value.

97
00:05:51,150 --> 00:05:56,310
So let me go to my app provider more specifically show on sidebar.

98
00:05:56,550 --> 00:06:00,180
And then every time we click, we're going to be turning to our car.

99
00:06:00,720 --> 00:06:07,380
And if that is the case, then we have successfully set up the toggle sidebar functionality.