1
00:00:00,270 --> 00:00:08,730
All right, and once we're familiar of how we can use React Icons Library now, it started working on

2
00:00:08,730 --> 00:00:12,060
our components one by one, and we'll start with the No.

3
00:00:12,510 --> 00:00:15,180
And first, I just want to set up the structure.

4
00:00:15,540 --> 00:00:21,480
So yes, eventually there's going to be a functionality where we can toggle the sidebar, for example,

5
00:00:21,810 --> 00:00:24,420
where we can also display the log out.

6
00:00:24,420 --> 00:00:27,540
And then once we click on the code, we log out in the user.

7
00:00:28,020 --> 00:00:32,490
But let's just start step by step where I want to set up the structure.

8
00:00:33,270 --> 00:00:37,770
So I want to set up my three column layout, set up my imports and the rest of the stuff.

9
00:00:38,100 --> 00:00:42,180
So let me go back to the read me and just showcase what we're going to be doing.

10
00:00:42,510 --> 00:00:44,520
So we're going to import huge state from React.

11
00:00:44,880 --> 00:00:47,370
We want to get these icons from React icons.

12
00:00:47,610 --> 00:00:49,830
More specifically from font some icons.

13
00:00:50,010 --> 00:00:52,680
We also want to get the context so important.

14
00:00:52,680 --> 00:00:53,430
I want to right away.

15
00:00:53,760 --> 00:00:55,710
I'm sorry, logo since will this plant?

16
00:00:56,070 --> 00:00:57,450
And then, of course, the wrapper.

17
00:00:57,690 --> 00:00:59,880
So that's where we'll have all our styles.

18
00:01:00,240 --> 00:01:02,490
So we will return a wrapper inside of it.

19
00:01:02,850 --> 00:01:06,150
There's going to be a nav center there.

20
00:01:06,510 --> 00:01:07,680
That's very, very important.

21
00:01:08,070 --> 00:01:11,250
That pretty much sets up all the layout and all that.

22
00:01:11,580 --> 00:01:13,590
And then I'll have my three come out.

23
00:01:14,370 --> 00:01:18,450
So essentially, I'll have the button here for toggling for time being noticed.

24
00:01:18,810 --> 00:01:21,750
I'll just go with on click and then toggle sidebar.

25
00:01:22,200 --> 00:01:28,680
So functionality will set up one by one in the following videos, though I don't have the second column

26
00:01:29,010 --> 00:01:33,540
where I'll have to div and a logo and inside of it, I'm going to have my head.

27
00:01:33,650 --> 00:01:33,930
Three.

28
00:01:34,170 --> 00:01:35,130
And what's interesting?

29
00:01:35,150 --> 00:01:41,370
If you take a look at the complete application, you'll notice that depending on the screen size, we

30
00:01:41,370 --> 00:01:47,160
will display either a logo or a text dashboard.

31
00:01:47,520 --> 00:01:49,830
And the way we'll do that is using CIUSSS.

32
00:01:50,040 --> 00:01:51,600
And then we're interested in this.

33
00:01:51,620 --> 00:01:58,320
Yes, that's just please navigate a nav bar wrapper file in the wrappers.

34
00:01:58,710 --> 00:02:04,650
And then the third one will be a button container, and inside of it, we're going to have a button

35
00:02:05,070 --> 00:02:07,020
that toggles the dropdown.

36
00:02:07,500 --> 00:02:09,550
So this is not a button for locking up.

37
00:02:10,030 --> 00:02:14,880
This is to show or hide the dropdown and not in the dropdown.

38
00:02:14,890 --> 00:02:18,420
That's where we'll have the button to lock up.

39
00:02:18,690 --> 00:02:21,990
So here I have comes along for a log out user.