1
00:00:00,300 --> 00:00:00,660
All right.

2
00:00:00,660 --> 00:00:04,140
And once we're done with the small sidebar before we continue.

3
00:00:05,100 --> 00:00:07,770
And do the same thing with a big sidebar.

4
00:00:08,130 --> 00:00:13,430
Let's take a look at something where essentially we are using the same links.

5
00:00:13,440 --> 00:00:14,010
Correct.

6
00:00:14,250 --> 00:00:17,700
And that was the whole point why we set up the utils.

7
00:00:17,730 --> 00:00:18,360
Correct.

8
00:00:18,570 --> 00:00:27,300
But if we think about it, can we create a novel component and essentially just reuse this functionality

9
00:00:27,300 --> 00:00:30,630
since we will use it in the big sidebar as well?

10
00:00:30,900 --> 00:00:32,600
And of course the answer is yes.

11
00:00:32,610 --> 00:00:35,940
So here are the steps that I want you to take.

12
00:00:35,970 --> 00:00:40,110
Go to the components and create a novel component.

13
00:00:40,140 --> 00:00:47,340
So now let's just and then set up the components and I'll cover these ones at the very end because I

14
00:00:47,340 --> 00:00:51,060
think they're not going to make that much sense right now.

15
00:00:51,090 --> 00:00:57,750
So first, what we want to do is navigate to components and we want to go with NAV and then links,

16
00:00:57,770 --> 00:00:58,250
address.

17
00:00:58,290 --> 00:00:59,790
We create the component.

18
00:00:59,910 --> 00:01:02,310
Let's right away set up the structure and everything.

19
00:01:02,460 --> 00:01:06,900
And then as far as the return, well, now let's take a look at the small sidebar.

20
00:01:07,500 --> 00:01:08,880
What do I have over here?

21
00:01:09,270 --> 00:01:16,230
I have this div with the class of knowledge and essentially all the links logic is right over here.

22
00:01:16,260 --> 00:01:16,810
Correct.

23
00:01:16,830 --> 00:01:23,250
So what I always like to do, since there's quite a bit of code, I just collapse which part I want

24
00:01:23,250 --> 00:01:25,980
to take out and then take it like so.

25
00:01:26,010 --> 00:01:30,390
So I'm going to go with command and X basically cut it out.

26
00:01:30,570 --> 00:01:34,740
Then we're navigate back to the links, copy and paste.

27
00:01:34,950 --> 00:01:36,470
And we just need to take a look.

28
00:01:36,480 --> 00:01:38,700
What are we rendering here?

29
00:01:38,790 --> 00:01:40,200
So we have links.

30
00:01:40,260 --> 00:01:43,360
We'll definitely need those ones from the small sidebar.

31
00:01:43,380 --> 00:01:44,610
And second, we need the NAV.

32
00:01:44,940 --> 00:01:45,460
Correct.

33
00:01:45,480 --> 00:01:51,150
So let's navigate back to the small sidebar and take both of these things over here.

34
00:01:51,180 --> 00:01:55,860
Again, let's cut it out and then set it up back in that links.

35
00:01:56,280 --> 00:02:02,940
Then once we have both of them available, the last thing that we need to cover is the one click you

36
00:02:02,940 --> 00:02:03,330
see.

37
00:02:04,320 --> 00:02:06,180
On a big sidebar.

38
00:02:06,300 --> 00:02:08,610
Actually, we won't use that on click.

39
00:02:08,729 --> 00:02:10,800
But on a small one, I do want to use it.

40
00:02:10,949 --> 00:02:15,550
I do want to close the sidebar every time I click on a link.

41
00:02:15,570 --> 00:02:16,650
And how we can do that?

42
00:02:16,650 --> 00:02:19,760
Well, we have this toggle sidebar, correct.

43
00:02:19,770 --> 00:02:23,350
So why don't we pass this one in as a prop?

44
00:02:23,370 --> 00:02:28,800
So I'll say here toggle sidebar and I'll pass it from the parent container.

45
00:02:29,100 --> 00:02:31,830
In this case, that is going to be the small sidebar.

46
00:02:31,860 --> 00:02:36,870
Also, a quick side note, since the now links is sitting right next to the small sidebar.

47
00:02:36,900 --> 00:02:40,080
I mean, essentially the paths are going to be exactly the same.

48
00:02:40,230 --> 00:02:44,120
I mean, this one comes from the library and we're just talking about this links one.

49
00:02:44,130 --> 00:02:49,780
And again, it's going to be located in the same place or relative to our knowledge.

50
00:02:49,800 --> 00:02:51,140
So let's save it here.

51
00:02:51,150 --> 00:02:54,340
Let's go back to the small sidebar.

52
00:02:54,360 --> 00:02:59,760
And then in here, I want to import and remember, I want to place it right after the setter.

53
00:03:00,210 --> 00:03:02,880
So I'll test out the auto import in this case.

54
00:03:02,910 --> 00:03:05,550
I'll go with a NAV and then a link.

55
00:03:05,580 --> 00:03:10,120
Notice I can nicely render and I can nicely import them.

56
00:03:10,140 --> 00:03:13,500
Just remember that we do need to pass in that toggle sidebar.

57
00:03:13,770 --> 00:03:15,870
That's what the component is looking for.

58
00:03:15,900 --> 00:03:18,890
I mean, it's not a big deal if you don't pass it.

59
00:03:18,930 --> 00:03:20,850
Just the functionality is not going to work.

60
00:03:20,850 --> 00:03:26,430
So we're going to go over here with toggle sidebar is equal to a toggle sidebar.

61
00:03:26,560 --> 00:03:29,640
Let's save it and then let's test that out in our application.

62
00:03:29,640 --> 00:03:35,340
And if everything is correct again, the goal is that when we'll be setting up the big sidebar instead

63
00:03:35,340 --> 00:03:41,280
of grabbing the list, going over the links and then rendering them one by one, we'll just get the

64
00:03:41,280 --> 00:03:41,870
component.

65
00:03:41,880 --> 00:03:44,260
Yes, of course you can copy and paste the code.

66
00:03:44,280 --> 00:03:48,110
I mean, that's not the point of this video, so let's save it here.

67
00:03:48,120 --> 00:03:51,090
Let's navigate back to our application.

68
00:03:51,270 --> 00:03:52,770
We'll make this one smaller.

69
00:03:52,770 --> 00:03:57,860
And notice, once I open first, I can see all the links, which is just awesome.

70
00:03:57,870 --> 00:04:00,810
And then second, notice the functionality stored.

71
00:04:00,840 --> 00:04:02,820
Now, let me refresh just in case.

72
00:04:02,820 --> 00:04:08,490
Maybe there's some weird bug, but no, everything looks to be about, right?

73
00:04:08,820 --> 00:04:09,750
A quick update.

74
00:04:09,750 --> 00:04:16,980
If you're using latest React router down version, you might have a different result.

75
00:04:17,459 --> 00:04:18,959
Essentially a bug.

76
00:04:19,630 --> 00:04:20,680
Where all the sub.

77
00:04:21,940 --> 00:04:24,510
So in our case, those are stats.

78
00:04:24,520 --> 00:04:29,080
All jobs at job and profile are displayed as active.

79
00:04:29,940 --> 00:04:34,770
Basically there's no distinction between active route and a regular route.

80
00:04:35,310 --> 00:04:37,620
Luckily, the fix is very simple.

81
00:04:37,920 --> 00:04:43,770
We just need to add and prop to the NAV link component.

82
00:04:44,130 --> 00:04:52,890
So in the nav links component where we iterate over the links, we just need to add the end prop to

83
00:04:52,890 --> 00:04:54,750
the NAV link component.

84
00:04:55,050 --> 00:04:57,060
And of course, I'll update the renaming.

85
00:04:57,770 --> 00:05:06,020
So you can always check out the Stack Overflow post and reference the correct NAV link code.

86
00:05:06,140 --> 00:05:09,430
Now let me navigate back to the read me and cover a few things.

87
00:05:09,440 --> 00:05:10,130
First of all.

88
00:05:11,030 --> 00:05:14,870
As you're looking at, you're like, okay, but what about the classes here?

89
00:05:15,230 --> 00:05:19,310
So and here I have the novel links and the novel link as well as the active.

90
00:05:19,430 --> 00:05:25,010
Well, one thing we need to keep in mind that we set those classes from the wrapper.

91
00:05:25,460 --> 00:05:32,210
So in this case, yes, you can technically make a case where you can set up the style globally for

92
00:05:32,210 --> 00:05:35,390
the modeling as well as the entire container.

93
00:05:35,390 --> 00:05:41,030
But keep in mind that you might have a case where those links will be displayed differently.

94
00:05:41,300 --> 00:05:47,900
So at least in my opinion, a better approach is to set up these classes in the knowledge component.

95
00:05:47,990 --> 00:05:53,870
But don't apply some global styles or some local styles here in a component.

96
00:05:53,870 --> 00:05:55,400
Instead, what we're doing.

97
00:05:55,430 --> 00:05:58,650
Remember, we have our wrappers, correct?

98
00:05:58,670 --> 00:06:04,820
So let me just showcase something where if you take a look at the big sidebar, the one that we're about

99
00:06:04,820 --> 00:06:10,010
to work on notice over here again, I have all the styles for hiding, showing all that.

100
00:06:10,220 --> 00:06:17,540
Notice this one since I know that there will be a nav link clash inside of the links component, which

101
00:06:17,540 --> 00:06:20,750
eventually I'm going to render, I can nicely style it from here.

102
00:06:20,750 --> 00:06:28,100
And then also remember that since we are using style components, the styles won't be colliding.

103
00:06:28,100 --> 00:06:30,480
That's a very, very important point.

104
00:06:30,500 --> 00:06:36,980
So essentially what I can do is I can use this novel links nicely over here in the novel links component,

105
00:06:36,980 --> 00:06:39,850
the class and this class, an active class as well.

106
00:06:39,860 --> 00:06:44,780
And then each and every time I'll grab this component in some kind of other component.

107
00:06:44,780 --> 00:06:47,010
Since I'm using stealth components, I'm good to go.

108
00:06:47,030 --> 00:06:49,190
Again, just my preference.

109
00:06:49,190 --> 00:06:51,910
I mean, there's a million ways how you can set it up.

110
00:06:51,920 --> 00:06:58,070
And then lastly, I just want to mention something else that is somewhat of a preference where you're

111
00:06:58,070 --> 00:07:03,880
probably looking at and you're like, okay, but why we have to set up the nav links altogether?

112
00:07:03,890 --> 00:07:07,340
I mean, we could have just added this one to link just over here.

113
00:07:07,340 --> 00:07:13,100
So if I take a look at the utils and then link jazz and you're absolutely correct, it's just my preference

114
00:07:13,100 --> 00:07:17,600
again to keep the data separate from what we're rendering.

115
00:07:17,870 --> 00:07:19,850
Is it the only truth?

116
00:07:19,850 --> 00:07:20,420
No.

117
00:07:20,450 --> 00:07:22,370
I mean, you can set it up however you want.

118
00:07:22,400 --> 00:07:29,510
You literally can go here and take this entire thing and just copy and paste and instead of exporting

119
00:07:29,510 --> 00:07:32,060
links, you're exporting knowledge.

120
00:07:32,330 --> 00:07:36,440
So as always, there's tons of ways how you can set it up.

121
00:07:36,440 --> 00:07:40,180
And this was my choice where links are located in the utils.

122
00:07:40,190 --> 00:07:46,550
But since I know that the now links will be displayed in multiple places, I just set up a Netflix component

123
00:07:46,550 --> 00:07:52,430
and then in this case we import in small sidebar and in the next video we'll do that in the big sidebar.