1
00:00:02,210 --> 00:00:05,939
We are almost done with our side drawer.

2
00:00:05,939 --> 00:00:08,920
The last thing that's missing now is second,

3
00:00:08,920 --> 00:00:11,360
the identical hamburger button we need,

4
00:00:11,360 --> 00:00:15,053
for the side drawer to bring us back to the initial page.

5
00:00:15,990 --> 00:00:20,070
For this, I'll go back to the code, into the HTML file,

6
00:00:20,070 --> 00:00:23,550
and first we'll bring up our aside element here,

7
00:00:23,550 --> 00:00:27,100
which we temporarily put to the bottom of the page.

8
00:00:27,100 --> 00:00:30,350
Well, we'll put it up back to its correct position.

9
00:00:30,350 --> 00:00:33,630
And this position was here below our header,

10
00:00:33,630 --> 00:00:35,400
our main header here.

11
00:00:35,400 --> 00:00:40,110
So the header displayed by default on the landing page.

12
00:00:40,110 --> 00:00:43,010
To be able to have a second hamburger button,

13
00:00:43,010 --> 00:00:44,840
when the side drawer is active,

14
00:00:44,840 --> 00:00:49,670
we can simply take our existing hamburger.

15
00:00:49,670 --> 00:00:52,250
This is this anchor tag in here, this link.

16
00:00:52,250 --> 00:00:53,640
Copy it.

17
00:00:53,640 --> 00:00:55,970
And now inside the aside element,

18
00:00:55,970 --> 00:00:58,620
which contains the entire side drawer,

19
00:00:58,620 --> 00:01:02,280
before the nav element, we'll add, well,

20
00:01:02,280 --> 00:01:06,010
a second header element right here, right?

21
00:01:06,010 --> 00:01:11,010
And this header now only contains our hamburger button.

22
00:01:12,540 --> 00:01:15,870
What we have to change here is the reference.

23
00:01:15,870 --> 00:01:18,800
This should not refer to the ID side drawer.

24
00:01:18,800 --> 00:01:21,790
Otherwise, well, we wouldn't jump back to the initial page,

25
00:01:21,790 --> 00:01:24,070
but we can just refer to this hash.

26
00:01:24,070 --> 00:01:26,300
As I showed you, this will redirect us

27
00:01:26,300 --> 00:01:28,200
to the top of the starting page

28
00:01:29,740 --> 00:01:32,173
if we click onto this hamburger button.

29
00:01:33,380 --> 00:01:36,510
With this, we added the button to our page.

30
00:01:36,510 --> 00:01:40,190
If we go back, if we click it,

31
00:01:40,190 --> 00:01:43,160
you see it's there already, positioned not correctly.

32
00:01:43,160 --> 00:01:46,683
But if we do that, let's see what happens, yeah,

33
00:01:48,050 --> 00:01:49,920
if we click, we go back.

34
00:01:49,920 --> 00:01:50,960
Check the page.

35
00:01:50,960 --> 00:01:52,610
Now we have this hashtag added.

36
00:01:52,610 --> 00:01:55,020
So we are back on the top of the landing page.

37
00:01:55,020 --> 00:01:58,890
If we click the hamburger button, we add the ID side drawer.

38
00:01:58,890 --> 00:02:02,130
So we are back in the side drawer menu, click it again.

39
00:02:02,130 --> 00:02:04,760
We are back in the default menu.

40
00:02:04,760 --> 00:02:06,780
This means this is working.

41
00:02:06,780 --> 00:02:08,970
What's not working here is the style

42
00:02:08,970 --> 00:02:12,580
of our hamburger button, but this is very easy.

43
00:02:12,580 --> 00:02:15,520
We actually only have to check our main header,

44
00:02:15,520 --> 00:02:18,630
our initial header to see what the style looked like.

45
00:02:18,630 --> 00:02:21,300
And with that, we should be able to implement this

46
00:02:21,300 --> 00:02:24,090
also for the new hamburger button.

47
00:02:24,090 --> 00:02:28,913
So let's go to the style CSS file and let's scroll up a bit.

48
00:02:31,980 --> 00:02:32,920
Here we are.

49
00:02:32,920 --> 00:02:34,310
That's the main header.

50
00:02:34,310 --> 00:02:37,493
Let's copy all the properties in here.

51
00:02:38,870 --> 00:02:42,870
Let's add the styling below our target.

52
00:02:42,870 --> 00:02:46,203
So we have to refer to the side drawer.

53
00:02:48,020 --> 00:02:49,610
Header first.

54
00:02:49,610 --> 00:02:52,610
And in there we can now paste our styles.

55
00:02:52,610 --> 00:02:55,630
We'll keep the hide property to make sure it's equal

56
00:02:55,630 --> 00:02:57,200
to the actual header.

57
00:02:57,200 --> 00:02:59,410
Display flex is all that required

58
00:02:59,410 --> 00:03:00,470
because this will help us

59
00:03:00,470 --> 00:03:02,120
to position the hamburger button

60
00:03:02,120 --> 00:03:04,750
correctly inside our header.

61
00:03:04,750 --> 00:03:08,600
Justify content space between will not be correct now

62
00:03:08,600 --> 00:03:12,670
because the button should be positioned

63
00:03:12,670 --> 00:03:15,240
to the right of our container.

64
00:03:15,240 --> 00:03:18,220
For this, we will add flex end right here,

65
00:03:18,220 --> 00:03:21,510
which will put it towards the end of our container.

66
00:03:21,510 --> 00:03:24,160
Align items to, well, position the items

67
00:03:24,160 --> 00:03:27,150
along the cross axis is all right.

68
00:03:27,150 --> 00:03:29,660
So it centers the hamburger button

69
00:03:29,660 --> 00:03:32,090
inside our flex container.

70
00:03:32,090 --> 00:03:35,470
Background color is not required as this is already there,

71
00:03:35,470 --> 00:03:38,483
and the padding should also be equal to the initial header.

72
00:03:39,470 --> 00:03:40,940
Let's see if this worked.

73
00:03:40,940 --> 00:03:43,940
If we go back, yeah, it looks good.

74
00:03:43,940 --> 00:03:45,460
Let's click it.

75
00:03:45,460 --> 00:03:49,620
Yeah, it looks exactly the same and it works perfectly.

76
00:03:49,620 --> 00:03:52,310
With this, we can also reduce the zoom level here

77
00:03:52,310 --> 00:03:54,940
of our page and now let's see.

78
00:03:54,940 --> 00:03:57,560
Yeah, we did it.

79
00:03:57,560 --> 00:04:01,833
We created a working side drawer and a hamburger button.

80
00:04:04,590 --> 00:04:08,180
And with this, we are also done with this module.

81
00:04:08,180 --> 00:04:10,050
Before I summarize what we learned though

82
00:04:10,050 --> 00:04:11,300
in the last lecture,

83
00:04:11,300 --> 00:04:14,820
there is one minor thing I would like to change here

84
00:04:14,820 --> 00:04:17,800
and we'll do this immediately in this lecture,

85
00:04:17,800 --> 00:04:22,720
because I think the distance here between our H two element

86
00:04:22,720 --> 00:04:26,810
inside the food item content container and the image above,

87
00:04:26,810 --> 00:04:28,580
well, I think this doesn't look too good.

88
00:04:28,580 --> 00:04:32,150
So we might add some margin to our H two element

89
00:04:32,150 --> 00:04:33,550
to tweak this quickly.

90
00:04:33,550 --> 00:04:36,740
Therefore we'll have to go to the food item content class

91
00:04:36,740 --> 00:04:39,330
and then to the H two element to change this.

92
00:04:39,330 --> 00:04:43,180
So let's go back, let's scroll down a bit here.

93
00:04:43,180 --> 00:04:44,780
Food item content.

94
00:04:44,780 --> 00:04:45,833
Here we are.

95
00:04:46,690 --> 00:04:49,920
Or actually not food item content, but food item here

96
00:04:49,920 --> 00:04:52,990
to be in line with the naming conventions

97
00:04:52,990 --> 00:04:55,540
and with the references we previously had.

98
00:04:55,540 --> 00:04:59,840
So let's refer to food item H two,

99
00:04:59,840 --> 00:05:02,950
and let's add some, or maybe bottom margin only,

100
00:05:02,950 --> 00:05:06,810
so we'll use zero top, zero right,

101
00:05:06,810 --> 00:05:11,810
maybe one REM for the bottom and zero for the left.

102
00:05:12,380 --> 00:05:15,590
So let's see, yeah, I think now this looks better.

103
00:05:15,590 --> 00:05:17,770
Now we can say that this page

104
00:05:17,770 --> 00:05:19,663
looks quite decent I would say.

105
00:05:20,770 --> 00:05:23,180
So with that, our page looks good.

106
00:05:23,180 --> 00:05:26,230
There is just one other tweak that we have to make

107
00:05:26,230 --> 00:05:27,720
that I just thought about,

108
00:05:27,720 --> 00:05:30,070
because if we increase the page width now,

109
00:05:30,070 --> 00:05:33,390
well, our button is visible all the time.

110
00:05:33,390 --> 00:05:35,730
That's not what it's supposed to be, of course.

111
00:05:35,730 --> 00:05:39,600
The button should only be displayed in the mobile view.

112
00:05:39,600 --> 00:05:42,300
For this, we have to go back to the code here

113
00:05:42,300 --> 00:05:47,300
and scroll up first to our menu button.

114
00:05:50,760 --> 00:05:54,310
So this one here, and set the display property

115
00:05:54,310 --> 00:05:56,470
to none by default.

116
00:05:56,470 --> 00:05:59,090
So now it should not be visible anymore.

117
00:05:59,090 --> 00:05:59,923
Yes.

118
00:06:00,870 --> 00:06:03,370
But we can now take the selector

119
00:06:04,390 --> 00:06:08,400
and go down to our media queries here,

120
00:06:08,400 --> 00:06:12,270
and there, maybe below the nav element,

121
00:06:12,270 --> 00:06:14,430
and add it maybe right here,

122
00:06:14,430 --> 00:06:19,060
and now set it to display important, not block, but flex,

123
00:06:19,060 --> 00:06:22,173
because we used it in a flex box context.

124
00:06:23,440 --> 00:06:25,100
With this, if we go back,

125
00:06:25,100 --> 00:06:27,870
you'll see that it is displayed in the mobile view.

126
00:06:27,870 --> 00:06:29,550
And if we enter the desktop view,

127
00:06:29,550 --> 00:06:31,763
the button is no longer visible.

128
00:06:32,940 --> 00:06:35,370
With this, our page looks really good,

129
00:06:35,370 --> 00:06:38,210
and now we can finally conclude what we learned

130
00:06:38,210 --> 00:06:40,443
in the last lecture of this module.