1
00:00:00,150 --> 00:00:06,689
Wonderful, and once our toggle functionality is in place, I was displayed links on the general ideas

2
00:00:06,689 --> 00:00:14,070
following iterate over, all right, and then will return a novel ink item and in there will provide

3
00:00:14,070 --> 00:00:18,630
five hours more text for the icon as well as the path.

4
00:00:19,110 --> 00:00:23,940
And as far as the code is going to look something like this where we grab the novel, I mean, we already

5
00:00:23,940 --> 00:00:24,560
have the import.

6
00:00:24,780 --> 00:00:26,520
This is just here for demonstration.

7
00:00:26,850 --> 00:00:31,380
And then where we have the dev with Mavericks class, I have my lecturer.

8
00:00:31,380 --> 00:00:34,320
I like, I said we're iterating or we're just using map.

9
00:00:34,800 --> 00:00:39,510
And in each and every iteration, we access the object, correct?

10
00:00:39,810 --> 00:00:43,350
Now what are the properties in the object text path?

11
00:00:43,380 --> 00:00:44,340
Add an icon.

12
00:00:44,700 --> 00:00:46,350
All of that is coming from the link.

13
00:00:46,740 --> 00:00:51,120
And then instead of going with link component, we're going to go with one.

14
00:00:51,450 --> 00:00:55,750
And the setup is extremely similar where we have a dual prop.

15
00:00:56,160 --> 00:01:01,560
So essentially, just like with Link, we go here with two and then whatever is the path.

16
00:01:02,070 --> 00:01:06,330
Now, in this case, I'm hard coding, but keep in mind that, of course, I already have that value

17
00:01:06,660 --> 00:01:08,250
in the path property.

18
00:01:08,430 --> 00:01:09,690
Now don't worry about this one.

19
00:01:10,530 --> 00:01:12,480
I'll cover this one at the very, very end.

20
00:01:12,930 --> 00:01:14,430
But when it comes to key?

21
00:01:14,580 --> 00:01:17,180
Well, this is traditional react lists.

22
00:01:17,180 --> 00:01:20,250
So we need to go with Kiprop in passing something unique in this case.

23
00:01:20,880 --> 00:01:24,330
And then on click I'll right away set up toggle sidebar.

24
00:01:24,690 --> 00:01:31,470
Because what I want as far as functionality that the moment I click on a page actually want to close

25
00:01:31,470 --> 00:01:32,070
the sidebar.

26
00:01:32,490 --> 00:01:34,440
This, to me, makes all the more sense.

27
00:01:34,800 --> 00:01:39,480
Otherwise, while you navigate to the page, but you still have the sidebar on a small screen.

28
00:01:39,510 --> 00:01:41,790
Keep in mind again, we're talking about the small screen.

29
00:01:42,120 --> 00:01:47,130
So again, it's always my preference just to close the sidebar the moment I navigate, how do we do

30
00:01:47,130 --> 00:01:47,340
that?

31
00:01:47,350 --> 00:01:52,920
Well, we have on a click and we already have the function again at this point when you can see this

32
00:01:52,920 --> 00:01:53,250
link.

33
00:01:53,700 --> 00:01:57,390
The only value for show sidebar is going to be true.

34
00:01:57,590 --> 00:02:00,720
That's why we can simply passing a toggle and I already covered it.

35
00:02:00,750 --> 00:02:04,920
Yes, technically you can set up the close one, but I just didn't see the point.

36
00:02:05,130 --> 00:02:07,680
And I also want to display instead of narrowing two things.

37
00:02:08,780 --> 00:02:12,110
I want to display the icon, and it's going to be sitting right here.

38
00:02:12,470 --> 00:02:14,060
And also a text.

39
00:02:14,540 --> 00:02:19,190
So let's go to a small sidebar and let's try to implement that.

40
00:02:19,340 --> 00:02:27,620
So we have and coming from React router or some one where I have the there was just iterate over some

41
00:02:27,620 --> 00:02:29,990
sort of microfiche that's going to be my expression.

42
00:02:30,360 --> 00:02:31,730
Like I said, we're going to go with links.

43
00:02:32,150 --> 00:02:39,080
That's something we sent a few videos ago map than in our callback function as we're iterating.

44
00:02:39,350 --> 00:02:41,870
I guess I'm just going to call this a link again.

45
00:02:41,870 --> 00:02:42,770
You can call this item.

46
00:02:42,770 --> 00:02:48,660
You can call this vegan food truck that's really up to you, and we're going to go here with context.

47
00:02:49,190 --> 00:02:52,750
Let's pull out those properties path hardy and icon.

48
00:02:53,000 --> 00:02:54,860
And that is equal to MyLink.

49
00:02:55,370 --> 00:02:57,830
Now what are we returning from each and every iteration?

50
00:02:58,250 --> 00:03:02,630
Well, let's go here, and let's go with our now link first Suhasini component.

51
00:03:02,900 --> 00:03:04,060
Remember to prop.

52
00:03:04,220 --> 00:03:10,850
So where the user is going to navigate, then we want to go with key and let's passing something unique

53
00:03:10,850 --> 00:03:12,500
or generic as easily.

54
00:03:12,770 --> 00:03:14,750
And then also, we want to go with on click.

55
00:03:14,750 --> 00:03:21,980
And like I said, we want you to toggle this sidebar a.k.a. we want to actually close it and then inside

56
00:03:21,980 --> 00:03:22,640
of the netlink.

57
00:03:22,910 --> 00:03:24,230
Let's go with our span.

58
00:03:24,500 --> 00:03:26,360
And this is for styling.

59
00:03:26,360 --> 00:03:29,110
So out here, class name and then icon.

60
00:03:29,120 --> 00:03:32,450
And then inside of the span, we go with the actual icon.

61
00:03:32,690 --> 00:03:36,050
So that's the property where our React component is sitting.

62
00:03:36,290 --> 00:03:38,510
Remember, that was our setup in the works.

63
00:03:38,810 --> 00:03:41,800
And then also side by side, I'm going to go with text.

64
00:03:42,020 --> 00:03:42,860
So let's save it here.

65
00:03:43,130 --> 00:03:47,900
And then we'll worry about the styling, because at the moment, if you navigate your application,

66
00:03:48,440 --> 00:03:50,270
you pop open the sidebar.

67
00:03:50,600 --> 00:03:55,100
You'll notice that the links are there, but kind of looks a bit ugly.

68
00:03:55,310 --> 00:03:55,730
Correct.

69
00:03:56,120 --> 00:04:00,290
So yes, we have the icon, we have the text and everything works really well.

70
00:04:00,290 --> 00:04:05,120
And we actually also close the sidebar once we navigate to the page.

71
00:04:05,120 --> 00:04:10,250
And I guess more importantly, we're actually navigating to that page whether or not is a profile,

72
00:04:10,490 --> 00:04:12,560
whether that is the ad job.

73
00:04:12,830 --> 00:04:14,240
And hopefully you get the gist.

74
00:04:14,660 --> 00:04:16,790
But there's two things that are missing.

75
00:04:16,820 --> 00:04:19,399
First, our links look somewhat ugly.

76
00:04:19,730 --> 00:04:23,120
So it would be very useful if we would set up the CIUSSS.

77
00:04:23,390 --> 00:04:25,970
Now I already prepared the class, so don't worry about it.

78
00:04:26,240 --> 00:04:28,340
We won't have to type off the see assets together.

79
00:04:28,730 --> 00:04:33,950
And a second thing that I want is to showcase, well, which page we're actually on.

80
00:04:34,340 --> 00:04:36,710
So let's take a look at our complete progression.

81
00:04:37,160 --> 00:04:40,700
If I navigate to the stats, I close the sidebar.

82
00:04:40,700 --> 00:04:41,690
OK, that makes sense.

83
00:04:42,020 --> 00:04:43,940
But then once I crack it open again.

84
00:04:44,270 --> 00:04:50,240
Notice now it signals that I'm in the stats already, and the same thing is going to be with, for example,

85
00:04:50,240 --> 00:04:50,660
Adam.

86
00:04:50,930 --> 00:04:54,340
Now also showcase that is the same thing with a big sidebar.

87
00:04:54,350 --> 00:04:58,550
Maybe this is easier to see or notice every time I navigate to the page.

88
00:04:58,910 --> 00:05:01,610
I actually also showcase the actor one.

89
00:05:01,910 --> 00:05:07,250
Now I apply the same styles as I'm hovering, so please don't confuse it here.

90
00:05:07,520 --> 00:05:09,740
So I have these styles as I'm hovering.

91
00:05:09,740 --> 00:05:14,330
But as far as the actor won, this will always have of this type of styling.

92
00:05:14,750 --> 00:05:17,420
And this is the reason why we used here this modelling.

93
00:05:17,660 --> 00:05:24,800
Because in React Router six, we have this map a link component, and it's actually very straightforward

94
00:05:25,100 --> 00:05:30,890
to set up some kind of style if the link represents the active page.

95
00:05:31,280 --> 00:05:36,740
And let me show you first the syntax, and then I'll quickly show you the sheer size as well.

96
00:05:37,160 --> 00:05:38,400
So here's what we need to do.

97
00:05:38,420 --> 00:05:43,130
We can go to the novel link and instead of just typing class name equals to such and such.

98
00:05:43,430 --> 00:05:50,750
What we want to do over here is to set up our colors so we go back to JavaScript LAN and we actually

99
00:05:50,750 --> 00:05:52,010
passed in the function.

100
00:05:52,460 --> 00:05:58,220
So we're passing the function and whatever classes we return from this function, well, they will be

101
00:05:58,220 --> 00:05:58,610
applied.

102
00:05:59,060 --> 00:06:00,470
So that's the first step.

103
00:06:00,950 --> 00:06:06,890
Now second, what's really interesting inside of this function, there is a prop we can access now.

104
00:06:07,070 --> 00:06:10,670
Again, this is not something that we are going to make.

105
00:06:10,730 --> 00:06:12,440
This is something already provided for us.

106
00:06:12,680 --> 00:06:14,300
Very, very important distinction.

107
00:06:14,540 --> 00:06:18,350
Please don't write over here, shake and bake and expect that everything is going to work.

108
00:06:18,410 --> 00:06:19,310
So what do we need to do?

109
00:06:19,310 --> 00:06:20,300
Is set up this object?

110
00:06:20,630 --> 00:06:26,690
So essentially, what I'm saying here is, yes, I'm looking for specific parameter, but I know that

111
00:06:26,690 --> 00:06:29,240
the property name will be here is active.

112
00:06:29,320 --> 00:06:36,440
Notice how it right away suggests again, this is already set up for us and it is provided by the library.

113
00:06:37,010 --> 00:06:41,810
And then as far as the functionality, remember whatever we're going to be returning from, this function

114
00:06:42,170 --> 00:06:44,450
will be applied as a class, correct?

115
00:06:44,720 --> 00:06:51,020
So technically I set up the curlies, but I think we can go with implicit return where I'll say if is

116
00:06:51,020 --> 00:06:56,020
active is true, then I want to pass my novel in class an active cluster.

117
00:06:56,300 --> 00:06:59,920
Now these are two classes that I did set up, so that's the difference.

118
00:07:00,440 --> 00:07:03,320
This is coming from the library, but this is something that we set up.

119
00:07:03,590 --> 00:07:07,910
So essentially, what are going to be the classes applied if it is an active?

120
00:07:08,430 --> 00:07:11,460
And what is going to be the class if the link is not active?

121
00:07:11,790 --> 00:07:17,850
So in my case, I have the active class and then if the link is not active while, then I'll just go

122
00:07:17,850 --> 00:07:22,440
with an outlook one and before I display how everything looks in a browser.

123
00:07:22,710 --> 00:07:25,530
Let's take a look quickly at the wrapper.

124
00:07:25,770 --> 00:07:29,060
So let me go to my assets, then wrappers.

125
00:07:29,100 --> 00:07:31,410
Then we're looking for a small sidebar somewhere here.

126
00:07:32,610 --> 00:07:35,980
Think it's going to be over here and then again, notice.

127
00:07:36,130 --> 00:07:36,970
Display none.

128
00:07:37,360 --> 00:07:44,500
So starting from the big screen, you won't see the small sidebar in general because I only wanted to

129
00:07:44,500 --> 00:07:45,310
display the big one.

130
00:07:45,820 --> 00:07:49,960
Like I already mentioned, and then this is going to be the surface for the title.

131
00:07:50,290 --> 00:07:56,740
But if you keep on scrolling, keep on scrolling is going to be the thesis for modeling.

132
00:07:57,010 --> 00:08:01,690
So that's how they're going to be displayed right from the get go and then notice the actor one.

133
00:08:02,020 --> 00:08:04,180
Essentially, I just change the color.

134
00:08:04,630 --> 00:08:11,440
So for the active one, I go with this color for the text and then reverse color for the icon.

135
00:08:11,680 --> 00:08:12,040
That's it.

136
00:08:12,540 --> 00:08:15,040
That is the entire logic behind it.

137
00:08:15,370 --> 00:08:20,870
And once we navigate right now to our application and then again, I'll have to make this smaller.

138
00:08:21,220 --> 00:08:22,420
And once we open this up.

139
00:08:22,720 --> 00:08:30,310
Notice if the add job page is going to be the actor, one moment you pop open the sidebar, you'll have

140
00:08:30,310 --> 00:08:35,350
a little bit different styles for this particular link because it is the active link, and that's how

141
00:08:35,350 --> 00:08:40,419
we can set up our links as a memory and display them in our small sidebar.