1
00:00:01,350 --> 00:00:02,250
‫All right.

2
00:00:02,250 --> 00:00:07,200
‫And so now to wrap up this section, let's build the sidebar

3
00:00:07,200 --> 00:00:10,713
‫and in particular the main app navigation.

4
00:00:12,270 --> 00:00:15,723
‫So both these components actually already exist,

5
00:00:16,860 --> 00:00:18,903
‫at least the styles for them.

6
00:00:21,090 --> 00:00:26,090
‫So let's import the logo here, enter the main nav components

7
00:00:29,400 --> 00:00:32,043
‫and let's bring them in.

8
00:00:33,330 --> 00:00:38,330
‫So logo from, and they are actually even in the same folder.

9
00:00:42,510 --> 00:00:47,510
‫So main nav from main nav like this.

10
00:00:50,280 --> 00:00:54,693
‫And now right here in this main nav,

11
00:00:55,710 --> 00:00:58,920
‫I already have these two styled components.

12
00:00:58,920 --> 00:01:01,500
‫So we have nav list and a link

13
00:01:01,500 --> 00:01:05,613
‫but we are not exporting any real component here yet.

14
00:01:06,810 --> 00:01:11,250
‫So we want to really export the main nav here,

15
00:01:11,250 --> 00:01:14,073
‫which will be a nav element.

16
00:01:15,510 --> 00:01:19,350
‫Let's just write that here and beautiful.

17
00:01:19,350 --> 00:01:22,440
‫Now for some reason, the image is already appearing,

18
00:01:22,440 --> 00:01:24,840
‫which I think it shouldn't

19
00:01:24,840 --> 00:01:28,170
‫because it is not even in the right place.

20
00:01:28,170 --> 00:01:29,640
‫So let's reload here.

21
00:01:29,640 --> 00:01:33,780
‫And so then we get the message that it hasn't been found,

22
00:01:33,780 --> 00:01:37,350
‫which is probably what you saw initially.

23
00:01:37,350 --> 00:01:42,003
‫So the reason for that is that here in the logo component,

24
00:01:43,410 --> 00:01:45,490
‫so let's also open that one.

25
00:01:45,490 --> 00:01:48,690
‫So here we are including this image.

26
00:01:48,690 --> 00:01:52,180
‫And so this image should live in the public folder

27
00:01:53,040 --> 00:01:56,335
‫but right now it's not because it is in the starter files

28
00:01:56,335 --> 00:02:00,810
‫that I provided and right here in this image folder.

29
00:02:00,810 --> 00:02:03,761
‫So please go ahead to your data folder.

30
00:02:03,761 --> 00:02:08,761
‫And then inside of image, let's grab these two images here

31
00:02:08,910 --> 00:02:11,493
‫and direct them into the public folder.

32
00:02:12,330 --> 00:02:15,573
‫So then image is empty and we no longer need that.

33
00:02:17,820 --> 00:02:20,760
‫And beautiful.

34
00:02:20,760 --> 00:02:24,480
‫So this is the Wild Oasis Hotel logo.

35
00:02:24,480 --> 00:02:27,990
‫And so like in most other web applications,

36
00:02:27,990 --> 00:02:31,650
‫we display that right here in the side bar.

37
00:02:31,650 --> 00:02:34,320
‫Great but now let's turn our attention

38
00:02:34,320 --> 00:02:38,583
‫to what actually matters, which is this main navigation.

39
00:02:39,690 --> 00:02:42,840
‫So usually we implement a navigation like this

40
00:02:42,840 --> 00:02:44,730
‫by using the nav element.

41
00:02:44,730 --> 00:02:47,940
‫And then in there an unordered list

42
00:02:47,940 --> 00:02:51,990
‫which will contain many list item elements.

43
00:02:51,990 --> 00:02:54,933
‫And then each of them will contain a link.

44
00:02:57,480 --> 00:03:01,740
‫All right, so let's check out what we already have here.

45
00:03:01,740 --> 00:03:04,320
‫So we already have this nav list

46
00:03:04,320 --> 00:03:08,193
‫which is an unordered list, and we already have the links.

47
00:03:11,160 --> 00:03:15,720
‫So let's replace this here with the nav list.

48
00:03:15,720 --> 00:03:20,140
‫And then here, let's actually use that link

49
00:03:20,140 --> 00:03:24,330
‫that we already have, at least temporarily.

50
00:03:24,330 --> 00:03:27,930
‫So since this is an A element, so an anchor

51
00:03:27,930 --> 00:03:31,950
‫it needs the eight rev prop

52
00:03:31,950 --> 00:03:35,280
‫and then the first link right here should go

53
00:03:35,280 --> 00:03:39,990
‫to the apps dashboard, all right.

54
00:03:39,990 --> 00:03:42,840
‫And then here, let's say home.

55
00:03:42,840 --> 00:03:45,723
‫'Cause this is essentially our homepage.

56
00:03:47,640 --> 00:03:49,380
‫So if we click here,

57
00:03:49,380 --> 00:03:52,530
‫then that actually causes a page navigation

58
00:03:52,530 --> 00:03:54,423
‫and it goes to the dashboard.

59
00:03:55,410 --> 00:03:58,830
‫So let's just do another one just so we see the problem

60
00:03:58,830 --> 00:03:59,663
‫with this.

61
00:04:04,505 --> 00:04:08,193
‫So let's go also to the bookings page.

62
00:04:12,120 --> 00:04:14,280
‫And so let's check this.

63
00:04:14,280 --> 00:04:15,753
‫So if I click here now,

64
00:04:17,160 --> 00:04:21,120
‫then notice how the entire page was actually reloaded,

65
00:04:21,120 --> 00:04:23,433
‫which we could see up here from the browser.

66
00:04:24,720 --> 00:04:28,500
‫So also there was now a flash of paint here on the screen.

67
00:04:28,500 --> 00:04:31,740
‫And so that's exactly what we do not want

68
00:04:31,740 --> 00:04:33,990
‫in a single page application.

69
00:04:33,990 --> 00:04:36,270
‫And so therefore, just like before,

70
00:04:36,270 --> 00:04:38,400
‫we need to actually use the link

71
00:04:38,400 --> 00:04:42,963
‫or the nav link component that is built into React Router.

72
00:04:44,820 --> 00:04:48,993
‫So here we actually want the nav link component

73
00:04:50,670 --> 00:04:55,670
‫that is provided again by React Router, as we can see here.

74
00:04:58,350 --> 00:05:01,053
‫And here, let's use the same one.

75
00:05:01,980 --> 00:05:05,370
‫And so for now, they will lose their styling

76
00:05:05,370 --> 00:05:07,890
‫but now they do work,

77
00:05:07,890 --> 00:05:11,670
‫or at least they will after we fix them.

78
00:05:11,670 --> 00:05:14,010
‫So here now we need the to prop

79
00:05:14,010 --> 00:05:18,450
‫but then afterwards we move between our pages very smoothly

80
00:05:18,450 --> 00:05:23,430
‫and without causing any page transitions, great.

81
00:05:23,430 --> 00:05:25,890
‫But now the problem is how do we actually

82
00:05:25,890 --> 00:05:28,306
‫style these nav link components?

83
00:05:28,306 --> 00:05:31,890
‫Because they are coming from a third party library

84
00:05:31,890 --> 00:05:35,370
‫but we still want to style them somehow.

85
00:05:35,370 --> 00:05:37,800
‫So how can we do that?

86
00:05:37,800 --> 00:05:40,110
‫How can we style these components

87
00:05:40,110 --> 00:05:42,213
‫that we didn't write ourselves?

88
00:05:43,170 --> 00:05:44,820
‫Well, luckily for us,

89
00:05:44,820 --> 00:05:49,050
‫we can use a nice trick with styled components.

90
00:05:49,050 --> 00:05:53,070
‫So instead of doing styles dot the HTML element,

91
00:05:53,070 --> 00:05:56,910
‫we can pass in basically some other component.

92
00:05:56,910 --> 00:05:59,250
‫And so as you can guess, here,

93
00:05:59,250 --> 00:06:02,733
‫we are going to pass in the nav link.

94
00:06:04,410 --> 00:06:09,410
‫And so let's call this one here, styled nav link.

95
00:06:10,410 --> 00:06:14,853
‫And then finally we will have our final solution here.

96
00:06:16,350 --> 00:06:18,600
‫So styled nav link.

97
00:06:18,600 --> 00:06:23,600
‫And immediately you see the change there and beautiful.

98
00:06:24,630 --> 00:06:27,630
‫So now it even marks the current one

99
00:06:27,630 --> 00:06:30,990
‫as the active link, right?

100
00:06:30,990 --> 00:06:34,110
‫And so if you want, you can of course go check out

101
00:06:34,110 --> 00:06:38,160
‫exactly the styles that I wrote here, but in a nutshell,

102
00:06:38,160 --> 00:06:42,240
‫remember that when we use the nav link component,

103
00:06:42,240 --> 00:06:46,650
‫then React Router will automatically place the active class

104
00:06:46,650 --> 00:06:50,073
‫on the link that is currently being active.

105
00:06:51,600 --> 00:06:55,230
‫Okay and so we style those here differently.

106
00:06:55,230 --> 00:06:58,650
‫And then here we also have stylings for SVG

107
00:06:58,650 --> 00:07:03,150
‫which brings us to my next point or to my next topic,

108
00:07:03,150 --> 00:07:06,300
‫which is that right here in these links,

109
00:07:06,300 --> 00:07:09,630
‫we also want some really nice icons.

110
00:07:09,630 --> 00:07:13,680
‫So that's something that is pretty common once again.

111
00:07:13,680 --> 00:07:18,680
‫And so let's bring in the React icons library.

112
00:07:18,810 --> 00:07:22,673
‫So NPM install React-icons.

113
00:07:26,130 --> 00:07:27,240
‫And then in the meantime,

114
00:07:27,240 --> 00:07:30,063
‫let's actually go check out the documentation here.

115
00:07:32,160 --> 00:07:34,644
‫So if you just Google React icons,

116
00:07:34,644 --> 00:07:39,243
‫it's probably going to be right, this first one here.

117
00:07:40,680 --> 00:07:44,730
‫And so what this library does is to basically import many,

118
00:07:44,730 --> 00:07:47,550
‫many popular icon sets.

119
00:07:47,550 --> 00:07:49,710
‫So we can check that out right here.

120
00:07:49,710 --> 00:07:53,100
‫And so here are all the icon sets that we can use

121
00:07:53,100 --> 00:07:55,860
‫with the React icons package.

122
00:07:55,860 --> 00:07:57,570
‫And the ones that we are going to use

123
00:07:57,570 --> 00:08:01,050
‫are the hero icons two, which again,

124
00:08:01,050 --> 00:08:03,483
‫are actually part of Tailwind.

125
00:08:04,980 --> 00:08:09,000
‫So here we can then see how this is going to work.

126
00:08:09,000 --> 00:08:12,690
‫So all we need to do in order to use one of these icons

127
00:08:12,690 --> 00:08:15,810
‫is to import the icon name that we see here

128
00:08:15,810 --> 00:08:20,810
‫from React icons/HI2, which stands for Hero icons two.

129
00:08:22,590 --> 00:08:24,360
‫So let's try that.

130
00:08:24,360 --> 00:08:28,070
‫Let's first copy this and then let's find ourselves

131
00:08:33,630 --> 00:08:35,733
‫an icon name for the home.

132
00:08:36,840 --> 00:08:40,020
‫So let's just control F here.

133
00:08:40,020 --> 00:08:44,347
‫So home, but let's actually look for an outline here.

134
00:08:45,930 --> 00:08:48,570
‫So exactly this one right here.

135
00:08:48,570 --> 00:08:52,113
‫And so if we click here, then it will even copy that.

136
00:08:53,160 --> 00:08:54,810
‫Then we paste that here.

137
00:08:54,810 --> 00:08:59,370
‫And now all we have to do is to place that right here

138
00:08:59,370 --> 00:09:00,960
‫in our code.

139
00:09:00,960 --> 00:09:05,960
‫So let's place it here close to the text.

140
00:09:06,330 --> 00:09:10,470
‫And so this is now just a regular component

141
00:09:10,470 --> 00:09:14,845
‫and all this will do is to just display that icon.

142
00:09:14,845 --> 00:09:19,845
‫So then let's also wrap that text in a span.

143
00:09:19,980 --> 00:09:21,240
‫And with this,

144
00:09:21,240 --> 00:09:26,240
‫we should have or, well, yeah, we should, but we don't.

145
00:09:27,720 --> 00:09:30,243
‫So I guess I forgot to import.

146
00:09:32,040 --> 00:09:34,650
‫Well, actually it is here.

147
00:09:34,650 --> 00:09:39,483
‫Let's try that manually and, nice, there it actually is.

148
00:09:41,190 --> 00:09:44,190
‫Okay and as we move to another one,

149
00:09:44,190 --> 00:09:47,460
‫then it fades out here to this nice gray color.

150
00:09:47,460 --> 00:09:51,600
‫And then as we hover, it again, becomes like this indigo.

151
00:09:51,600 --> 00:09:55,290
‫So like this blue color, which is our primary color.

152
00:09:55,290 --> 00:09:58,380
‫So really, really nice design, I think.

153
00:09:58,380 --> 00:10:01,020
‫And so well, let's just keep going

154
00:10:01,020 --> 00:10:03,693
‫and implement the entire thing here.

155
00:10:05,760 --> 00:10:08,430
‫So here, let's also add our icon.

156
00:10:08,430 --> 00:10:11,280
‫And of course, I already selected them

157
00:10:11,280 --> 00:10:13,977
‫and so I will just start typing here

158
00:10:13,977 --> 00:10:18,300
‫and then they will probably be automatically imported.

159
00:10:18,300 --> 00:10:21,873
‫So this one is called outline calendar days.

160
00:10:24,960 --> 00:10:29,280
‫And then let's again wrap this booking texture

161
00:10:29,280 --> 00:10:33,210
‫into its own span, yeah, nice.

162
00:10:33,210 --> 00:10:34,740
‫So this is starting to look

163
00:10:34,740 --> 00:10:37,533
‫like a real application, isn't it?

164
00:10:38,820 --> 00:10:41,073
‫So let's just duplicate this a few times.

165
00:10:42,510 --> 00:10:46,623
‫So next up, we have one page for our cabins.

166
00:10:47,910 --> 00:10:52,910
‫So here we are going to use that modern home

167
00:10:54,480 --> 00:10:55,653
‫that we saw earlier.

168
00:10:58,770 --> 00:11:02,250
‫Okay, let's keep going and two more.

169
00:11:02,250 --> 00:11:07,250
‫So next we want our users.

170
00:11:09,870 --> 00:11:13,180
‫So Hero icons, and then it's always outline

171
00:11:15,030 --> 00:11:17,883
‫and then user or actually users.

172
00:11:18,900 --> 00:11:22,590
‫So I guess I imported the wrong one, then,

173
00:11:22,590 --> 00:11:27,063
‫here from the top, there we go.

174
00:11:28,320 --> 00:11:31,530
‫So here, changing the text.

175
00:11:31,530 --> 00:11:35,703
‫And then finally, also a settings page.

176
00:11:40,230 --> 00:11:45,230
‫Let's use this one and then settings.

177
00:11:45,900 --> 00:11:50,900
‫Great, now remember how we actually have a few more pages

178
00:11:51,510 --> 00:11:52,920
‫and a few more routes

179
00:11:52,920 --> 00:11:55,920
‫But these, we don't want in the main navigation.

180
00:11:55,920 --> 00:12:00,660
‫For example, we have the accounts page here

181
00:12:00,660 --> 00:12:05,660
‫and so that will later be in the header, right?

182
00:12:06,150 --> 00:12:10,200
‫So this is looking really amazing here if you ask me.

183
00:12:10,200 --> 00:12:14,100
‫And so let's just to finish, add a bit of space there

184
00:12:14,100 --> 00:12:16,770
‫between the logo and that menu.

185
00:12:16,770 --> 00:12:19,983
‫So let's make this here, just a flex container.

186
00:12:22,200 --> 00:12:24,840
‫The flex direction should be column

187
00:12:24,840 --> 00:12:29,760
‫because then we can easily add a gap of 3.2 rem.

188
00:12:29,760 --> 00:12:33,180
‫And with this, we finished this sidebar here

189
00:12:33,180 --> 00:12:35,460
‫and we also finished this section

190
00:12:35,460 --> 00:12:38,160
‫because before we keep going any further

191
00:12:38,160 --> 00:12:41,430
‫in building out the application, we first need to deal

192
00:12:41,430 --> 00:12:43,110
‫with our data.

193
00:12:43,110 --> 00:12:46,770
‫And so next up, we will explore super base where

194
00:12:46,770 --> 00:12:50,490
‫we will be able to build a fully fledged API

195
00:12:50,490 --> 00:12:52,289
‫and store all our data.

196
00:12:52,289 --> 00:12:55,500
‫So that's going to be really, really exciting

197
00:12:55,500 --> 00:12:58,920
‫because that's gonna allow you to essentially,

198
00:12:58,920 --> 00:13:02,100
‫build full stack apps completely on your own.

199
00:13:02,100 --> 00:13:03,000
‫So completely,

200
00:13:03,000 --> 00:13:06,160
‫without knowing anything about back end development