1
00:00:00,270 --> 00:00:03,480
For once, we've got our reactor in place.

2
00:00:04,050 --> 00:00:11,370
I think I'm going to start on those components that will be displayed on every page so we've got no

3
00:00:11,950 --> 00:00:12,450
splitter.

4
00:00:12,690 --> 00:00:18,000
And also the sidebar now, when it comes to NAV Bar, we need to understand that there's going to be

5
00:00:18,000 --> 00:00:22,570
two layouts and I'll control them using access.

6
00:00:22,950 --> 00:00:29,070
So I have a big screen lamp where I'm going to have the logo, one of the links and also the card buttons.

7
00:00:29,490 --> 00:00:36,470
And then once we get to the smaller screen, this is not going to be done using the react, but essentially

8
00:00:36,480 --> 00:00:41,010
will have only the logo and and toggle button here.

9
00:00:41,200 --> 00:00:43,200
So that's going to be a small screen layout.

10
00:00:43,440 --> 00:00:47,520
And then once I click on a button, then I can see the sidebar.

11
00:00:47,820 --> 00:00:55,260
And the same is going to work on the sidebar where essentially will only see the sidebar once we get

12
00:00:55,260 --> 00:00:56,070
to the small screen.

13
00:00:56,100 --> 00:01:02,790
So now once I navigate to the big screen using siestas, I'll just hide it because notice because now

14
00:01:02,790 --> 00:01:05,310
I have the links and then the buttons.

15
00:01:05,310 --> 00:01:10,500
Hopefully that's clear where we have a small screen layout for number where there's going to be only

16
00:01:10,500 --> 00:01:12,160
logo and then the buttons.

17
00:01:12,170 --> 00:01:18,780
So once I click the button, I can see the sidebar and then once I get to the big screen, I'm not going

18
00:01:18,780 --> 00:01:21,000
to have the button to tackle the sidebar.

19
00:01:21,180 --> 00:01:23,480
And also sidebar will be hidden by default.

20
00:01:23,850 --> 00:01:27,660
And in here, I'm going to have my links as well as the card buttons.

21
00:01:27,910 --> 00:01:34,530
Now, these card buttons are going to be a separate component because I'll use them here in the sidebar

22
00:01:34,710 --> 00:01:35,480
as well.

23
00:01:36,300 --> 00:01:37,970
So let's set up our number.

24
00:01:38,340 --> 00:01:40,430
We're going to navigate back to our project.

25
00:01:40,440 --> 00:01:43,950
Of course, we're looking for NAV Baja's again.

26
00:01:44,250 --> 00:01:46,740
It is going to be in the components directory.

27
00:01:47,010 --> 00:01:51,180
I'll close all the files that I have currently open.

28
00:01:51,600 --> 00:01:52,860
So open the doors.

29
00:01:52,860 --> 00:01:53,910
I'm just going to close them.

30
00:01:54,150 --> 00:02:02,250
And in the source, we're looking for components and nav bar just so that our nav bar component, as

31
00:02:02,250 --> 00:02:05,040
you can see, we have quite a few imports.

32
00:02:05,190 --> 00:02:07,440
So of course we have the style notice here.

33
00:02:07,440 --> 00:02:12,150
I set up my styled component, which of course will use in a second.

34
00:02:12,390 --> 00:02:17,460
Now, in this case, I call this nav container just to showcase that you can call whatever you want,

35
00:02:17,460 --> 00:02:20,400
but in most cases it's going to be a wrapper.

36
00:02:20,700 --> 00:02:27,630
And as you can see, I'm returning and have like I said, we can return whatever HDMI element we would

37
00:02:27,630 --> 00:02:27,930
want.

38
00:02:28,260 --> 00:02:35,040
And as far as the logo, well, I'm just importing the image from the assets.

39
00:02:35,400 --> 00:02:42,450
And if I haven't covered this already during the course, if you want to render images and react, you

40
00:02:42,450 --> 00:02:48,720
can either do it using the URL like we have been doing from the API, where essentially we get some

41
00:02:48,720 --> 00:02:56,730
kind of URL that points back to the API or if you want displayed locally, then of course you need to

42
00:02:56,760 --> 00:02:58,080
set up that image.

43
00:02:58,320 --> 00:03:05,760
So in this case, I have assets folder in that assets folder I have Lowgar 3G and then we import now

44
00:03:05,760 --> 00:03:13,320
the Gotch about the import that the path has to be a full path, meaning we need to point to the directory,

45
00:03:13,470 --> 00:03:17,580
which is going to be assets, and then we have the full name.

46
00:03:17,580 --> 00:03:25,770
So we're going to go with a logo on the DOT SPG or for example, we have zero hyphen BCG and then dot

47
00:03:25,770 --> 00:03:26,480
jpeg.

48
00:03:26,880 --> 00:03:33,660
So effectively we need to include the file extension as well because remember, when it comes to Joska

49
00:03:33,660 --> 00:03:34,980
files, we really don't care.

50
00:03:35,250 --> 00:03:36,720
We just go with the file name.

51
00:03:36,720 --> 00:03:44,730
But when it comes to access as well as the images, we need to go the full path around where we go with

52
00:03:44,730 --> 00:03:46,440
the full name of the file.

53
00:03:46,680 --> 00:03:52,440
So in this case, it is a logo and then that Asaji then we need to give it some kind of name.

54
00:03:52,830 --> 00:03:58,740
So in my case, I went with logo and then of course I'll have to use it in my component.

55
00:03:58,980 --> 00:04:03,440
We have component I'm sorry, we have icon coming from reactor icons.

56
00:04:03,770 --> 00:04:07,290
This is just going to be that little toggle button icon.

57
00:04:07,530 --> 00:04:10,060
We have a link from reactor.

58
00:04:10,060 --> 00:04:12,590
Our done is, of course, will be setting up links.

59
00:04:12,930 --> 00:04:18,390
Then also we have links coming from the content and I'm going to cover that once we get there.

60
00:04:18,630 --> 00:04:25,050
And then, of course, the card buttons component that will work on in next video, because first I

61
00:04:25,090 --> 00:04:31,860
want to focus on setting up our number and then, of course, we have a few imports from global context

62
00:04:32,160 --> 00:04:36,750
that we're not going to cover at the moment, but we'll cover later once we get there.

63
00:04:37,020 --> 00:04:40,650
So I'll close the sidebar just so I have a bit more real estate.

64
00:04:40,950 --> 00:04:47,340
And in here we're going to go with Nerf container and inside of this nav container, what I would want

65
00:04:47,340 --> 00:04:52,500
is set up nav centre dev, so nav centre dev.

66
00:04:52,770 --> 00:04:58,980
And then inside of this div, I'm going to go with my header where I'm going to place my.

67
00:04:59,120 --> 00:05:01,830
Image as well as the bottom.

68
00:05:01,850 --> 00:05:08,830
So we're going to go here with knife header and inside of it I'm going to place my image on a button,

69
00:05:09,170 --> 00:05:17,590
not just to showcase that we can wrap our images and legs essentially and show you how to do that.

70
00:05:18,020 --> 00:05:23,480
So if I make this smaller, notice how I can click here and I'm navigating back to the homepage.

71
00:05:24,480 --> 00:05:26,480
So the reason why is that happening?

72
00:05:26,480 --> 00:05:29,960
Because I can just place my image inside of the link.

73
00:05:30,220 --> 00:05:35,300
And in order to do that, we simply need to go with our link component that we're getting from reactor

74
00:05:35,300 --> 00:05:35,510
down.

75
00:05:35,550 --> 00:05:38,810
Remember, that was the component that we have to use.

76
00:05:39,140 --> 00:05:41,150
And I'm just going to set up some kind of path.

77
00:05:41,300 --> 00:05:42,690
In my case, that is the homepage.

78
00:05:42,710 --> 00:05:43,830
That's why I go with forwards.

79
00:05:44,420 --> 00:05:45,890
And then we go with image.

80
00:05:45,890 --> 00:05:53,150
And remember, for the source now I need to use this variable name wherever you have it for the name.

81
00:05:53,180 --> 00:05:55,360
So in my case, of course, that is the logo.

82
00:05:55,640 --> 00:05:57,690
So I go with logo as far as the alternative.

83
00:05:57,710 --> 00:06:00,800
I'm just going to say comfy and sluff.

84
00:06:01,010 --> 00:06:04,540
And once I save, I should see my logo here.

85
00:06:04,910 --> 00:06:08,220
And of course, once I click, I can navigate to the homepage.

86
00:06:08,240 --> 00:06:12,950
But since of course we already are on the homepage, it's kind of hard to see that.

87
00:06:12,980 --> 00:06:14,660
So let's go to the products.

88
00:06:15,110 --> 00:06:16,900
We should still see the number.

89
00:06:17,270 --> 00:06:20,290
Correct, since my bar is displayed on all the pages.

90
00:06:20,300 --> 00:06:24,650
And then once we click, notice that we nicely navigate back to the homepage.

91
00:06:24,680 --> 00:06:25,160
Beautiful.

92
00:06:25,670 --> 00:06:31,880
And once we've got our link and I like I said, I'm going to go with Button and then we're going to

93
00:06:31,890 --> 00:06:35,590
add right away type button that's just necessary for the demo.

94
00:06:35,840 --> 00:06:39,340
We're going to go with class name and nav toggle.

95
00:06:39,470 --> 00:06:40,820
So that's the name of the class.

96
00:06:40,860 --> 00:06:46,850
And by the way, if you want to see the styling, just scroll down and notice this is the success that

97
00:06:46,850 --> 00:06:53,540
I used and this is the case where I use the next thing, because inside of this button I will place

98
00:06:53,540 --> 00:06:54,470
my icon.

99
00:06:55,190 --> 00:06:58,160
That icon comes as the SPG element.

100
00:06:58,460 --> 00:07:01,340
So I said, yeah, grab me the knife toggle.

101
00:07:01,520 --> 00:07:08,150
And then inside of that toggle I'm looking for the SPG again, something I covered already before,

102
00:07:08,150 --> 00:07:09,860
but I'm just reiterating.

103
00:07:09,870 --> 00:07:13,040
So we all are on the same page now.

104
00:07:13,050 --> 00:07:15,670
Eventually there's going to be unclick, but not for now.

105
00:07:15,680 --> 00:07:20,000
So we're going to go with F.A.A. because that's the icon I would want to place.

106
00:07:20,360 --> 00:07:27,250
And the moment I say, of course there is, I have my logo and of course I have my button as well.

107
00:07:27,830 --> 00:07:30,470
And next, of course, I would want to have those links.

108
00:07:30,650 --> 00:07:35,070
Now, I can tell right away that the links will be hidden if you scroll down a little bit.

109
00:07:35,090 --> 00:07:41,960
Notice how by default I had the links and then only once I got to nine hundred ninety two, then links

110
00:07:41,960 --> 00:07:46,740
are displayed, something I showed at the very beginning of the video.

111
00:07:46,940 --> 00:07:53,990
Now the gotcher here is, remember, technically, if I wanted to, I could do something like this where

112
00:07:53,990 --> 00:07:56,240
I still want to set it up within the center.

113
00:07:56,570 --> 00:08:01,220
So don't place it inside of Napster, but also don't push it outside of the center.

114
00:08:01,460 --> 00:08:05,930
I can go it on our list and we're going to go with NAV Links class.

115
00:08:06,110 --> 00:08:07,010
So that is important.

116
00:08:07,370 --> 00:08:13,610
And technically, yes, I can go with list item and then place all my links on one by one.

117
00:08:13,680 --> 00:08:16,690
But remember, it was somewhat of a bad practice.

118
00:08:17,030 --> 00:08:17,530
Why?

119
00:08:17,630 --> 00:08:19,900
Well, because we also have the number unlocked.

120
00:08:19,910 --> 00:08:21,050
And by the way, close this one.

121
00:08:21,260 --> 00:08:23,240
We also had the sidebar correct.

122
00:08:23,600 --> 00:08:28,880
And in the sidebar, I was essentially using the same Leung's, so it wouldn't make sense if we would

123
00:08:28,880 --> 00:08:34,280
set those links up in one place and then just important and of course, render them.

124
00:08:34,610 --> 00:08:41,810
And if I'm telling you that, cause I already set up those links in a separate place, so I would want

125
00:08:41,810 --> 00:08:47,240
you to navigate the utils and then look for constants Jayesh.

126
00:08:47,690 --> 00:08:51,320
And in here there's multiple things that I set up.

127
00:08:51,440 --> 00:08:52,730
One of them is services.

128
00:08:53,000 --> 00:08:56,420
The other one is the URLs that we're going to use.

129
00:08:56,690 --> 00:09:00,920
But the very first one is of the links component.

130
00:09:01,340 --> 00:09:06,020
And in that links component, all essentially it's an array, but I'm just going to call this component.

131
00:09:06,320 --> 00:09:11,990
And in that array, each link represents the page.

132
00:09:11,990 --> 00:09:12,350
Correct.

133
00:09:12,590 --> 00:09:15,770
And it is set up as an object in here.

134
00:09:15,770 --> 00:09:21,200
I have the idea since I will have the list, I'll have to use the Kiprop then the text that is going

135
00:09:21,200 --> 00:09:23,540
to be displayed, also the forward slash.

136
00:09:23,960 --> 00:09:30,770
So in your case, if you want to add more pages, I would suggest just adding those links in here.

137
00:09:31,070 --> 00:09:37,630
Now, there might be some issues eventually if you keep on adding more and more links with a sixth sense.

138
00:09:37,640 --> 00:09:44,210
In my case, when it comes to CCIS, I really thought that there's going to be only four eventually.

139
00:09:44,220 --> 00:09:45,920
There's also going to be a check out.

140
00:09:46,130 --> 00:09:48,500
But that's a story for another day.

141
00:09:49,160 --> 00:09:52,700
Just keep in mind that if you want to add more links, you can definitely do it.

142
00:09:52,970 --> 00:09:55,290
So I have my links exporting as links.

143
00:09:55,370 --> 00:09:57,230
So this is named export.

144
00:09:57,230 --> 00:09:58,600
And of course, in the of.

145
00:09:58,990 --> 00:10:05,590
And also in the sidebar, I import those links, I import that, all right, now what you also notice

146
00:10:05,590 --> 00:10:07,050
that there is no check out.

147
00:10:07,360 --> 00:10:10,490
So check will have to do it somewhat manually.

148
00:10:10,730 --> 00:10:17,530
Now, why we're doing manually because checkout will be only displayed if the user has logged in this

149
00:10:17,530 --> 00:10:23,650
case noticed the user hasn't logged in because it says log in and then I would need to log in in order

150
00:10:23,650 --> 00:10:24,820
to change it to the log.

151
00:10:25,090 --> 00:10:28,690
So once we log in, only then we can see the checkout.

152
00:10:29,110 --> 00:10:31,910
That's why I did not include in this.

153
00:10:31,930 --> 00:10:32,310
All right.

154
00:10:32,620 --> 00:10:34,290
So now let me close the sidebar.

155
00:10:34,300 --> 00:10:35,350
We have our links.

156
00:10:35,590 --> 00:10:42,730
And again, instead of setting up manually, I'm just going to iterate over my mom's links map online

157
00:10:42,730 --> 00:10:43,930
for every item.

158
00:10:44,450 --> 00:10:48,570
I'm just going to call this link, not going to be particularly original.

159
00:10:48,820 --> 00:10:54,340
And from the link, what I would want to get well, remember, it was an object and the properties were

160
00:10:54,370 --> 00:10:55,540
already taxed.

161
00:10:55,870 --> 00:10:59,820
And then the URL that is all coming from the link.

162
00:11:00,250 --> 00:11:03,220
And as far as the return, we're going to go with a list item.

163
00:11:03,610 --> 00:11:07,900
And remember, we have, of course, the list.

164
00:11:07,900 --> 00:11:10,860
So we need to have a Kiprop I'll pass in the area.

165
00:11:10,870 --> 00:11:12,550
That's going to be my unique value.

166
00:11:12,820 --> 00:11:20,440
And inside of this list item, we're going to go with a link and then, of course, we'll have to up

167
00:11:20,740 --> 00:11:22,720
and I will point to the URL.

168
00:11:23,140 --> 00:11:31,540
So where I would want to navigate and inside of this link, I would want to show my text so safe.

169
00:11:31,540 --> 00:11:33,980
And of course, now I should see my links.

170
00:11:34,000 --> 00:11:37,540
Now, keep in mind, we're not going to see them on a small screen.

171
00:11:37,930 --> 00:11:38,970
So let's navigate here.

172
00:11:39,910 --> 00:11:45,490
I have my hello, which, of course, is the error page, but instead I would want to go to the home

173
00:11:45,490 --> 00:11:46,330
page and there it is.

174
00:11:46,690 --> 00:11:50,430
Once we get to the big screen, of course, we can see the links.

175
00:11:50,770 --> 00:11:54,090
Now, while we're still on the small screen, I cannot see the links.

176
00:11:54,100 --> 00:11:56,060
And by the way, I'm massively zoom in.

177
00:11:56,110 --> 00:11:58,900
So, of course, if you go one hundred percent, you'll see them right away.

178
00:11:58,900 --> 00:12:01,960
But in my case, I'll have to make my screen size bigger.

179
00:12:02,170 --> 00:12:03,840
And they're just now I have my lunch.

180
00:12:03,840 --> 00:12:08,200
So now, of course, we can go to about page, product, page on page.

181
00:12:08,470 --> 00:12:12,190
And of course we can also use our logo from here.

182
00:12:12,190 --> 00:12:15,640
I click on a logo and I go back to the homepage.

183
00:12:16,150 --> 00:12:21,910
And then the last thing is going to be card buttons, which we're going to set up in the next video.

184
00:12:22,240 --> 00:12:25,270
So I have my list over here.

185
00:12:25,600 --> 00:12:31,420
And since I would want to display those card buttons in both places and by the way, I struggled here

186
00:12:31,420 --> 00:12:32,100
with the naming.

187
00:12:32,110 --> 00:12:34,300
I went with card buttons.

188
00:12:34,760 --> 00:12:39,010
Technically, it's a link and the second one is the button for the login.

189
00:12:39,310 --> 00:12:41,290
So I was struggling to come up with a name.

190
00:12:41,290 --> 00:12:47,650
So I just went with card buttons, just giving you a heads up where technically maybe you might come

191
00:12:47,650 --> 00:12:48,610
up with a better name.

192
00:12:48,610 --> 00:12:53,260
But just remember, if you change the name, then you need to use it in two places is going to be in

193
00:12:53,260 --> 00:12:56,340
the bar as well as the sidebar.

194
00:12:56,650 --> 00:13:02,320
So right after the on our list, I'm going to go with my card buttons.

195
00:13:02,830 --> 00:13:10,630
So my component, which again, we're not going to be able to eventually see once we set up properly

196
00:13:10,630 --> 00:13:12,910
discounts on the small screen, but.

197
00:13:13,740 --> 00:13:20,070
It's going to be displayed on a big screen here as far as the buttons, beautiful ones, everything

198
00:13:20,070 --> 00:13:22,830
is in place as far as the basic Narberth setup.

199
00:13:23,100 --> 00:13:27,210
I think now we can focus on the card button suckers.