1
00:00:00,210 --> 00:00:02,490
Not bad and meant we knocked out the neighbor.

2
00:00:02,730 --> 00:00:03,570
So what's next?

3
00:00:04,080 --> 00:00:11,880
Well, next, I want to work on the big sidebar over here as well as the small sidebar, and I'm only

4
00:00:11,880 --> 00:00:17,040
referencing them in such a way because this one will be displayed on a small screen.

5
00:00:17,280 --> 00:00:23,970
And then once we get to the big screen notice, then we'll use the big sidebar like show.

6
00:00:24,420 --> 00:00:29,520
Now, if you take a look at both of them, you'll notice that we have links over there.

7
00:00:30,410 --> 00:00:32,840
And essentially, for Link, we have a path.

8
00:00:33,050 --> 00:00:41,120
So where the user will navigate, we have the icon and we also have the text, and since we are using

9
00:00:41,120 --> 00:00:48,160
that in multiple places, it kind of makes sense for us to set up a list so that where if there's ever

10
00:00:48,170 --> 00:00:52,010
change, let's say I change the path, text or the icon.

11
00:00:52,460 --> 00:00:54,110
I only have to do that in one place.

12
00:00:54,320 --> 00:00:55,640
And here's how we're going to do that.

13
00:00:56,000 --> 00:01:04,099
First, we'll create a new photos folder in the source that will set up links Jaspal, and we want to

14
00:01:04,099 --> 00:01:05,420
import the following icons.

15
00:01:05,780 --> 00:01:09,720
Now this is the case where I will speed everything up and I'm just going to copy and paste.

16
00:01:09,740 --> 00:01:16,640
Now, if you're not a fan of that, I mean, you can stop the video, type out the imports and then

17
00:01:16,640 --> 00:01:17,270
you can resume.

18
00:01:17,330 --> 00:01:23,720
But in my case, I think I'm going to do the copy and paste thing because a lot of people probably will

19
00:01:23,720 --> 00:01:27,710
find it annoying if I'm just going to start typing them out one by one.

20
00:01:27,890 --> 00:01:28,840
That's just a side note.

21
00:01:28,850 --> 00:01:36,140
Essentially, again, what we're doing, we're just importing icons one by one from multiple libraries

22
00:01:36,440 --> 00:01:36,770
star.

23
00:01:36,770 --> 00:01:42,740
Honestly, it's always my preference to kind of stick with one library if I can, just because, in

24
00:01:42,740 --> 00:01:45,500
my opinion, it looks a little bit more consistent.

25
00:01:45,980 --> 00:01:51,110
But this was the case where I couldn't find the icons that I was looking for from the same library.

26
00:01:51,290 --> 00:01:52,610
And that's what you see or hear.

27
00:01:52,850 --> 00:01:57,920
There's organic food market where essentially each icon is coming from the separate library.

28
00:01:58,280 --> 00:02:04,070
And then we set up a links array and then each link is going to be an object and then I'll have, you

29
00:02:04,070 --> 00:02:09,830
know, the property since when we ran the list, we have a key problem and we need to press something

30
00:02:09,830 --> 00:02:10,139
unique.

31
00:02:10,160 --> 00:02:11,900
So in this case, we're going to go with it.

32
00:02:12,410 --> 00:02:13,760
Well, then we have a text.

33
00:02:14,060 --> 00:02:19,790
So this is what is going to be displayed inside of the link within the path where user will navigate.

34
00:02:20,120 --> 00:02:25,400
And then the icon and what we're going to do in our code will iterate over this list.

35
00:02:25,910 --> 00:02:27,980
We will use and now link instead.

36
00:02:28,430 --> 00:02:33,740
So even though I showed you your link, there's actually a novel component coming from reactor number

37
00:02:33,740 --> 00:02:34,010
down.

38
00:02:34,160 --> 00:02:40,370
And of course, I'll spend more time on explaining why we go with not one and not essentially we'll

39
00:02:40,370 --> 00:02:41,780
just pass in these writers.

40
00:02:42,140 --> 00:02:44,180
So hopefully that is clear.

41
00:02:44,510 --> 00:02:46,420
And no, I just need to go to this source.

42
00:02:46,430 --> 00:02:49,730
And like I said, we need to set up our utos one.

43
00:02:50,090 --> 00:02:56,720
So let's go here and let's say utils folder, and then I'm going to go with my address one.

44
00:02:57,260 --> 00:03:00,230
So let's go with links and address.

45
00:03:00,680 --> 00:03:06,440
And like I mentioned already previously, in order to save us a little bit of time, I'm going to grab

46
00:03:06,440 --> 00:03:09,770
the imports and translate as I'm looking at the application.

47
00:03:10,990 --> 00:03:13,630
There's going to be some other times when I'm going to do that as well.

48
00:03:13,780 --> 00:03:16,730
So I'll go over the imports one by one.

49
00:03:16,750 --> 00:03:17,920
Where are they coming from?

50
00:03:18,130 --> 00:03:19,300
What's the purpose for them?

51
00:03:19,540 --> 00:03:25,210
But as far as typing them out, I think we're at the point where it's much more useful for us to spend

52
00:03:25,210 --> 00:03:31,750
time on a logic, not typing out the imports and fully understand that some people still complain regardless.

53
00:03:31,750 --> 00:03:37,330
But if this is the route that I'm going to take, so if there's going to be a component with tons of

54
00:03:37,330 --> 00:03:43,450
imports, yes, I will set up the imports in the lead me and then I'll just copy and paste when I'm

55
00:03:43,450 --> 00:03:45,010
about to set up the component.

56
00:03:45,550 --> 00:03:48,400
And once I'm done with my Rahmbo, let me go to the links.

57
00:03:48,460 --> 00:03:51,340
Just copy and paste and I'll set up data.

58
00:03:51,640 --> 00:03:54,700
So I'm going to go here with Konst and then links.

59
00:03:55,030 --> 00:03:56,250
Now that is equal to an all right.

60
00:03:56,260 --> 00:03:59,380
And like I said, each link will be that object.

61
00:03:59,740 --> 00:04:00,910
And we're going to go with it.

62
00:04:01,360 --> 00:04:03,280
And Marcus, I'm just going to hard code one.

63
00:04:03,700 --> 00:04:05,080
Then as far as the text one.

64
00:04:05,950 --> 00:04:07,240
Well, this is going to be the first one.

65
00:04:07,630 --> 00:04:09,670
And in my case, it's going to be a static one.

66
00:04:10,000 --> 00:04:15,130
So set up my text on set equal to stats and we want to go with path.

67
00:04:15,640 --> 00:04:18,620
And you're probably wondering, OK, well, why do we go with 4GB?

68
00:04:19,029 --> 00:04:21,880
Well, let's take a look at our Jess.

69
00:04:22,390 --> 00:04:23,710
What do you think is happening over here?

70
00:04:24,280 --> 00:04:28,840
So we have there out this is the path for the parent.

71
00:04:29,290 --> 00:04:31,780
And then we have all of these nested ones.

72
00:04:32,290 --> 00:04:32,650
Correct.

73
00:04:33,100 --> 00:04:34,750
So what happens with index?

74
00:04:35,320 --> 00:04:36,910
Well, that will be relative to this one.

75
00:04:37,390 --> 00:04:44,050
And then since the links will reference the pages that we have, essentially when I say forward slash,

76
00:04:44,470 --> 00:04:50,950
I mean my homepage now again, if this is going to be dashboard like I already previously mentioned,

77
00:04:51,250 --> 00:04:55,450
then of course, this link will also point to a dashboard.

78
00:04:55,870 --> 00:04:56,800
Hopefully that makes sense.

79
00:04:56,800 --> 00:05:03,280
So essentially when we go with this forward slash, since we are in this nested Rowland, that means

80
00:05:03,280 --> 00:05:09,880
that we're pointing to the parent wherever it is, whether that is Dashboard Blog's product or whatever.

81
00:05:10,190 --> 00:05:16,630
And then we want to add an icon so comma and an icon, and that will be equal to our React component.

82
00:05:17,020 --> 00:05:21,940
So we're going to go here with I o and then we'll get our icon.

83
00:05:22,340 --> 00:05:23,560
Let's say this one.

84
00:05:23,950 --> 00:05:29,950
And now what I want to do essentially is to copy and paste and just add different values, a copy and

85
00:05:29,950 --> 00:05:30,430
paste.

86
00:05:30,850 --> 00:05:32,950
And I believe there's going to be four of them.

87
00:05:32,950 --> 00:05:39,280
So I just add a comma just so I don't have some dumb typos, and I'll write a way, set up the exports

88
00:05:39,280 --> 00:05:40,330
or export default.

89
00:05:40,750 --> 00:05:42,700
And I'm looking for two links, of course.

90
00:05:43,150 --> 00:05:45,610
Then let's change the text first or no?

91
00:05:45,820 --> 00:05:47,590
Let's start with ideas that's going to be simpler.

92
00:05:47,610 --> 00:05:49,120
So one, two three four.

93
00:05:49,450 --> 00:05:55,990
Ryan, we want to go with all jobs, and I was going to be the texts of all jobs around this one will

94
00:05:55,990 --> 00:06:01,550
be equal to and know what I think I can like, actually start and remove them both.

95
00:06:02,140 --> 00:06:05,770
Then let's go here with ad jump.

96
00:06:06,380 --> 00:06:07,330
That's going to be the second one.

97
00:06:07,540 --> 00:06:11,240
And then the third one will be a profile, basically a fourth one.

98
00:06:11,240 --> 00:06:11,650
I'm sorry.

99
00:06:12,130 --> 00:06:15,070
And as far as the path, well, this one is the first.

100
00:06:15,460 --> 00:06:16,420
OK, that makes sense.

101
00:06:16,750 --> 00:06:24,040
That means that it will point in our case to the parent, which is our homepage correct now in here.

102
00:06:24,400 --> 00:06:25,330
Where do I want to go?

103
00:06:25,360 --> 00:06:27,670
Well, I want to go to you all.

104
00:06:28,090 --> 00:06:31,310
And then hyphen jobs y wants to go back to the app.

105
00:06:31,360 --> 00:06:31,720
Yes.

106
00:06:31,900 --> 00:06:34,730
What is the path for my all job throughout?

107
00:06:35,020 --> 00:06:37,780
It is all hyphen jobs, correct?

108
00:06:38,170 --> 00:06:41,260
So that's why we go here and we say all jobs.

109
00:06:41,740 --> 00:06:44,740
Now we also want to do the same thing with our job.

110
00:06:45,620 --> 00:06:49,520
And then lastly, we want to go with our profile as well.

111
00:06:49,580 --> 00:06:56,030
Now the last thing that we need to do is just to change the icons, and I purposely set the imports

112
00:06:56,030 --> 00:06:56,850
in the exact.

113
00:06:57,470 --> 00:06:58,610
So it's less confusing.

114
00:06:58,610 --> 00:07:02,810
So now we want to go with this one than this one and this one over here.

115
00:07:03,320 --> 00:07:06,890
So let me remove this sucker and this is going to be the case where I'll select.

116
00:07:06,890 --> 00:07:15,860
All of them are gone and we're going to go with Andy that I want to go with the FAA, one FAA and nine

117
00:07:15,980 --> 00:07:16,700
forms.

118
00:07:17,060 --> 00:07:23,440
And then lastly, it's also set up the profile one like so now I didn't set it up as a components or

119
00:07:23,450 --> 00:07:24,290
Mr. Diplomate.

120
00:07:24,950 --> 00:07:31,820
Now let me add proper syntax, and we're pretty much good to go once we have a list logic in place.

121
00:07:32,180 --> 00:07:36,110
Now we can start implementing those links in our sidebars.