We are almost done with our side drawer.
The last thing that's missing now is second,
the identical hamburger button we need,
for the side drawer to bring us back to the initial page.
For this, I'll go back to the code, into the HTML file,
and first we'll bring up our aside element here,
which we temporarily put to the bottom of the page.
Well, we'll put it up back to its correct position.
And this position was here below our header,
our main header here.
So the header displayed by default on the landing page.
To be able to have a second hamburger button,
when the side drawer is active,
we can simply take our existing hamburger.
This is this anchor tag in here, this link.
Copy it.
And now inside the aside element,
which contains the entire side drawer,
before the nav element, we'll add, well,
a second header element right here, right?
And this header now only contains our hamburger button.
What we have to change here is the reference.
This should not refer to the ID side drawer.
Otherwise, well, we wouldn't jump back to the initial page,
but we can just refer to this hash.
As I showed you, this will redirect us
to the top of the starting page
if we click onto this hamburger button.
With this, we added the button to our page.
If we go back, if we click it,
you see it's there already, positioned not correctly.
But if we do that, let's see what happens, yeah,
if we click, we go back.
Check the page.
Now we have this hashtag added.
So we are back on the top of the landing page.
If we click the hamburger button, we add the ID side drawer.
So we are back in the side drawer menu, click it again.
We are back in the default menu.
This means this is working.
What's not working here is the style
of our hamburger button, but this is very easy.
We actually only have to check our main header,
our initial header to see what the style looked like.
And with that, we should be able to implement this
also for the new hamburger button.
So let's go to the style CSS file and let's scroll up a bit.
Here we are.
That's the main header.
Let's copy all the properties in here.
Let's add the styling below our target.
So we have to refer to the side drawer.
Header first.
And in there we can now paste our styles.
We'll keep the hide property to make sure it's equal
to the actual header.
Display flex is all that required
because this will help us
to position the hamburger button
correctly inside our header.
Justify content space between will not be correct now
because the button should be positioned
to the right of our container.
For this, we will add flex end right here,
which will put it towards the end of our container.
Align items to, well, position the items
along the cross axis is all right.
So it centers the hamburger button
inside our flex container.
Background color is not required as this is already there,
and the padding should also be equal to the initial header.
Let's see if this worked.
If we go back, yeah, it looks good.
Let's click it.
Yeah, it looks exactly the same and it works perfectly.
With this, we can also reduce the zoom level here
of our page and now let's see.
Yeah, we did it.
We created a working side drawer and a hamburger button.
And with this, we are also done with this module.
Before I summarize what we learned though
in the last lecture,
there is one minor thing I would like to change here
and we'll do this immediately in this lecture,
because I think the distance here between our H two element
inside the food item content container and the image above,
well, I think this doesn't look too good.
So we might add some margin to our H two element
to tweak this quickly.
Therefore we'll have to go to the food item content class
and then to the H two element to change this.
So let's go back, let's scroll down a bit here.
Food item content.
Here we are.
Or actually not food item content, but food item here
to be in line with the naming conventions
and with the references we previously had.
So let's refer to food item H two,
and let's add some, or maybe bottom margin only,
so we'll use zero top, zero right,
maybe one REM for the bottom and zero for the left.
So let's see, yeah, I think now this looks better.
Now we can say that this page
looks quite decent I would say.
So with that, our page looks good.
There is just one other tweak that we have to make
that I just thought about,
because if we increase the page width now,
well, our button is visible all the time.
That's not what it's supposed to be, of course.
The button should only be displayed in the mobile view.
For this, we have to go back to the code here
and scroll up first to our menu button.
So this one here, and set the display property
to none by default.
So now it should not be visible anymore.
Yes.
But we can now take the selector
and go down to our media queries here,
and there, maybe below the nav element,
and add it maybe right here,
and now set it to display important, not block, but flex,
because we used it in a flex box context.
With this, if we go back,
you'll see that it is displayed in the mobile view.
And if we enter the desktop view,
the button is no longer visible.
With this, our page looks really good,
and now we can finally conclude what we learned
in the last lecture of this module.