1
00:00:00,150 --> 00:00:00,540
Beautiful.

2
00:00:00,810 --> 00:00:06,870
And once we have the links in place now, it's finally set up our first sidebar, which is going to

3
00:00:06,870 --> 00:00:08,480
be the small sidebar.

4
00:00:08,490 --> 00:00:13,830
So at the moment, we have this ridiculous thing here on a small screen.

5
00:00:14,640 --> 00:00:17,160
And as you can see again, once we change the screens.

6
00:00:17,460 --> 00:00:20,570
Notice how this access is pretty much changing the layout.

7
00:00:20,580 --> 00:00:27,570
But we're looking for is this once we get to the small screen, we still have the button that bar and

8
00:00:27,570 --> 00:00:34,950
then once we click, we can display it and then we can close it in two places and close it if we click

9
00:00:34,950 --> 00:00:36,300
on one of the links.

10
00:00:37,170 --> 00:00:39,030
So let's say I'm going to go to all jobs.

11
00:00:39,630 --> 00:00:41,400
And we also right away, closer.

12
00:00:41,790 --> 00:00:45,270
And also, we have this close button and we'll do it step by step.

13
00:00:45,720 --> 00:00:53,010
So start just by setting up the structure, then will implement the open and close functionality, and

14
00:00:53,010 --> 00:00:55,920
then we'll worry about our links.

15
00:00:56,250 --> 00:00:59,940
So let's navigate back to our read me.

16
00:01:00,600 --> 00:01:02,540
And you're looking for small sidebar?

17
00:01:03,220 --> 00:01:03,510
Wah.

18
00:01:03,970 --> 00:01:06,120
I'm in the small sidebar.

19
00:01:06,330 --> 00:01:06,710
Yes.

20
00:01:07,110 --> 00:01:10,230
These are all the imports we need to have.

21
00:01:10,530 --> 00:01:13,350
Now we already have the wrapper, so this is really up to you.

22
00:01:13,350 --> 00:01:19,830
But in my case, I will take essentially all of this and then just replace whatever I have in the small

23
00:01:19,830 --> 00:01:20,340
sidebar.

24
00:01:20,700 --> 00:01:26,250
So wrapper is forced styles and this is what we're turning vine of this icon.

25
00:01:26,250 --> 00:01:29,250
The Free Times is going to be in the close button.

26
00:01:29,650 --> 00:01:31,830
So this is what you see over here.

27
00:01:32,210 --> 00:01:39,570
Then we want to get the context because remember in the context, we already have that show sidebar

28
00:01:39,570 --> 00:01:40,650
property correct.

29
00:01:40,940 --> 00:01:42,540
That's the one that controls it.

30
00:01:42,780 --> 00:01:45,210
And essentially, that's the one we'll use here.

31
00:01:45,630 --> 00:01:50,430
Now we also want to get the links, the ones that we just set up and enabling.

32
00:01:50,610 --> 00:01:56,130
Now, not Link is coming from REAC Rotterdam, and we'll discuss it in two videos once we actually set

33
00:01:56,130 --> 00:01:56,730
everything up.

34
00:01:57,060 --> 00:01:58,860
Just remember that this is not a mistake.

35
00:01:59,250 --> 00:02:03,840
I know so far we have been using only link component, and yes, it's still a valid choice.

36
00:02:04,050 --> 00:02:08,699
However, travelling has this nice feature that I want to showcase, and therefore we're going to go

37
00:02:08,699 --> 00:02:10,530
with this component instead.

38
00:02:11,009 --> 00:02:16,800
And then I also want to grab the logo from the logo and as far as the return, we go with the wrapper.

39
00:02:17,160 --> 00:02:18,360
So that's our main parent.

40
00:02:18,660 --> 00:02:24,660
And then there's going to be a container and here will toggle this class, the show sidebar.

41
00:02:24,990 --> 00:02:27,780
So once it's present, then we'll display the sidebar.

42
00:02:28,080 --> 00:02:31,500
If it's not present, then it's not going to be shown an insider.

43
00:02:31,710 --> 00:02:36,480
We're going to have a content and or here notice this is going to be a button.

44
00:02:36,960 --> 00:02:42,240
Then there's going to be a header right off the not with a logo, and then eventually there's going

45
00:02:42,240 --> 00:02:43,200
to be in our links.

46
00:02:43,500 --> 00:02:50,910
So we'll iterate over our list, our links list inside of this there and then we'll display them one

47
00:02:50,910 --> 00:02:51,780
by one again.

48
00:02:52,170 --> 00:02:53,190
If you want to take a look at the.

49
00:02:53,850 --> 00:02:55,740
Essentially, what was my approach?

50
00:02:56,010 --> 00:03:02,040
Please reference the wrapper in wrappers and the small sidebar.

51
00:03:02,100 --> 00:03:02,460
So.

52
00:03:03,420 --> 00:03:10,560
Let's get cracking, and I'm going to grab all of these first, and I want to navigate to my small side,

53
00:03:10,560 --> 00:03:12,870
but like I said, I'm just going to override this.

54
00:03:13,170 --> 00:03:14,670
I mean, it's not really a big deal.

55
00:03:15,180 --> 00:03:17,080
And then as far as our turn.

56
00:03:17,100 --> 00:03:21,150
Well, let's go with our rapper and then let's set up our parent.

57
00:03:21,330 --> 00:03:25,830
So therefore, the two classes sidebar, container and show sidebar.

58
00:03:26,190 --> 00:03:34,170
So let's go here with their then sidebar and container and another class show and sidebar.

59
00:03:34,380 --> 00:03:38,430
Once I have these two classes in place, then I want to go with my content one.

60
00:03:38,880 --> 00:03:41,850
So that's my content, and then we'll start with our button.

61
00:03:42,360 --> 00:03:43,560
So let's go here with button.

62
00:03:43,980 --> 00:03:45,870
Then let's add right away type.

63
00:03:46,350 --> 00:03:51,930
I'm going to go with button and then we're going to go with class name a little bit of style and close

64
00:03:51,930 --> 00:03:52,770
hyphen between.

65
00:03:53,710 --> 00:03:59,630
And then we'll also set up on Click Online as far as the functionality.

66
00:03:59,660 --> 00:04:01,930
Well, for now, let's just pass in the function.

67
00:04:02,410 --> 00:04:06,880
Let's say that is going to be a log and we'll say toggle sidebar.

68
00:04:07,830 --> 00:04:11,430
So let's go here with title and sidebar.

69
00:04:12,060 --> 00:04:18,690
Let's say it, but we also want to place that mark on the FAA times coming from reactor icons and more

70
00:04:18,690 --> 00:04:21,209
specifically, the font awesome library.

71
00:04:21,360 --> 00:04:24,690
So let's place our icon right here.

72
00:04:25,440 --> 00:04:28,470
And once we have this one in place, let's take a look.

73
00:04:28,710 --> 00:04:30,870
What do we have as a result?

74
00:04:31,260 --> 00:04:36,590
So I'm going to navigate here the small screen, and it looks like I'll have to refresh and notice over

75
00:04:36,600 --> 00:04:36,840
here.

76
00:04:37,200 --> 00:04:44,760
So if this is going to be my sidebar, so I have the container and also inside of it, I already have

77
00:04:44,760 --> 00:04:48,870
this icon, the little clothes icon, one right next to it.

78
00:04:48,900 --> 00:04:51,240
Let's enter with our logo.

79
00:04:51,660 --> 00:04:56,580
So right after the button, we're going to go with the header element and then we want to go with our

80
00:04:56,970 --> 00:04:57,420
logo.

81
00:04:57,720 --> 00:05:03,930
And this is the case again, where notice since we are reusing the logo, it kind of makes sense that

82
00:05:03,930 --> 00:05:05,130
we already have the component.

83
00:05:06,040 --> 00:05:12,970
And then lastly, let's set up our now, which so right after we had her, let's go with no links and

84
00:05:12,970 --> 00:05:13,690
for the time being.

85
00:05:13,970 --> 00:05:15,280
Well, simply heart coach.

86
00:05:15,280 --> 00:05:18,070
Some dummy technology sounds like a proper choice.

87
00:05:18,460 --> 00:05:21,370
And once I navigate back, this should be our look.

88
00:05:21,850 --> 00:05:23,310
And now let's take a look.

89
00:05:23,320 --> 00:05:27,850
What happens if we remove that show sidebar class?

90
00:05:28,300 --> 00:05:34,540
So with me, inspect and what I'm looking for here is the element known as this one, the device.

91
00:05:34,870 --> 00:05:38,770
And essentially, I'm just going to remove the class just to showcase how it's going to look like again.

92
00:05:39,130 --> 00:05:40,800
Eventually, we will tackle this.

93
00:05:41,080 --> 00:05:44,620
So this is going to depend on our state of our acknowledge.

94
00:05:44,920 --> 00:05:48,490
Once we remove well, we of see the sidebar correct.

95
00:05:48,810 --> 00:05:53,830
And that's going to be the functionality where if this glass is present, beautiful were displayed a

96
00:05:53,830 --> 00:05:58,360
sidebar, if it's not present, then sidebar is hidden.

97
00:05:58,720 --> 00:06:04,570
And once we have the journal structure in place now, we can slowly start adding the functionality.