1
00:00:00,180 --> 00:00:02,009
So let's get cracking.

2
00:00:02,400 --> 00:00:06,689
I'll save it over here and then we want to get back to the number.

3
00:00:06,990 --> 00:00:12,510
So the moment I only have the wrapper and I only have the home, I can show of my change this around

4
00:00:12,900 --> 00:00:17,130
where I'm going to go with F.A. and then online and left.

5
00:00:17,610 --> 00:00:24,180
That's the first one that we want to have a fair user circle affair user and then I'm looking for a

6
00:00:24,180 --> 00:00:24,570
circle.

7
00:00:24,870 --> 00:00:26,970
And then lastly, we want to go with F.A..

8
00:00:27,150 --> 00:00:28,600
And then we want to go with this one.

9
00:00:28,620 --> 00:00:36,150
All of them are coming from reactor icons like I just said, Well, and let's get also our use app and

10
00:00:36,160 --> 00:00:39,180
then context that is coming from our context, of course.

11
00:00:39,540 --> 00:00:43,020
So we're going to go over here and look inside of the context.

12
00:00:43,320 --> 00:00:45,410
And we're also going to do the same thing with the logo.

13
00:00:45,420 --> 00:00:47,700
So it's their logo from.

14
00:00:47,700 --> 00:00:53,190
And since this is sitting right next to the bar, we can just simply point to a logo.

15
00:00:53,580 --> 00:01:00,790
Now there's going to be a big, fat error in the console simply because we don't have a port for back

16
00:01:00,870 --> 00:01:01,530
home, correct?

17
00:01:01,890 --> 00:01:03,510
So let's just remove this one.

18
00:01:03,810 --> 00:01:09,540
And like I said, what we want to do is set up that three column layout inside of the nerve center.

19
00:01:09,810 --> 00:01:11,220
So let me close the sidebar.

20
00:01:11,230 --> 00:01:15,210
I'm going to go here with nav center and line inside of it.

21
00:01:15,540 --> 00:01:21,660
We're going to go with our first button or the toggle button than the day of where we'll have the logo

22
00:01:22,020 --> 00:01:25,260
and the logo text more specifically match board.

23
00:01:25,590 --> 00:01:27,990
And then let's set up that button container.

24
00:01:28,290 --> 00:01:30,950
So let's start with our simple toggle button.

25
00:01:30,960 --> 00:01:32,100
So we have a button here.

26
00:01:32,460 --> 00:01:37,680
We'll go to class name or go toggle and then hyphen between probably you.

27
00:01:37,750 --> 00:01:39,850
I want to close the terminal.

28
00:01:39,870 --> 00:01:41,700
I don't think we need to use it for now.

29
00:01:42,130 --> 00:01:44,220
And then let's go with on click.

30
00:01:44,640 --> 00:01:50,610
And for now, I'll just passing that console log just so I can see that functionality works.

31
00:01:51,000 --> 00:01:56,790
And more specifically, I want to go with a log and will pass in some kind of string ruler.

32
00:01:57,060 --> 00:02:01,400
So let's say here, toggle and that sidebar now inside of the button.

33
00:02:01,410 --> 00:02:04,470
This is where I want to display my aunt on the FAA.

34
00:02:04,740 --> 00:02:05,910
I'm online.

35
00:02:06,330 --> 00:02:12,750
And once we have this one in place, we can take a look at our complete project and it should look something

36
00:02:12,750 --> 00:02:13,200
like this.

37
00:02:13,530 --> 00:02:21,390
So this is what we'll see now as a side note, if right away it doesn't update whatever you see in the

38
00:02:21,390 --> 00:02:27,830
browser, what you can test out is the following setup where you need to go to the client here.

39
00:02:27,870 --> 00:02:28,890
And this is important.

40
00:02:28,890 --> 00:02:32,100
We're not talking about the server, but you can go to the client.

41
00:02:32,490 --> 00:02:37,470
You can create a new file and you need to go again with that in RE.

42
00:02:38,570 --> 00:02:43,830
And in here, you can go fast and then refresh so fast.

43
00:02:43,850 --> 00:02:48,950
Underscore refresh on that one is equal to false.

44
00:02:49,430 --> 00:02:53,810
So you can try this one out now you will have to stop everything and restart.

45
00:02:54,350 --> 00:02:59,180
So I'm going to go here with npm start and I'm not going to spend more time on this one.

46
00:02:59,420 --> 00:03:00,200
You can Google.

47
00:03:00,200 --> 00:03:02,630
Why is this happening with Create React app?

48
00:03:02,630 --> 00:03:06,620
And in my experience, to tell you, honestly, this one is kind of fun.

49
00:03:07,340 --> 00:03:11,630
There's times when this one works and there's times when it just doesn't.

50
00:03:11,910 --> 00:03:15,260
So you literally still need to manually refresh.

51
00:03:15,500 --> 00:03:20,270
And again, I don't want to spend too much time on this one because this is literally everything to

52
00:03:20,270 --> 00:03:24,440
do with Create React app and nothing to do with our application.

53
00:03:24,800 --> 00:03:31,460
So the moment I have my application spinning up and I can simply go back to the navar and then close

54
00:03:31,460 --> 00:03:32,330
this down at the end.

55
00:03:32,960 --> 00:03:35,070
And I want to set up my second call.

56
00:03:35,270 --> 00:03:39,950
So right next to the button, I'm going to go with Dev and that instead of not there, I want to set

57
00:03:39,950 --> 00:03:40,700
up my logo.

58
00:03:41,150 --> 00:03:46,910
That's first, and then I'm going to go with my heading three with a class name of logo text.

59
00:03:46,910 --> 00:03:50,810
So class name and then let's go with logo and then text.

60
00:03:51,050 --> 00:03:56,330
And then inside of it would set up the text, which in my case is going to be a dashboard.

61
00:03:56,660 --> 00:04:03,320
Let's say it, I'll close the terminal and then once I navigate here, not now I have my dashboard text

62
00:04:03,620 --> 00:04:04,020
again.

63
00:04:04,190 --> 00:04:06,230
This is going to depend on the screen size.

64
00:04:06,650 --> 00:04:08,270
So on the small screen?

65
00:04:08,600 --> 00:04:10,940
Check it out and I'll have my logo.

66
00:04:11,360 --> 00:04:13,430
And then we want to set up that third column.

67
00:04:13,700 --> 00:04:18,620
So again, we need to make sure of your setup is exactly the same.

68
00:04:18,920 --> 00:04:24,590
So you have a button side by side with a device with logo and logo text unless you want to go with that

69
00:04:24,830 --> 00:04:25,730
button container.

70
00:04:26,000 --> 00:04:30,110
So let's go with div, and the class will be BTN and then container.

71
00:04:30,410 --> 00:04:37,670
And then inside of it, let's set up first button to show or hide the dropdown.

72
00:04:37,820 --> 00:04:39,620
So let's go here with button.

73
00:04:40,070 --> 00:04:42,890
Now the type actually here is also going to be a button.

74
00:04:43,220 --> 00:04:45,530
My badges actually want to do the same thing here.

75
00:04:46,280 --> 00:04:54,500
So go here where we have the first button and type, and then it's going to simply have a class of between.

76
00:04:55,130 --> 00:04:58,460
Class nine will be beaten and not as far as the on click.

77
00:04:58,790 --> 00:05:04,550
Well, let's just pick this up, but I'll take this one and we simply want to change what we're logging.

78
00:05:04,700 --> 00:05:07,130
There's really no point to type this from scratch.

79
00:05:07,430 --> 00:05:14,210
So let's just say here show hide, hide and dropdown drop down.

80
00:05:14,990 --> 00:05:15,900
Let's say this one.

81
00:05:16,160 --> 00:05:21,260
And then inside of this button, I want to set up two icons as well as the text.

82
00:05:21,410 --> 00:05:24,680
Now, eventually, that text will depend on the user name.

83
00:05:25,010 --> 00:05:27,680
So notice the complete one since the user names John.

84
00:05:27,680 --> 00:05:30,490
That's why it is displayed over here for time being.

85
00:05:30,500 --> 00:05:32,270
Of course we will on this one.

86
00:05:32,540 --> 00:05:38,120
So first, let's start with this f a online user and then circle.

87
00:05:38,150 --> 00:05:42,340
That's the first one where you want to display online or right next to it.

88
00:05:42,350 --> 00:05:44,060
I'm going to go with John again.

89
00:05:44,060 --> 00:05:44,660
Hardcoded.

90
00:05:44,930 --> 00:05:49,520
And then lastly, we have the FAA and we're going to go with this one.

91
00:05:49,670 --> 00:05:56,120
That's the icon will set up over there and then inside of the button container again, please be very

92
00:05:56,120 --> 00:06:01,340
careful where you set this one up, because if you'll set it up in the wrong place, then of course,

93
00:06:01,340 --> 00:06:02,720
the access is not going to work.

94
00:06:03,110 --> 00:06:08,340
So in the button container right next to the button, I want to go with this.

95
00:06:08,690 --> 00:06:13,370
And here I'll add drop down and show drop down class.

96
00:06:13,530 --> 00:06:15,350
Now, eventually, we'll toggle this one.

97
00:06:15,680 --> 00:06:17,510
But for timing, let just go in there.

98
00:06:17,900 --> 00:06:19,280
And like I said, drop down.

99
00:06:19,790 --> 00:06:23,690
And another class I want to add is show drop down.

100
00:06:24,650 --> 00:06:31,280
Now, once I have this in place, then inside of the if I want to go with button and then the text will

101
00:06:31,280 --> 00:06:32,090
be a log on.

102
00:06:32,330 --> 00:06:33,230
So let's set this up.

103
00:06:33,500 --> 00:06:37,490
I'm going to go with button then type where I said it will be equal to a button.

104
00:06:37,760 --> 00:06:41,720
Then the class name will be drop down and then hyphen between.

105
00:06:42,080 --> 00:06:44,420
And as far as the text, let's just say logout.

106
00:06:44,810 --> 00:06:47,510
And then let's also add the on click here.

107
00:06:48,230 --> 00:06:50,030
Then it's just going to be a console.log.

108
00:06:50,030 --> 00:06:51,080
So copy and paste.

109
00:06:51,440 --> 00:06:57,140
And as far as the logic here, well, let's just go with a log out years or so, of course.

110
00:06:57,140 --> 00:07:00,830
Eventually, we will set up the logout functionality as well.

111
00:07:01,250 --> 00:07:08,640
So once we save this, once we navigate to the big screen, this is what we should see while the toggle

112
00:07:08,640 --> 00:07:13,210
one, you're not actually open up my console just so I can see.

113
00:07:13,230 --> 00:07:15,680
Yep, notice I have toggle sidebar.

114
00:07:15,830 --> 00:07:20,360
So I know that functionality works and I also have these two.

115
00:07:20,870 --> 00:07:27,950
I have one to show and hide the dropdown, and then I have another one where we're logging out the user.

116
00:07:28,430 --> 00:07:34,460
And if this is what you see on the screen, that means that we have successfully set up the structure

117
00:07:34,670 --> 00:07:36,040
for our bar.