1
00:00:00,180 --> 00:00:00,510
All right.

2
00:00:00,550 --> 00:00:05,520
And up next, I want to work on toggle dropdown functionality more centrally.

3
00:00:05,580 --> 00:00:14,100
The idea is that every time the user clicks on the button, we either hide or show the logo dropped

4
00:00:14,100 --> 00:00:18,120
on and then we'll set up the logout functionality as well.

5
00:00:18,450 --> 00:00:18,780
So.

6
00:00:19,660 --> 00:00:21,220
Let's navigate back to our enemy.

7
00:00:21,670 --> 00:00:24,760
And essentially, it's as straightforward as it gets.

8
00:00:25,150 --> 00:00:27,550
I want to set up a state value.

9
00:00:27,910 --> 00:00:32,130
My I'm going to show logout and then the function name will be set.

10
00:00:32,350 --> 00:00:33,100
Show logout.

11
00:00:33,460 --> 00:00:37,930
I want to invoke this every time I click on this button.

12
00:00:38,170 --> 00:00:41,620
So make sure you set up the logic in the first button.

13
00:00:42,140 --> 00:00:47,350
And essentially, the reason why we want to go with our function is because we are passing the value

14
00:00:47,350 --> 00:00:47,800
in this case.

15
00:00:48,100 --> 00:00:51,940
So I don't want to invoke this pretty much when my application starts.

16
00:00:52,180 --> 00:00:55,060
I only want to invoke this when I click the button.

17
00:00:55,240 --> 00:01:01,330
And then when it comes to the actual dropdown, if you take a look at CIUSSS, you'll see that I have

18
00:01:01,330 --> 00:01:10,000
the dropdown class and show dropdown class and essentially only when the show dropdown class is present.

19
00:01:10,450 --> 00:01:18,580
Then I display the dropdown, and if it's not present, then it's an ad based on show logout value coming

20
00:01:18,580 --> 00:01:19,570
from the state.

21
00:01:19,990 --> 00:01:25,840
I'll either add the class or it's just going to be a dropdown, and if we put two and two together,

22
00:01:26,080 --> 00:01:28,480
that's how we'll toggle the dropdown.

23
00:01:28,810 --> 00:01:32,680
So let's navigate back to our nav bar and line.

24
00:01:32,680 --> 00:01:37,720
First one, he is going to be our state bar and I thought I already imported the used state.

25
00:01:37,720 --> 00:01:38,230
I guess not.

26
00:01:38,530 --> 00:01:44,020
So let me go import used state Nevada is coming from react in this case.

27
00:01:44,410 --> 00:01:53,120
Then we want to set up that state of our cost and I'm looking for show logout and the set show logout.

28
00:01:53,140 --> 00:01:57,310
That's the function name and that is equal to my used state.

29
00:01:57,550 --> 00:01:59,200
And by default, I'm going to go with false.

30
00:01:59,710 --> 00:02:06,580
And before we invoke anything in my button here, why don't we just take a look how everything looks

31
00:02:06,580 --> 00:02:09,250
like as far as the conditional rendering?

32
00:02:09,580 --> 00:02:14,740
So instead of drop down and show dropped on what I'm going to do here, where I have the class name,

33
00:02:15,010 --> 00:02:16,060
I'll go with Carlos.

34
00:02:16,300 --> 00:02:21,790
So first, I want to have my expression and I'm going to look for show logo.

35
00:02:21,850 --> 00:02:25,630
Now, if this is true, then we want to go with this functionality.

36
00:02:26,020 --> 00:02:29,020
Basically, these two classes copy and paste.

37
00:02:29,380 --> 00:02:33,850
However, if it is false, then we just go with a dropdown over here.

38
00:02:34,160 --> 00:02:35,150
Let's save it.

39
00:02:35,170 --> 00:02:41,320
And what you should see once you navigate your application is the fact that dropdown right now is hidden,

40
00:02:41,470 --> 00:02:43,000
so we don't display it again.

41
00:02:43,360 --> 00:02:48,550
If you're interested, more Mournes here says please navigate to a wrapper file.

42
00:02:48,670 --> 00:02:50,680
More specifically, nav bar wrapper.

43
00:02:51,010 --> 00:02:52,050
And now what are we want to do?

44
00:02:52,060 --> 00:02:52,390
Well?

45
00:02:53,340 --> 00:02:59,040
I want to invoke the set show logout every time I click this button.

46
00:02:59,190 --> 00:02:59,610
Correct.

47
00:03:00,090 --> 00:03:03,680
So let's go here and let's say set shall logout.

48
00:03:03,690 --> 00:03:06,360
And again, we're going to go with opposite value.

49
00:03:06,780 --> 00:03:10,020
Whatever is the current value, I want to set it to the opposite.

50
00:03:10,540 --> 00:03:11,460
Navigate back.

51
00:03:11,460 --> 00:03:12,300
And what do you know?

52
00:03:12,720 --> 00:03:20,040
Now, once I click my hide or show the dropdown, and that's how we can set up our toggle functionality

53
00:03:20,310 --> 00:03:21,810
for our dropdown.