1
00:00:01,110 --> 00:00:02,772
‫So, let's now build

2
00:00:02,772 --> 00:00:05,940
‫our overall application layout.

3
00:00:05,940 --> 00:00:08,850
‫And we're going to build it completely from scratch,

4
00:00:08,850 --> 00:00:11,280
‫and even write all the styles.

5
00:00:11,280 --> 00:00:13,773
‫And so, let's quickly get started.

6
00:00:15,900 --> 00:00:18,960
‫Now this app layout doesn't really belong

7
00:00:18,960 --> 00:00:21,240
‫into any of these features here,

8
00:00:21,240 --> 00:00:26,240
‫and so let's create the new component right here

9
00:00:26,280 --> 00:00:27,663
‫in the UI app folder.

10
00:00:30,150 --> 00:00:33,933
‫So AppLayout.jsx once again.

11
00:00:36,000 --> 00:00:37,290
‫And for now,

12
00:00:37,290 --> 00:00:41,850
‫let's just add some very bare bones content here,

13
00:00:41,850 --> 00:00:46,380
‫like APP LAYOUT like this,

14
00:00:46,380 --> 00:00:51,380
‫and then let's use this right here in our router definition.

15
00:00:52,020 --> 00:00:56,490
‫So, remember that the way we setup a layout route

16
00:00:56,490 --> 00:01:00,150
‫is by placing all the routes that should be rendered

17
00:01:00,150 --> 00:01:05,150
‫inside the layout as child routes of the layout route.

18
00:01:06,750 --> 00:01:11,280
‫So we have done that at least two times before I believe,

19
00:01:11,280 --> 00:01:14,103
‫and so this is nothing new, at this point.

20
00:01:15,150 --> 00:01:17,883
‫So basically, we just set up another route.

21
00:01:19,350 --> 00:01:24,083
‫And here, the element will be the app layout

22
00:01:25,020 --> 00:01:26,970
‫that we just created.

23
00:01:26,970 --> 00:01:30,930
‫And then here, instead of immediately closing the route,

24
00:01:30,930 --> 00:01:34,830
‫we will place, again, all the routes that should be rendered

25
00:01:34,830 --> 00:01:38,580
‫inside the layout, here inside the route.

26
00:01:38,580 --> 00:01:43,580
‫And those are all the routes, except these last two.

27
00:01:44,520 --> 00:01:48,030
‫So the login page will be a completely different page

28
00:01:48,030 --> 00:01:50,247
‫and will not be inside the layout.

29
00:01:50,247 --> 00:01:52,893
‫And the same here for page not found.

30
00:01:54,030 --> 00:01:58,710
‫So let's grab all of these, place them in here.

31
00:01:58,710 --> 00:02:03,150
‫And so then, immediately we get the APP LAYOUT text

32
00:02:03,150 --> 00:02:05,700
‫that we have right here.

33
00:02:05,700 --> 00:02:09,150
‫And now, do you remember how we actually display

34
00:02:09,150 --> 00:02:12,210
‫those child routes in here?

35
00:02:12,210 --> 00:02:15,684
‫So, right now for example, how do we actually make it

36
00:02:15,684 --> 00:02:19,740
‫so this account component will be rendered

37
00:02:19,740 --> 00:02:21,243
‫inside the layout?

38
00:02:22,230 --> 00:02:27,160
‫Well, for that we use again, the outlet component.

39
00:02:29,760 --> 00:02:31,803
‫And so, there it is.

40
00:02:32,970 --> 00:02:35,610
‫So all of this is basically the outlet,

41
00:02:35,610 --> 00:02:38,940
‫and in here is the paragraph that is always part

42
00:02:38,940 --> 00:02:40,530
‫of the account.

43
00:02:40,530 --> 00:02:43,530
‫So if we remove this, then we go to the dashboard.

44
00:02:43,530 --> 00:02:46,530
‫But of course, we still have everything around it

45
00:02:46,530 --> 00:02:48,150
‫from the layout.

46
00:02:48,150 --> 00:02:51,030
‫So in this case, only this paragraph.

47
00:02:51,030 --> 00:02:54,630
‫But if we go now to the login page,

48
00:02:54,630 --> 00:02:56,373
‫then that will be outside.

49
00:02:57,630 --> 00:02:59,970
‫So this one here has nothing to do

50
00:02:59,970 --> 00:03:01,980
‫with the app layout anymore,

51
00:03:01,980 --> 00:03:04,710
‫and that's because this is not a child route

52
00:03:04,710 --> 00:03:07,740
‫of our layout route here.

53
00:03:07,740 --> 00:03:10,650
‫And remember that this is called a layout route

54
00:03:10,650 --> 00:03:13,413
‫because it doesn't have the path prop.

55
00:03:14,640 --> 00:03:18,933
‫Okay, but now let's actually build this layout here.

56
00:03:20,040 --> 00:03:22,650
‫So for some reason, oh.

57
00:03:22,650 --> 00:03:25,170
‫So here, the app layout is back.

58
00:03:25,170 --> 00:03:28,740
‫So as I was saying, let's actually build this layout.

59
00:03:28,740 --> 00:03:31,530
‫And we are going to do a very classic

60
00:03:31,530 --> 00:03:35,520
‫web application layout with a sidebar on the left side,

61
00:03:35,520 --> 00:03:38,370
‫and then on the right side, we will have a header bar

62
00:03:38,370 --> 00:03:42,810
‫at the top, and below that, the content itself.

63
00:03:42,810 --> 00:03:47,010
‫So let's actually create some components for those.

64
00:03:47,010 --> 00:03:48,290
‫So we will have...

65
00:03:51,495 --> 00:03:52,353
‫The header,

66
00:03:53,460 --> 00:03:57,570
‫and we will have, also the sidebar here,

67
00:03:57,570 --> 00:03:59,220
‫as separate components.

68
00:03:59,220 --> 00:04:01,710
‫Because otherwise, our app layout

69
00:04:01,710 --> 00:04:04,740
‫would become a bit too big.

70
00:04:04,740 --> 00:04:08,433
‫So here, let's use an aside element.

71
00:04:09,540 --> 00:04:12,120
‫And here, for now, I will simply write,

72
00:04:12,120 --> 00:04:13,533
‫basically what they are.

73
00:04:17,430 --> 00:04:21,870
‫And here let's use the header, HTML element,

74
00:04:21,870 --> 00:04:24,813
‫and then let's bring them in here.

75
00:04:27,030 --> 00:04:29,193
‫So first, the sidebar, let's say.

76
00:04:30,900 --> 00:04:32,373
‫And then, the header.

77
00:04:33,690 --> 00:04:36,570
‫And actually, let's make it this way,

78
00:04:36,570 --> 00:04:38,163
‫and so there they are.

79
00:04:39,690 --> 00:04:43,200
‫All right, then next up, let's place this outlet

80
00:04:43,200 --> 00:04:47,253
‫inside like, a main component.

81
00:04:48,570 --> 00:04:52,080
‫And so, the reason for that is that then,

82
00:04:52,080 --> 00:04:55,830
‫we can have all these pages, basically with the same style.

83
00:04:55,830 --> 00:04:58,680
‫Because later we will style this element here,

84
00:04:58,680 --> 00:05:01,470
‫and then, whatever content is gonna come here

85
00:05:01,470 --> 00:05:05,190
‫from the pages, so which is going to be this,

86
00:05:05,190 --> 00:05:08,700
‫will simply be placed all inside the main.

87
00:05:08,700 --> 00:05:11,490
‫So that is the reason why, for example here,

88
00:05:11,490 --> 00:05:15,630
‫in the account component, we are returning this fragment,

89
00:05:15,630 --> 00:05:18,840
‫because we then want all of these elements here

90
00:05:18,840 --> 00:05:22,503
‫to be placed directly into the main element.

91
00:05:23,580 --> 00:05:26,973
‫So let's actually see that in action.

92
00:05:27,960 --> 00:05:32,100
‫So here, in our DOM, we have,

93
00:05:32,100 --> 00:05:34,227
‫so this one here is the app layout,

94
00:05:34,227 --> 00:05:36,780
‫and then we have header, aside, main,

95
00:05:36,780 --> 00:05:38,790
‫and then directly in the main,

96
00:05:38,790 --> 00:05:41,400
‫we have everything that is in there.

97
00:05:41,400 --> 00:05:45,030
‫While, if we then head here, another div,

98
00:05:45,030 --> 00:05:48,000
‫this might then mess up our styling.

99
00:05:48,000 --> 00:05:49,920
‫So then we would have main, and in there,

100
00:05:49,920 --> 00:05:54,303
‫just a div which doesn't really have like, any function.

101
00:05:55,260 --> 00:05:59,310
‫And so the rule is basically, to only return one element,

102
00:05:59,310 --> 00:06:02,523
‫or a fragment, so not a div.

103
00:06:03,540 --> 00:06:05,193
‫All right, so.

104
00:06:06,120 --> 00:06:09,180
‫Not really a hard rule, but it's just a convention

105
00:06:09,180 --> 00:06:11,100
‫that we create in this application

106
00:06:11,100 --> 00:06:13,860
‫to keep our styling consistent.

107
00:06:13,860 --> 00:06:18,120
‫All right, and now let's have some fun styling all of this.

108
00:06:18,120 --> 00:06:22,290
‫So we're going to use our knowledge about style components

109
00:06:22,290 --> 00:06:24,183
‫and format this stuff.

110
00:06:25,110 --> 00:06:28,050
‫So let's create a main component here,

111
00:06:28,050 --> 00:06:32,313
‫using styled.main.

112
00:06:34,200 --> 00:06:37,623
‫And so this will then replace this main, right here.

113
00:06:39,630 --> 00:06:43,470
‫So just to see initially, whenever we build some layouts,

114
00:06:43,470 --> 00:06:47,523
‫I always like to start by giving them some random colors.

115
00:06:48,570 --> 00:06:50,433
‫Let's also add some padding here.

116
00:06:51,360 --> 00:06:55,080
‫And so what I came up with while building this app

117
00:06:55,080 --> 00:06:59,613
‫for the first time, was this kind of padding right here.

118
00:07:01,830 --> 00:07:06,690
‫So four rem at the top, then 4.8 at left and right,

119
00:07:06,690 --> 00:07:09,630
‫and 6.4 at the bottom.

120
00:07:09,630 --> 00:07:13,950
‫And so, now we can replace this with this main,

121
00:07:13,950 --> 00:07:16,350
‫and beautiful.

122
00:07:16,350 --> 00:07:20,073
‫Well not literally, but it's beautiful that it worked.

123
00:07:21,360 --> 00:07:25,353
‫Next up, let's then style the header, and the sidebars.

124
00:07:29,070 --> 00:07:31,680
‫And so, what we're gonna do is this trick,

125
00:07:31,680 --> 00:07:34,530
‫or this convention that I mentioned earlier.

126
00:07:34,530 --> 00:07:38,580
‫So we're going to call this the styled header,

127
00:07:38,580 --> 00:07:40,113
‫because we cannot again,

128
00:07:41,160 --> 00:07:43,103
‫create a new component called header,

129
00:07:43,103 --> 00:07:45,510
‫because we already have that.

130
00:07:45,510 --> 00:07:48,780
‫So we call this one simply, StyledHeader.

131
00:07:48,780 --> 00:07:51,513
‫And so this will then be again, styled.

132
00:07:52,620 --> 00:07:56,643
‫And this time the header, HTML element.

133
00:07:58,170 --> 00:08:00,693
‫Again, starting with some background color,

134
00:08:03,660 --> 00:08:05,850
‫and some padding here,

135
00:08:05,850 --> 00:08:10,590
‫1.2 rem, and let's say 4.8 rem on the sides.

136
00:08:10,590 --> 00:08:14,760
‫And here, we will also place a very subtle border

137
00:08:14,760 --> 00:08:16,500
‫at the bottom.

138
00:08:16,500 --> 00:08:21,500
‫So one pixel solid, and then var color grey 100.

139
00:08:24,360 --> 00:08:27,420
‫So this one won't be really visible initially,

140
00:08:27,420 --> 00:08:30,873
‫but as we move all the colors, then we will see it.

141
00:08:32,100 --> 00:08:36,300
‫So StyledHeader right here, and then all we have to do

142
00:08:36,300 --> 00:08:39,570
‫is something similar in the sidebar.

143
00:08:39,570 --> 00:08:44,570
‫So const StyledSidebar is styled.aside.

144
00:08:48,000 --> 00:08:52,050
‫So again, repeating that HTML element,

145
00:08:52,050 --> 00:08:53,793
‫that we are about to replace,

146
00:08:55,470 --> 00:08:57,873
‫let's here, start with this blue color.

147
00:08:58,860 --> 00:09:00,633
‫Then again, some padding.

148
00:09:05,460 --> 00:09:09,600
‫And of course, if you were building this for the first time,

149
00:09:09,600 --> 00:09:13,713
‫then you would experiment around with these values.

150
00:09:15,330 --> 00:09:18,300
‫And then also, border-right, similar to the one

151
00:09:18,300 --> 00:09:19,950
‫that we had in the header.

152
00:09:19,950 --> 00:09:23,460
‫So one pixel solid, and then let's use

153
00:09:23,460 --> 00:09:28,023
‫our color gray 100 again.

154
00:09:30,150 --> 00:09:34,800
‫All right, let's place that here.

155
00:09:34,800 --> 00:09:39,390
‫And this color is not really visible,

156
00:09:39,390 --> 00:09:40,770
‫so that's a bit nicer.

157
00:09:40,770 --> 00:09:42,723
‫And here is our gray border.

158
00:09:44,190 --> 00:09:48,690
‫All right, but this doesn't really look like

159
00:09:48,690 --> 00:09:51,780
‫any kind of layout yet, right?

160
00:09:51,780 --> 00:09:54,150
‫And so, let's do what I said initially,

161
00:09:54,150 --> 00:09:56,850
‫which is to position this sidebar on the left,

162
00:09:56,850 --> 00:09:59,280
‫and then on the right, we will have the header

163
00:09:59,280 --> 00:10:01,320
‫and this main part.

164
00:10:01,320 --> 00:10:05,340
‫And so for that, we are going to use CSS grid.

165
00:10:05,340 --> 00:10:08,760
‫So, what we need to do is to basically style

166
00:10:08,760 --> 00:10:10,380
‫this element right here.

167
00:10:10,380 --> 00:10:13,623
‫So this is what's going to become the grid container.

168
00:10:14,550 --> 00:10:18,150
‫And so, once again, let's follow that convention

169
00:10:18,150 --> 00:10:19,143
‫of StyledAppLayout.

170
00:10:22,620 --> 00:10:24,423
‫So this is just a regular div.

171
00:10:28,350 --> 00:10:29,750
‫And so...

172
00:10:30,870 --> 00:10:35,870
‫Display, grid, which won't make any change yet.

173
00:10:36,570 --> 00:10:40,860
‫But let's also make the height of this 100 viewport heights,

174
00:10:40,860 --> 00:10:43,980
‫and then, well more importantly than that,

175
00:10:43,980 --> 00:10:48,980
‫let's define our grid template columns.

176
00:10:49,680 --> 00:10:51,183
‫So more like this.

177
00:10:52,230 --> 00:10:54,780
‫So, let's have the first column,

178
00:10:54,780 --> 00:10:57,750
‫which will contain the sidebar with a fixed width

179
00:10:57,750 --> 00:11:02,130
‫of 26 rem, and then the rest will be flexible.

180
00:11:02,130 --> 00:11:05,220
‫So just one fractional unit there.

181
00:11:05,220 --> 00:11:09,090
‫And so with this, we should see some change.

182
00:11:09,090 --> 00:11:11,463
‫At least after we actually apply it here.

183
00:11:14,370 --> 00:11:17,910
‫All right, so this is starting to look like something.

184
00:11:17,910 --> 00:11:21,030
‫I like just to make sure also,

185
00:11:21,030 --> 00:11:25,170
‫add our rows, and the first one should be basically,

186
00:11:25,170 --> 00:11:27,540
‫the size of the content itself.

187
00:11:27,540 --> 00:11:31,410
‫And then the rest, again, occupying the rest of the page.

188
00:11:31,410 --> 00:11:32,703
‫So one F-R.

189
00:11:34,410 --> 00:11:37,140
‫Cool, and so what we need to do next,

190
00:11:37,140 --> 00:11:42,140
‫is to just have this sidebar here, so this right here,

191
00:11:42,870 --> 00:11:46,590
‫actually span all the way from the first row

192
00:11:46,590 --> 00:11:48,090
‫to the last row.

193
00:11:48,090 --> 00:11:52,110
‫And so, let's come here, which is now a grid item.

194
00:11:52,110 --> 00:11:56,370
‫And so, on the grid item, we can say grid, row,

195
00:11:59,220 --> 00:12:01,380
‫not frid row.

196
00:12:01,380 --> 00:12:04,410
‫And then we want to span it from the first row,

197
00:12:04,410 --> 00:12:06,000
‫all the way to the last one.

198
00:12:06,000 --> 00:12:08,970
‫Which is always just called minus one.

199
00:12:08,970 --> 00:12:10,770
‫And there we go.

200
00:12:10,770 --> 00:12:14,553
‫This is exactly the layout that we were looking for.

201
00:12:15,840 --> 00:12:18,810
‫So this one keeps the fixed width.

202
00:12:18,810 --> 00:12:21,510
‫And then, as we change our page,

203
00:12:21,510 --> 00:12:23,283
‫then this side here expands.

204
00:12:26,070 --> 00:12:30,030
‫And so all of this, so these two parts right here,

205
00:12:30,030 --> 00:12:31,923
‫will always stay the same.

206
00:12:33,270 --> 00:12:35,940
‫So that's why they are part of the static layout,

207
00:12:35,940 --> 00:12:38,490
‫and this here is the outlet.

208
00:12:38,490 --> 00:12:42,150
‫And so now we can finally get rid of these colors,

209
00:12:42,150 --> 00:12:45,780
‫and use the actual colors that we want here.

210
00:12:45,780 --> 00:12:50,340
‫And so, that is going to be color, gray, zero,

211
00:12:50,340 --> 00:12:52,920
‫which is white at this point.

212
00:12:52,920 --> 00:12:56,640
‫But later, for dark mode, we will then have this color here

213
00:12:56,640 --> 00:12:58,290
‫being the darkest one.

214
00:12:58,290 --> 00:13:00,300
‫And therefore, we cannot just leave

215
00:13:00,300 --> 00:13:02,250
‫this background color off.

216
00:13:02,250 --> 00:13:04,980
‫So everything needs to have a background color,

217
00:13:04,980 --> 00:13:07,893
‫so that we can then invert the colors later.

218
00:13:08,940 --> 00:13:12,300
‫So basically, we will have the sidebar and the header

219
00:13:12,300 --> 00:13:14,760
‫as white, and then the main part here,

220
00:13:14,760 --> 00:13:17,610
‫we'll have a very, very subtle gray,

221
00:13:17,610 --> 00:13:21,060
‫which will give this whole application a really nice

222
00:13:21,060 --> 00:13:22,383
‫and modern touch.

223
00:13:23,970 --> 00:13:28,143
‫So let's just copy this, place the same thing in the header,

224
00:13:29,010 --> 00:13:33,330
‫just like this, so that's also the reason why we then have

225
00:13:33,330 --> 00:13:35,313
‫these very subtle borders here.

226
00:13:37,020 --> 00:13:38,120
‫So...

227
00:13:39,750 --> 00:13:40,650
‫Where is that?

228
00:13:40,650 --> 00:13:42,510
‫Ah, I already finished that.

229
00:13:42,510 --> 00:13:46,020
‫And so all we have to do, is to also do it in the main.

230
00:13:46,020 --> 00:13:49,920
‫But here, we want our color gray 50.

231
00:13:49,920 --> 00:13:53,853
‫So for that very subtle gray that I was talking about.

232
00:13:55,500 --> 00:13:59,070
‫So, this is starting to look like something.

233
00:13:59,070 --> 00:14:01,440
‫But of course, now what we're missing,

234
00:14:01,440 --> 00:14:04,830
‫is some links so that we can actually jump

235
00:14:04,830 --> 00:14:06,720
‫between the different pages.

236
00:14:06,720 --> 00:14:10,350
‫And so usually, those kinds of links are what appear

237
00:14:10,350 --> 00:14:12,690
‫here in an application sidebar.

238
00:14:12,690 --> 00:14:17,100
‫And so, in the next lecture, let's build our main navigation

239
00:14:17,100 --> 00:14:18,783
‫right here in the sidebar.