1
00:00:00,300 --> 00:00:02,370
All right, so how do we set up the functionality?

2
00:00:02,850 --> 00:00:06,090
Well, first, let's take a look at our state.

3
00:00:07,060 --> 00:00:11,890
And let's jog our memory that we do have the power there, correct?

4
00:00:12,250 --> 00:00:14,920
We have one for sure sidebar.

5
00:00:15,520 --> 00:00:22,990
So now we just need to import that in our small sidebar and then we need to conditionally add or remove

6
00:00:22,990 --> 00:00:26,680
the class depending on the show sidebar value.

7
00:00:27,010 --> 00:00:28,510
And also for this guy.

8
00:00:28,810 --> 00:00:29,770
40 close button.

9
00:00:30,130 --> 00:00:32,830
Well, let's just invoke the toggle sidebar.

10
00:00:33,160 --> 00:00:38,020
I know it kind of is a little bit probably confusing where you go, OK, but we're not toggling.

11
00:00:38,020 --> 00:00:39,130
I mean, this is close button.

12
00:00:39,610 --> 00:00:45,580
And yeah, but remember that you'll only be able to click on a close button if this is true to begin

13
00:00:45,580 --> 00:00:45,820
with.

14
00:00:46,450 --> 00:00:51,490
So I know that technically, yes, we can set up another function where we just close the sidebar,

15
00:00:51,490 --> 00:00:56,890
but I thought that we can save a little bit of time and then use the toggle functionality instead.

16
00:00:57,130 --> 00:01:01,600
Hopefully, what I'm saying makes sense and then how it's going to look like.

17
00:01:01,600 --> 00:01:06,820
Well, in small sidebar, we have a show side bar and toggle sidebar.

18
00:01:07,510 --> 00:01:09,280
So those are the two values that I want.

19
00:01:09,640 --> 00:01:10,760
I want the property.

20
00:01:11,260 --> 00:01:17,680
So that is the Boolean, and I also want the function, the one that always sets it to the opposite

21
00:01:17,680 --> 00:01:18,010
value.

22
00:01:18,520 --> 00:01:26,500
And then as far as the census, well, instead of both classes, I'll say, and this is true, right?

23
00:01:26,530 --> 00:01:30,700
Get me these two singers, if not one, it's only going to be a container.

24
00:01:31,210 --> 00:01:33,970
And what that means is, well, then we won't display the sidebar.

25
00:01:34,120 --> 00:01:39,820
And again, please reference these gestures if you're interested of how I set that up in this case.

26
00:01:40,180 --> 00:01:42,850
Now, as far as the functionality, I just look for my button.

27
00:01:43,150 --> 00:01:43,900
I'm learning here.

28
00:01:43,900 --> 00:01:45,940
I want to add the toggle sidebar.

29
00:01:46,090 --> 00:01:51,160
So every time I click on a button, what I'm going to do well, I'll toggle devours, correct?

30
00:01:51,550 --> 00:01:53,050
So let's navigate back.

31
00:01:53,500 --> 00:01:57,580
We're looking for the show sidebar as well as toggle one.

32
00:01:58,480 --> 00:02:00,970
Let's set up our curlies or say show.

33
00:02:01,950 --> 00:02:09,720
Sidebar comma and then toggle sidebar sidebar and then that is equal to use AMP context, let's invoke

34
00:02:09,720 --> 00:02:16,470
that and let's start over here, and I'm going to cut these ones out because I want to save myself a

35
00:02:16,470 --> 00:02:18,060
little bit of time and actually reduce them.

36
00:02:18,450 --> 00:02:24,570
And here, let's set up our condition where I'll say if they show side bar value is true, what do I

37
00:02:24,570 --> 00:02:24,960
want to do?

38
00:02:25,260 --> 00:02:27,930
Well, then I want to display these two, correct.

39
00:02:28,320 --> 00:02:30,180
But I want to go with this value.

40
00:02:30,330 --> 00:02:33,300
Now, if it is false, well, then I can go with this one.

41
00:02:33,690 --> 00:02:35,310
Let's see if we just set it up.

42
00:02:35,580 --> 00:02:40,000
So if you navigate back right now to your project, you shouldn't see the side bar.

43
00:02:40,020 --> 00:02:40,350
Why?

44
00:02:40,680 --> 00:02:42,600
Well, because by default, it is false.

45
00:02:42,720 --> 00:02:45,540
But now we can actually toggle in the state.

46
00:02:45,870 --> 00:02:46,920
So let's go back here.

47
00:02:47,670 --> 00:02:48,660
Notice this is false.

48
00:02:49,110 --> 00:02:52,950
But then every time you click, you'll be able to see the sidebar.

49
00:02:53,460 --> 00:02:59,370
And once we have that one in place now, we simply want to take our function online instead of this

50
00:02:59,370 --> 00:03:02,190
console.log, simply passing the reference again.

51
00:03:02,460 --> 00:03:08,100
We're not passing anything in the function, so we don't need to set up the arrow function or any of

52
00:03:08,100 --> 00:03:08,540
that stuff.

53
00:03:08,550 --> 00:03:13,950
We simply passed in the reference and now everything is going to work where once we'll click on this

54
00:03:13,950 --> 00:03:14,340
button.

55
00:03:14,370 --> 00:03:19,800
Remember, in the number, we already set up the functionality where we were controlling this value

56
00:03:20,160 --> 00:03:21,570
using this toggle button, correct?

57
00:03:21,870 --> 00:03:24,450
So once I click, I can see the sidebar.

58
00:03:24,720 --> 00:03:27,960
And then once I click on this close one, I can hide it.

59
00:03:28,500 --> 00:03:34,530
And with this in place now, we can toggle our small sidebar in our application.