We are making great progress.
We now have this hamburger button up here,
but what is missing is the side-drawer.
So the menu that appears if I click onto this button.
The clickable part, so if we click it, it appears,
is something a bit more advanced.
Therefore, we'll postpone this for the moment.
In this lecture,
I want to focus onto creating the side-drawer.
So the idea is now that we create basically this look here.
We can ignore the hamburger button for the moment.
I just want to have these two navigation options here
and this, well, grayish background.
That's the side-drawer.
Back in the code, how can we implement this?
Well, probably in our HTML file first
because we need some more HTML code.
And if we think about where to position
or where to create this side-drawer, then you could say,
"Hey, it's part of the header
because it contains the navigation items."
But actually, that's not true.
The side-drawer will basically become the main content
of the page once the hamburger button is clicked,
but it's also not the core content
in a way that it's always displayed.
It's just some side content you could say
out of the actual context of the website.
It's just a newly designed navigation bar
for the mobile view, so to say.
Therefore, I will add a new element
between our header and the main part
'cause it kind of sits in between, as I just explained.
And for this, we can use the aside element in HTML,
which is exactly made for such situations.
Aside here will contain the side-drawer,
therefore, I'll also add an ID to it
to be able to style it more conveniently
and this idea will also become more important later
when we talk about the clickable feature
of the hamburger button.
But for the moment,
I'll just add the ID of side-drawer to it.
And inside our side-drawer,
we now have to add the navigation items for the mobile view.
So we again add a nav element right here.
And in this nav element,
we basically have the same structure that we have
in the nav element for the normal navigation bar
in the header.
So we can just take the unordered list, right here,
and paste it into the nav element.
And keep in mind that currently,
the nav bar is set to display: none.
Therefore, we don't have this initial nav bar
so in case you wonder why we have the code twice
in here now, well, that's just due to the fact
that we are talking about the mobile navigation right here
and the desktop navigation up there.
However, at the moment, the navigation bar is,
well, kind of in the middle of nowhere.
Therefore, we have to add some styling to it.
For this, back in the styles.css file.
We have to style our side-drawer,
and I'll style it maybe here below our main-header selector.
So actually, again, at the same position
that we have in the HTML file.
So there, I'll refer to the side-drawer ID
that we just added.
And here, well, what should the side-drawer look like now?
Well, it should basically occupy the entire space available.
As a first step, it should just be this grayish background
with the two navigation items.
That's all.
Everything else that we have on the website
should not be visible.
Therefore, getting started with a width of 100%
and also a height of 100% might not be the worst idea.
Besides this, we should also add the background color to it.
As I said, it should basically hide
all the remaining content of the website,
so we'll add the background-color property
with an RGB code of 29, 26, and 27.
Okay. With this in place, let's see what this looks like.
Yeah, it looks okay, but not as intended.
Do you know why?
Well, because we have a normal block element here.
We have the header, then the aside element,
which we close here, and then the main element.
So it kind of sits in between the header
and the main element in the normal document flow.
Still occupying the entire space it has
as the element that it is,
but it doesn't occupy the entire page.
To achieve this,
we have to change the elements position property.
You might remember this from the earlier modules
when we had deep situation that the background image
should be kind of behind the header,
this is also where we used the position: fixed
or absolute value to take the element
out of this document flow.
That's exactly what we need right here.
We can either go with position: fixed or absolute.
I'll take position: fixed here to make the element
really positioned relative to the viewport.
So the visible area here in the browser.
And with that, we should be able to create
this overlay look of our side-drawer.
With this, we can now go to the side-drawer selector
once again and add the position: fixed property here.
And, important to make sure
it has the correct starting points,
we add top: 0 as a first one and left: 0 as a second one.
This simply means we take the document
out of the flow with position: fixed,
position it relative to the viewport,
so the visible area of the page in the browser,
to the top and to the left with no distance,
and the occupied the entire space.
So the entire width and the entire height.
With this change in place, if we go back,
you see that we have achieved our goal
of kind of hiding the entire content of the page.
We still don't have properly styled navigation items here,
but that's just a minor issue.
But generally, this looks good, I guess.
Let's continue with styling these items still.
So inside the element, we have to style the unordered list,
the list items, and the anchor tags in here.
So let's maybe get started with the general list-style here
to, for example, remove this marker in the dev tools.
For this, back in the code, I'll add a new selector.
So I'll again refer to the side-drawer here
and there to the unordered list,
which contains the list items
and the anchor tags, as we just saw it.
We'll first remove the list-style and set it to none.
And now, if you go back to the page quickly,
you see that the problem is that the items are not centered.
So they should be in the center of the page,
basically right here somewhere.
And we can again achieve this via flex box here easily
because the unordered list here is a block element
and it contains the entire page available.
So if we turn the unordered list into a flex container,
then we can use the justify-content
and the align-items properties
to center our flex items along the cross and main axis.
And with this, we could easily achieve this centering here.
With that, back in the code, we turned the unordered list
into the flex container with display: flex.
And as I said, we now use justify-content: center
and align-items: center to center the items
along the cross and main axis inside our flex container.
Let's see if this worked. Yes, it did.
One thing that not worked, though,
we have the flex-direction of row still in place.
This should be changed to column, of course,
so let's go back and let's also change this, maybe up here.
Let's say flex-direction should be column.
Let's see. Yep. Now, this looks better.
And actually, we can get rid of one of these two properties
to be honest because with the flex-direction
being set to column, align-items centers the elements,
the flex items, along the cross axis,
so left to right, in our case,
which is what perfectly works.
Justify-content centers the items along the main axis.
So top to bottom here. So if I would unselect this, you see?
It doesn't make any difference.
Therefore, we can actually get rid of justify-content.
We don't need this.
At this point here,
we want to keep our code as clean as possible.
Therefore, it's better to remove this here.
Besides this,
I wanna add some minor default styling options,
which we use throughout this course quite often.
For example, removing the margin, any default margin,
and setting it to zero.
And I'll add some padding, top-bottom and left-right,
to our unordered list to increase the space here,
especially to the top of the page.
For this, we'll add a padding of, let's say, 4rem.
I'm again working with rem to make the page scalable.
Top and bottom, maybe less like one rem left and right.
Yep.
Now it's pushed down a bit further
and I think this looks better
Now, we are almost done with the side-drawer.
We only have to style our anchor tags here
and maybe also add some space
between the different list items.
These are kind of closely positioned.
Let's first work on the links itself.
So we'll select the anchor tags
inside our side-drawer like this.
And there, I'll actually just change the color
to an RGB value of 253, 239, 213.
And we'll change the font size
and increase it to 2rem right here.
So let's see. Yeah, now it's a lot better readable.
And, as I said, there was one more thing missing,
and that's the space between these two list items,
so let's also add some margin here to increase the space.
For this, above the selector,
I'll add the side-drawer selector once again.
Now referring to the list items in here
and there, we'll just add a margin of 1rem top and bottom,
and for left to right, we don't need any margin here,
as the items are positioned below each other.
So let's see. Yeah, I think now, this looks good.
We have created the side-drawer, but there is a big problem.
Our, well, website is kind of lost.
If we go to our nav element right here,
we see it set to display: block.
I could, of course, go into our side-drawer
and change the position property from fixed
to, well, nothing or even better,
I could go to the element style up here,
so I click right there and set it to display: none, right?
This would bring back our initial page
but it shouldn't work like this.
We want to be able to click onto this hamburger icon
and to then display the side-drawer.
And if we click the icon once again,
then the side-drawer should disappear.
So this is the last step in this side-drawer part
of the project so let's continue with this.