The display property seems to be
one of the keys to achieve our logic
that if we click onto the button here,
that the sidebar appears, because in theory,
you could say in the default mobile view the side drawer,
so the side drawer ID,
and the corresponding elements
are set to display on.
If we click onto the hamburger icon, well,
then it's set to display block.
Then display on is no longer active
and we can see the actual side drawer.
This is our goal. But to achieve this goal,
we have to understand one or two more core concepts
For the first concept, I'm here on academy.com
our website in a tutorial article.
The content is not important at this stage.
It's not related to the basics of web development.
It's a bit more advanced, but in this article down here,
we have a table of contents.
And in this table of contents, we have clickable links.
Before I click onto one of these links, though,
please check the URL up here.
As you see,
the URL is acadmey.com tutorials.
And then the name of the article back there.
Now it's not an HTML file here,
but we could assume that this is the name of the HTML file
in our project to simplify things.
So as you see, it just ends with the name basically.
If I click onto this first link here now, though.
Then you see two things.
First, we jumped down on the page
to the corresponding section that
I just selected in the table of contents.
And if we, again, check our URL up here,
you'll see that now a hash,
and then the name of this part on the website was added.
It's actually an ID as we will see soon.
What happens here basically is that we have an internal link
created with an ID.
This means if I click onto this link,
we jump to the element,
which has the corresponding ID we defined right here.
So in the link up here, we said that, okay,
if I click you, please jump
to the following ID on this page.
And this element here with the corresponding content
has that ID applied.
So it's kind of an internal navigation
on the existing website.
How does this help us for our side drawer though?
It's step one towards the goal, to be honest,
but if we would be able in our project right here to click
onto the hamburger icon,
and then to jump towards the area of the website
where the side drawer is located well,
then this would be a great step
because thinking ahead, we could also say that if we
click onto the hamburger icon,
we jump to the area where the side drawer is positioned
and by default the side drawer is not visible.
But if I click onto the icon,
I jump to the side drawer and I also changed
the display property from none to block.
So that's where we're going to this
changing of the display property is another technique,
but let's first implement this logic that we jump to the
side drawer if we click onto the hamburger icon.
For this, let's go back to the code.
And in here, I want to change two things.
In the style CSS file, I'll temporarily
comment out the position fixed and top left zero
properties.
So the side drawer, if we load here looks like this.
And then
back in the index HTML file,
we'll go to the side drawer to be created.
So this aside element here and also temporarily,
let me cut this out,
we will paste this below the main section of our project.
So right here.
Saving this going back.
Well, the page would look like this.
And now I'll zoom in a bit here like this.
So for me, it's 150%.
It's just important that the side drawer is not visible
anymore because now we can implement this logic that if we
click the hamburger icon, we jump to
the side drawer on our existing page.
This logic that we just saw on academy.com.
So back in the code,
we see that the side drawer has the ID side draw already
here.
We added this.
So what we have to do now,
we have to go up to our hamburger button.
The button we created right here, this anchor tag.
And as a reference,
and now don't refer to any page or any external page.
I now simply add the ID of the element I want to jump to.
So here, the element would be
side drawer the ID of the element.
That's it.
So now by clicking onto this link,
we should hopefully jump to the element which has the ID
side drawer, and this is our side drawer in the end.
So let's go back and let's click onto the hamburger button,
and as you see we jumped down.
Of course, it's not at the top because our page ends here,
but it works.
Let's scroll up and click again.
I jumped down.
So this is how we can navigate to the side drawer.
Problem here, of course,
is that the side drawer is not at the right position
and that it's not occupying to enter a space
here at the moment.
This is something we have to tackle as a next step now.