1
00:00:00,200 --> 00:00:00,680
All right.

2
00:00:00,680 --> 00:00:08,180
And once we have the small sidebar, big sidebar, as well as the nav bar, now let's complete and work

3
00:00:08,180 --> 00:00:13,000
on the toggle one as well as the logout component.

4
00:00:13,010 --> 00:00:18,260
So if we take a look at the complete project, you'll notice over here this icon.

5
00:00:18,560 --> 00:00:25,790
So in here we'll control the theme and in here we'll have option to log out and also will display.

6
00:00:26,560 --> 00:00:34,930
A small avatar of the user, essentially a picture if it's present and there's going to be option to

7
00:00:34,930 --> 00:00:35,760
log out.

8
00:00:35,770 --> 00:00:38,740
And I guess let's start working on that log out container.

9
00:00:39,100 --> 00:00:45,460
And before you ask, yes, technically it's only a button with a drop down menu.

10
00:00:45,550 --> 00:00:47,980
And here we have the log out option.

11
00:00:48,590 --> 00:00:54,650
But I will set it up as a separate component because there's going to be quite a bit of functionality.

12
00:00:54,650 --> 00:01:00,170
And this is one of those tricky things where you notice that such a small component actually has quite

13
00:01:00,170 --> 00:01:01,960
a bit of functionality.

14
00:01:01,970 --> 00:01:08,570
So we want to start by navigating to components and we want to create a logout container.

15
00:01:08,600 --> 00:01:10,370
That's how I'm going to call it.

16
00:01:10,400 --> 00:01:12,410
Let's create the component.

17
00:01:13,350 --> 00:01:17,310
And after that, we're looking for few imports.

18
00:01:17,340 --> 00:01:24,330
Now, since auto imports have been letting me down lately, and since I don't want to waste too much

19
00:01:24,330 --> 00:01:27,150
time on the imports, I'm going to go to read me.

20
00:01:27,240 --> 00:01:28,560
Let me find.

21
00:01:29,290 --> 00:01:31,930
Where is our logout container?

22
00:01:31,930 --> 00:01:35,440
And I'll just copy and paste in order to speed this up.

23
00:01:35,440 --> 00:01:39,370
And then I'm going to cover what are we importing over here?

24
00:01:40,140 --> 00:01:41,600
So let me copy and paste.

25
00:01:41,610 --> 00:01:47,130
So these are two icons we're going to use, and you'll see in a second why then.

26
00:01:47,130 --> 00:01:48,410
This is a wrapper.

27
00:01:48,420 --> 00:01:48,900
Essentially.

28
00:01:48,900 --> 00:01:50,880
This is where we'll get all of our styles.

29
00:01:51,060 --> 00:01:58,200
We'll have use state because in order to show or hide this logout, we'll use the local state.

30
00:01:58,200 --> 00:02:00,180
And that is actually my preference.

31
00:02:00,180 --> 00:02:03,300
If I can, I try to set up the state locally.

32
00:02:03,300 --> 00:02:05,010
Now, of course there's going to be.

33
00:02:05,670 --> 00:02:08,520
Some instances where it's impossible to do.

34
00:02:08,620 --> 00:02:16,620
You'll need a global state value, but whenever you can, at least it's my preference to set up the

35
00:02:16,620 --> 00:02:25,290
local state value because that way it's easier to pretty much maintain the application because you right

36
00:02:25,290 --> 00:02:28,680
away see all of the logic in that one component.

37
00:02:28,680 --> 00:02:32,880
And also we will need a logout user functionality.

38
00:02:32,910 --> 00:02:38,880
Now at the moment, of course it's only logging stuff, but eventually, yes, we will invoke it and

39
00:02:38,880 --> 00:02:44,840
there's going to be some more logic in there and therefore we have this use dashboard context as well.

40
00:02:44,850 --> 00:02:50,030
And I guess let's start by setting up this local state value.

41
00:02:50,040 --> 00:02:54,690
So now I'm talking about that logout button, whether I want to showcase it or not.

42
00:02:54,690 --> 00:02:58,050
So there's going to be show logout and set.

43
00:02:58,640 --> 00:02:59,450
Show.

44
00:03:00,160 --> 00:03:07,180
Log out and we'll set it equal to use state and we'll set it as a default one to false.

45
00:03:07,390 --> 00:03:10,180
And now let's also grab two values.

46
00:03:11,090 --> 00:03:13,380
From our dashboard context.

47
00:03:13,400 --> 00:03:16,880
First one is going to be user, which again, we're hard coding right now.

48
00:03:16,910 --> 00:03:18,260
That's totally fine.

49
00:03:18,560 --> 00:03:21,650
And also we want to grab the log out user.

50
00:03:21,910 --> 00:03:26,120
And we'll set it equal to the user dashboard context and we're good to go.

51
00:03:26,150 --> 00:03:29,900
Now, as far as the return, we're going to go here with wrapper.

52
00:03:31,170 --> 00:03:33,240
So that's our component.

53
00:03:33,940 --> 00:03:35,200
And let's start.

54
00:03:36,100 --> 00:03:38,320
By setting up a button over here.

55
00:03:39,060 --> 00:03:42,100
So type will be equal to a button.

56
00:03:42,120 --> 00:03:50,010
Then as far as the class names, we're going to go here with BTN and log out hyphen BTN.

57
00:03:50,250 --> 00:03:52,410
Now on click.

58
00:03:53,750 --> 00:03:59,180
It's going to be equal to an arrow function and essentially the same deal.

59
00:04:00,260 --> 00:04:07,790
Since we want to toggle the logout button, we will use set show logout and we will set it equal to

60
00:04:07,790 --> 00:04:09,140
the opposite value.

61
00:04:09,200 --> 00:04:11,690
So whatever is the current value.

62
00:04:12,520 --> 00:04:14,220
Get the opposite one.

63
00:04:14,230 --> 00:04:16,329
So we'll go with Show Logout.

64
00:04:16,360 --> 00:04:18,310
Now inside of this button.

65
00:04:18,850 --> 00:04:20,290
Here's what we want to do.

66
00:04:20,380 --> 00:04:26,500
We want to display the user name and we want to display the icon.

67
00:04:26,530 --> 00:04:32,270
Now, eventually there's going to be an image, but we won't worry about it right now.

68
00:04:32,330 --> 00:04:32,830
And you know what?

69
00:04:32,830 --> 00:04:36,780
I think it's going to be easier if we can see what we're working on.

70
00:04:36,790 --> 00:04:42,730
So now let me navigate to the nav bar and we want to grab the component, of course.

71
00:04:42,730 --> 00:04:46,680
So in this case, we're looking for the logout container.

72
00:04:46,690 --> 00:04:51,160
So let's go here with import then logout container.

73
00:04:51,160 --> 00:04:56,250
And remember in the BTN container we have the text right now.

74
00:04:56,260 --> 00:04:58,980
So now let's set up these components.

75
00:04:58,990 --> 00:05:01,900
Now at the moment we only have one, so let's place it here.

76
00:05:01,900 --> 00:05:06,040
But yes, the toggle container is also going to be here.

77
00:05:06,310 --> 00:05:09,400
Let me save let me refresh.

78
00:05:09,610 --> 00:05:11,140
And of course I didn't save it here.

79
00:05:11,140 --> 00:05:12,250
So that's my bad.

80
00:05:13,000 --> 00:05:14,800
Let me refresh one more time.

81
00:05:15,070 --> 00:05:17,020
And yep, this is what we should see.

82
00:05:17,020 --> 00:05:21,610
So we have nothing in the button and therefore we just see the button.

83
00:05:21,610 --> 00:05:22,420
But.

84
00:05:23,460 --> 00:05:24,890
We'll work on this right now.

85
00:05:24,900 --> 00:05:25,980
So like I said.

86
00:05:26,760 --> 00:05:28,740
Effectively, there's going to be three values.

87
00:05:28,740 --> 00:05:30,390
There's going to be a picture.

88
00:05:30,390 --> 00:05:31,320
If it's present.

89
00:05:31,320 --> 00:05:33,690
If not, then we'll just display the avatar.

90
00:05:33,720 --> 00:05:36,680
Then we'll have the name of the user.

91
00:05:36,690 --> 00:05:38,490
In this case, it's going to be hard coded.

92
00:05:38,490 --> 00:05:41,790
And then we'll have also a little icon that showcases that.

93
00:05:41,790 --> 00:05:43,250
We can click on the icon.

94
00:05:43,260 --> 00:05:45,750
So let's start with the.

95
00:05:46,940 --> 00:05:47,680
Avatar.

96
00:05:47,690 --> 00:05:50,080
So for now, we don't have the picture for sure.

97
00:05:50,090 --> 00:05:52,100
And therefore I'll use this component.

98
00:05:52,460 --> 00:05:53,650
Effectively the icon.

99
00:05:53,660 --> 00:05:55,640
Then let me grab the user.

100
00:05:55,640 --> 00:05:58,160
If it's present, then let me get the name.

101
00:05:58,160 --> 00:06:04,460
So I'm using optional chaining and then we'll also add this second icon.

102
00:06:04,460 --> 00:06:06,820
And this is going to be our look.

103
00:06:07,250 --> 00:06:10,970
So this is our log out container.

104
00:06:10,970 --> 00:06:18,520
And right next to this button we'll have a div and inside of that div will invoke the log out one.

105
00:06:18,530 --> 00:06:20,360
So let's go here with div.

106
00:06:20,390 --> 00:06:24,860
The class names are going to be dropdown and show dropdown.

107
00:06:24,860 --> 00:06:26,450
So again, same deal.

108
00:06:26,480 --> 00:06:31,100
We'll be toggling based on this show log out value.

109
00:06:31,130 --> 00:06:39,680
So let's set up I guess here a div class name and let's right away set up the logic show log out.

110
00:06:40,500 --> 00:06:42,510
And we'll use the ternary operator.

111
00:06:42,510 --> 00:06:43,920
So drop down.

112
00:06:44,620 --> 00:06:46,510
And show dropdown.

113
00:06:48,590 --> 00:06:52,070
And if it's false, then we'll just go with drop down.

114
00:06:54,140 --> 00:06:56,870
So effectively we don't display it if it's false.

115
00:06:56,900 --> 00:07:00,110
Same logic like in a small sidebar.

116
00:07:00,140 --> 00:07:01,450
Big one and all that.

117
00:07:01,460 --> 00:07:07,670
And then inside of this div we're going to go with button type is going to be equal to a button.

118
00:07:07,790 --> 00:07:10,910
Then class name will be drop.

119
00:07:11,790 --> 00:07:13,530
Down hyphen btn.

120
00:07:14,490 --> 00:07:18,450
And onClick we will invoke logout user.

121
00:07:18,720 --> 00:07:25,590
Of course there is no functionality apart from console log for now, but eventually we'll change that

122
00:07:25,590 --> 00:07:27,870
and therefore I'm going to go here with on.

123
00:07:28,920 --> 00:07:33,390
Click and let's set it to Logout User.

124
00:07:33,510 --> 00:07:34,590
Let's save it.

125
00:07:34,590 --> 00:07:35,850
And now notice.

126
00:07:36,530 --> 00:07:40,490
Since this is false, of course we don't display it, but the moment I click.

127
00:07:41,630 --> 00:07:48,920
I display my logout button and essentially in the console we'll see the logout user.

128
00:07:49,070 --> 00:07:52,850
So this is going to be our logout container.