1 00:00:02,140 --> 00:00:03,980 We are making great progress. 2 00:00:03,980 --> 00:00:06,600 We now have this hamburger button up here, 3 00:00:06,600 --> 00:00:09,410 but what is missing is the side-drawer. 4 00:00:09,410 --> 00:00:12,850 So the menu that appears if I click onto this button. 5 00:00:12,850 --> 00:00:17,360 The clickable part, so if we click it, it appears, 6 00:00:17,360 --> 00:00:19,600 is something a bit more advanced. 7 00:00:19,600 --> 00:00:22,370 Therefore, we'll postpone this for the moment. 8 00:00:22,370 --> 00:00:23,360 In this lecture, 9 00:00:23,360 --> 00:00:26,800 I want to focus onto creating the side-drawer. 10 00:00:26,800 --> 00:00:31,370 So the idea is now that we create basically this look here. 11 00:00:31,370 --> 00:00:33,680 We can ignore the hamburger button for the moment. 12 00:00:33,680 --> 00:00:36,670 I just want to have these two navigation options here 13 00:00:36,670 --> 00:00:39,290 and this, well, grayish background. 14 00:00:39,290 --> 00:00:40,713 That's the side-drawer. 15 00:00:41,720 --> 00:00:44,450 Back in the code, how can we implement this? 16 00:00:44,450 --> 00:00:47,210 Well, probably in our HTML file first 17 00:00:47,210 --> 00:00:49,543 because we need some more HTML code. 18 00:00:50,500 --> 00:00:52,430 And if we think about where to position 19 00:00:52,430 --> 00:00:55,627 or where to create this side-drawer, then you could say, 20 00:00:55,627 --> 00:00:56,950 "Hey, it's part of the header 21 00:00:56,950 --> 00:00:59,340 because it contains the navigation items." 22 00:00:59,340 --> 00:01:01,300 But actually, that's not true. 23 00:01:01,300 --> 00:01:04,190 The side-drawer will basically become the main content 24 00:01:04,190 --> 00:01:06,673 of the page once the hamburger button is clicked, 25 00:01:07,570 --> 00:01:09,630 but it's also not the core content 26 00:01:09,630 --> 00:01:11,970 in a way that it's always displayed. 27 00:01:11,970 --> 00:01:14,490 It's just some side content you could say 28 00:01:14,490 --> 00:01:17,530 out of the actual context of the website. 29 00:01:17,530 --> 00:01:20,810 It's just a newly designed navigation bar 30 00:01:20,810 --> 00:01:22,663 for the mobile view, so to say. 31 00:01:23,500 --> 00:01:26,080 Therefore, I will add a new element 32 00:01:26,080 --> 00:01:28,620 between our header and the main part 33 00:01:28,620 --> 00:01:31,300 'cause it kind of sits in between, as I just explained. 34 00:01:31,300 --> 00:01:35,530 And for this, we can use the aside element in HTML, 35 00:01:35,530 --> 00:01:38,960 which is exactly made for such situations. 36 00:01:38,960 --> 00:01:42,390 Aside here will contain the side-drawer, 37 00:01:42,390 --> 00:01:44,780 therefore, I'll also add an ID to it 38 00:01:44,780 --> 00:01:47,370 to be able to style it more conveniently 39 00:01:47,370 --> 00:01:51,120 and this idea will also become more important later 40 00:01:51,120 --> 00:01:53,420 when we talk about the clickable feature 41 00:01:53,420 --> 00:01:54,960 of the hamburger button. 42 00:01:54,960 --> 00:01:55,793 But for the moment, 43 00:01:55,793 --> 00:01:59,633 I'll just add the ID of side-drawer to it. 44 00:02:00,830 --> 00:02:02,860 And inside our side-drawer, 45 00:02:02,860 --> 00:02:06,490 we now have to add the navigation items for the mobile view. 46 00:02:06,490 --> 00:02:09,600 So we again add a nav element right here. 47 00:02:09,600 --> 00:02:11,810 And in this nav element, 48 00:02:11,810 --> 00:02:15,070 we basically have the same structure that we have 49 00:02:15,070 --> 00:02:18,130 in the nav element for the normal navigation bar 50 00:02:18,130 --> 00:02:19,023 in the header. 51 00:02:20,200 --> 00:02:24,340 So we can just take the unordered list, right here, 52 00:02:24,340 --> 00:02:26,883 and paste it into the nav element. 53 00:02:28,850 --> 00:02:30,380 And keep in mind that currently, 54 00:02:30,380 --> 00:02:33,080 the nav bar is set to display: none. 55 00:02:33,080 --> 00:02:35,220 Therefore, we don't have this initial nav bar 56 00:02:35,220 --> 00:02:37,350 so in case you wonder why we have the code twice 57 00:02:37,350 --> 00:02:39,490 in here now, well, that's just due to the fact 58 00:02:39,490 --> 00:02:42,210 that we are talking about the mobile navigation right here 59 00:02:42,210 --> 00:02:44,363 and the desktop navigation up there. 60 00:02:45,550 --> 00:02:48,300 However, at the moment, the navigation bar is, 61 00:02:48,300 --> 00:02:50,310 well, kind of in the middle of nowhere. 62 00:02:50,310 --> 00:02:53,630 Therefore, we have to add some styling to it. 63 00:02:53,630 --> 00:02:56,483 For this, back in the styles.css file. 64 00:02:57,440 --> 00:03:00,430 We have to style our side-drawer, 65 00:03:00,430 --> 00:03:05,430 and I'll style it maybe here below our main-header selector. 66 00:03:06,120 --> 00:03:08,450 So actually, again, at the same position 67 00:03:08,450 --> 00:03:10,630 that we have in the HTML file. 68 00:03:10,630 --> 00:03:14,320 So there, I'll refer to the side-drawer ID 69 00:03:15,230 --> 00:03:16,563 that we just added. 70 00:03:18,120 --> 00:03:21,960 And here, well, what should the side-drawer look like now? 71 00:03:21,960 --> 00:03:25,760 Well, it should basically occupy the entire space available. 72 00:03:25,760 --> 00:03:29,480 As a first step, it should just be this grayish background 73 00:03:29,480 --> 00:03:31,160 with the two navigation items. 74 00:03:31,160 --> 00:03:32,130 That's all. 75 00:03:32,130 --> 00:03:34,180 Everything else that we have on the website 76 00:03:34,180 --> 00:03:35,603 should not be visible. 77 00:03:37,170 --> 00:03:41,710 Therefore, getting started with a width of 100% 78 00:03:43,120 --> 00:03:48,120 and also a height of 100% might not be the worst idea. 79 00:03:49,270 --> 00:03:52,610 Besides this, we should also add the background color to it. 80 00:03:52,610 --> 00:03:54,690 As I said, it should basically hide 81 00:03:54,690 --> 00:03:57,000 all the remaining content of the website, 82 00:03:57,000 --> 00:03:59,670 so we'll add the background-color property 83 00:03:59,670 --> 00:04:04,343 with an RGB code of 29, 26, and 27. 84 00:04:08,987 --> 00:04:13,740 Okay. With this in place, let's see what this looks like. 85 00:04:13,740 --> 00:04:17,490 Yeah, it looks okay, but not as intended. 86 00:04:17,490 --> 00:04:18,452 Do you know why? 87 00:04:19,680 --> 00:04:22,570 Well, because we have a normal block element here. 88 00:04:22,570 --> 00:04:25,630 We have the header, then the aside element, 89 00:04:25,630 --> 00:04:27,920 which we close here, and then the main element. 90 00:04:27,920 --> 00:04:30,640 So it kind of sits in between the header 91 00:04:30,640 --> 00:04:33,620 and the main element in the normal document flow. 92 00:04:33,620 --> 00:04:36,980 Still occupying the entire space it has 93 00:04:36,980 --> 00:04:38,840 as the element that it is, 94 00:04:38,840 --> 00:04:42,100 but it doesn't occupy the entire page. 95 00:04:42,100 --> 00:04:43,220 To achieve this, 96 00:04:43,220 --> 00:04:46,860 we have to change the elements position property. 97 00:04:46,860 --> 00:04:49,280 You might remember this from the earlier modules 98 00:04:49,280 --> 00:04:52,340 when we had deep situation that the background image 99 00:04:52,340 --> 00:04:54,770 should be kind of behind the header, 100 00:04:54,770 --> 00:04:58,470 this is also where we used the position: fixed 101 00:04:58,470 --> 00:05:00,580 or absolute value to take the element 102 00:05:00,580 --> 00:05:02,470 out of this document flow. 103 00:05:02,470 --> 00:05:04,200 That's exactly what we need right here. 104 00:05:04,200 --> 00:05:07,240 We can either go with position: fixed or absolute. 105 00:05:07,240 --> 00:05:10,280 I'll take position: fixed here to make the element 106 00:05:10,280 --> 00:05:13,380 really positioned relative to the viewport. 107 00:05:13,380 --> 00:05:16,500 So the visible area here in the browser. 108 00:05:16,500 --> 00:05:18,860 And with that, we should be able to create 109 00:05:18,860 --> 00:05:21,623 this overlay look of our side-drawer. 110 00:05:22,670 --> 00:05:25,820 With this, we can now go to the side-drawer selector 111 00:05:25,820 --> 00:05:30,820 once again and add the position: fixed property here. 112 00:05:31,120 --> 00:05:33,380 And, important to make sure 113 00:05:33,380 --> 00:05:35,490 it has the correct starting points, 114 00:05:35,490 --> 00:05:40,490 we add top: 0 as a first one and left: 0 as a second one. 115 00:05:42,090 --> 00:05:44,080 This simply means we take the document 116 00:05:44,080 --> 00:05:46,320 out of the flow with position: fixed, 117 00:05:46,320 --> 00:05:48,470 position it relative to the viewport, 118 00:05:48,470 --> 00:05:51,660 so the visible area of the page in the browser, 119 00:05:51,660 --> 00:05:54,610 to the top and to the left with no distance, 120 00:05:54,610 --> 00:05:56,410 and the occupied the entire space. 121 00:05:56,410 --> 00:05:59,113 So the entire width and the entire height. 122 00:06:00,090 --> 00:06:02,780 With this change in place, if we go back, 123 00:06:02,780 --> 00:06:05,240 you see that we have achieved our goal 124 00:06:05,240 --> 00:06:09,150 of kind of hiding the entire content of the page. 125 00:06:09,150 --> 00:06:12,480 We still don't have properly styled navigation items here, 126 00:06:12,480 --> 00:06:14,100 but that's just a minor issue. 127 00:06:14,100 --> 00:06:16,373 But generally, this looks good, I guess. 128 00:06:17,530 --> 00:06:20,500 Let's continue with styling these items still. 129 00:06:20,500 --> 00:06:24,370 So inside the element, we have to style the unordered list, 130 00:06:24,370 --> 00:06:28,120 the list items, and the anchor tags in here. 131 00:06:28,120 --> 00:06:31,800 So let's maybe get started with the general list-style here 132 00:06:31,800 --> 00:06:35,220 to, for example, remove this marker in the dev tools. 133 00:06:35,220 --> 00:06:39,240 For this, back in the code, I'll add a new selector. 134 00:06:39,240 --> 00:06:42,260 So I'll again refer to the side-drawer here 135 00:06:43,870 --> 00:06:45,973 and there to the unordered list, 136 00:06:47,020 --> 00:06:48,480 which contains the list items 137 00:06:48,480 --> 00:06:51,040 and the anchor tags, as we just saw it. 138 00:06:51,040 --> 00:06:55,230 We'll first remove the list-style and set it to none. 139 00:06:55,230 --> 00:06:58,690 And now, if you go back to the page quickly, 140 00:06:58,690 --> 00:07:02,270 you see that the problem is that the items are not centered. 141 00:07:02,270 --> 00:07:04,210 So they should be in the center of the page, 142 00:07:04,210 --> 00:07:05,970 basically right here somewhere. 143 00:07:05,970 --> 00:07:10,970 And we can again achieve this via flex box here easily 144 00:07:11,190 --> 00:07:14,180 because the unordered list here is a block element 145 00:07:14,180 --> 00:07:16,760 and it contains the entire page available. 146 00:07:16,760 --> 00:07:21,110 So if we turn the unordered list into a flex container, 147 00:07:21,110 --> 00:07:23,490 then we can use the justify-content 148 00:07:23,490 --> 00:07:25,520 and the align-items properties 149 00:07:25,520 --> 00:07:30,360 to center our flex items along the cross and main axis. 150 00:07:30,360 --> 00:07:34,600 And with this, we could easily achieve this centering here. 151 00:07:34,600 --> 00:07:38,400 With that, back in the code, we turned the unordered list 152 00:07:38,400 --> 00:07:41,683 into the flex container with display: flex. 153 00:07:44,240 --> 00:07:48,070 And as I said, we now use justify-content: center 154 00:07:49,750 --> 00:07:53,740 and align-items: center to center the items 155 00:07:53,740 --> 00:07:58,223 along the cross and main axis inside our flex container. 156 00:07:59,240 --> 00:08:01,940 Let's see if this worked. Yes, it did. 157 00:08:01,940 --> 00:08:03,850 One thing that not worked, though, 158 00:08:03,850 --> 00:08:08,850 we have the flex-direction of row still in place. 159 00:08:09,720 --> 00:08:11,900 This should be changed to column, of course, 160 00:08:11,900 --> 00:08:16,420 so let's go back and let's also change this, maybe up here. 161 00:08:16,420 --> 00:08:19,913 Let's say flex-direction should be column. 162 00:08:20,950 --> 00:08:24,470 Let's see. Yep. Now, this looks better. 163 00:08:24,470 --> 00:08:28,080 And actually, we can get rid of one of these two properties 164 00:08:28,080 --> 00:08:31,090 to be honest because with the flex-direction 165 00:08:31,090 --> 00:08:35,309 being set to column, align-items centers the elements, 166 00:08:35,309 --> 00:08:38,610 the flex items, along the cross axis, 167 00:08:38,610 --> 00:08:40,900 so left to right, in our case, 168 00:08:40,900 --> 00:08:42,610 which is what perfectly works. 169 00:08:42,610 --> 00:08:47,140 Justify-content centers the items along the main axis. 170 00:08:47,140 --> 00:08:50,820 So top to bottom here. So if I would unselect this, you see? 171 00:08:50,820 --> 00:08:52,980 It doesn't make any difference. 172 00:08:52,980 --> 00:08:56,160 Therefore, we can actually get rid of justify-content. 173 00:08:56,160 --> 00:08:57,070 We don't need this. 174 00:08:57,070 --> 00:08:58,140 At this point here, 175 00:08:58,140 --> 00:09:00,440 we want to keep our code as clean as possible. 176 00:09:00,440 --> 00:09:03,040 Therefore, it's better to remove this here. 177 00:09:03,040 --> 00:09:04,070 Besides this, 178 00:09:04,070 --> 00:09:07,760 I wanna add some minor default styling options, 179 00:09:07,760 --> 00:09:10,160 which we use throughout this course quite often. 180 00:09:10,160 --> 00:09:13,810 For example, removing the margin, any default margin, 181 00:09:13,810 --> 00:09:15,310 and setting it to zero. 182 00:09:15,310 --> 00:09:20,300 And I'll add some padding, top-bottom and left-right, 183 00:09:20,300 --> 00:09:22,970 to our unordered list to increase the space here, 184 00:09:22,970 --> 00:09:25,200 especially to the top of the page. 185 00:09:25,200 --> 00:09:30,200 For this, we'll add a padding of, let's say, 4rem. 186 00:09:30,570 --> 00:09:33,430 I'm again working with rem to make the page scalable. 187 00:09:33,430 --> 00:09:37,400 Top and bottom, maybe less like one rem left and right. 188 00:09:37,400 --> 00:09:38,233 Yep. 189 00:09:38,233 --> 00:09:39,540 Now it's pushed down a bit further 190 00:09:39,540 --> 00:09:41,870 and I think this looks better 191 00:09:41,870 --> 00:09:44,800 Now, we are almost done with the side-drawer. 192 00:09:44,800 --> 00:09:48,050 We only have to style our anchor tags here 193 00:09:48,050 --> 00:09:50,060 and maybe also add some space 194 00:09:50,060 --> 00:09:52,030 between the different list items. 195 00:09:52,030 --> 00:09:54,550 These are kind of closely positioned. 196 00:09:54,550 --> 00:09:58,380 Let's first work on the links itself. 197 00:09:58,380 --> 00:10:02,200 So we'll select the anchor tags 198 00:10:02,200 --> 00:10:06,700 inside our side-drawer like this. 199 00:10:06,700 --> 00:10:09,610 And there, I'll actually just change the color 200 00:10:09,610 --> 00:10:14,610 to an RGB value of 253, 239, 213. 201 00:10:23,260 --> 00:10:25,610 And we'll change the font size 202 00:10:25,610 --> 00:10:29,023 and increase it to 2rem right here. 203 00:10:29,930 --> 00:10:33,740 So let's see. Yeah, now it's a lot better readable. 204 00:10:33,740 --> 00:10:36,980 And, as I said, there was one more thing missing, 205 00:10:36,980 --> 00:10:39,800 and that's the space between these two list items, 206 00:10:39,800 --> 00:10:44,550 so let's also add some margin here to increase the space. 207 00:10:44,550 --> 00:10:46,690 For this, above the selector, 208 00:10:46,690 --> 00:10:51,170 I'll add the side-drawer selector once again. 209 00:10:51,170 --> 00:10:53,690 Now referring to the list items in here 210 00:10:54,530 --> 00:10:58,420 and there, we'll just add a margin of 1rem top and bottom, 211 00:10:58,420 --> 00:11:00,760 and for left to right, we don't need any margin here, 212 00:11:00,760 --> 00:11:03,780 as the items are positioned below each other. 213 00:11:03,780 --> 00:11:08,033 So let's see. Yeah, I think now, this looks good. 214 00:11:10,150 --> 00:11:14,580 We have created the side-drawer, but there is a big problem. 215 00:11:14,580 --> 00:11:17,400 Our, well, website is kind of lost. 216 00:11:17,400 --> 00:11:20,930 If we go to our nav element right here, 217 00:11:20,930 --> 00:11:23,490 we see it set to display: block. 218 00:11:23,490 --> 00:11:27,690 I could, of course, go into our side-drawer 219 00:11:27,690 --> 00:11:30,820 and change the position property from fixed 220 00:11:30,820 --> 00:11:33,960 to, well, nothing or even better, 221 00:11:33,960 --> 00:11:36,120 I could go to the element style up here, 222 00:11:36,120 --> 00:11:40,230 so I click right there and set it to display: none, right? 223 00:11:40,230 --> 00:11:43,540 This would bring back our initial page 224 00:11:43,540 --> 00:11:46,130 but it shouldn't work like this. 225 00:11:46,130 --> 00:11:49,720 We want to be able to click onto this hamburger icon 226 00:11:49,720 --> 00:11:51,660 and to then display the side-drawer. 227 00:11:51,660 --> 00:11:53,720 And if we click the icon once again, 228 00:11:53,720 --> 00:11:56,400 then the side-drawer should disappear. 229 00:11:56,400 --> 00:11:59,470 So this is the last step in this side-drawer part 230 00:11:59,470 --> 00:12:02,403 of the project so let's continue with this.