We now have a connection between our button,
the button click to be more precise
and our side drawer.
Problem is that our final goal is not to
jump to the side drawer.
If we click onto the button,
we actually want to display the side drawer.
Only if we click the hamburger button.
The great thing is that we have
another pseudo selector,
which allows us to
exactly do this: the target pseudo selector.
The target pseudo selector checks
whether an ID is added to the URL.
And if you check all your URL at the moment here,
we have added the side drawer ID.
Did you see this?
This happened once we added
the hyper reference, the reference for our side drawer
here to the button.
If I delete this ID and load the page again,
you'll see it's the default URL.
But if I click the button,
the ID is added
and move to this target pseudo selector.
We can make sure that once our specified ID
is added to the URL, well,
certain CSS styles are applied.
In our case, this means we can set
our side drawer to display none by
default. So it's not visible by default,
but if this ID is added to the URL,
then we turn it to display block.
Now let's see how this works.
For this, we can leave the HTML part here
and go to our CSS file.
And in there, maybe below our
side drawer
selector,
will again at this side drawer selector,
but now a colon
and now target.
Like this.
This target selector now specifically checks
if this specific ID is added to the URL
in the browser.
Well, and if this is the case for us,
then we want to set the display property
of the side drawer to block, right?
And more importantly, by default.
So right here,
we want to set the display property for the
side drawer to none.
So let's see if this works.
Yeah, it doesn't work at the moment
because in the URL, we still have
the side drawer ID edit.
So let's remove this and press enter.
As you see it's removed now.
And if I click the hamburger button,
you see the side drawer,
which it's not a real side drawer here
at the moment, appears.
If we go back to the code
and now even coming back in our position,
fixed and top left, zero properties,
go back.
We see the full side drawer so we can remove
it from the URL once again, load the page again.
It's not here.
If you click the button it's there.
So this actually also works.
There is one big problem though. And for this,
let's maybe quickly put this
position fixed property away.
As you see, we cannot jump back at the moment.
We can only click the hamburger button
to jump down and to add the ID
to our URL but we don't find a way back.
Now you could have cross say,
if I put it back in,
we could somehow make the hamburger icon
visible here and click it to jump back.
But this won't work because the only
way to jump back is to
remove this part from the URL,
either like this,
or we can also add a hash here,
which would simply mean jump through the
top of the landing page,
which was also work here,
but we cannot use this existing
hamburger icon because once we click it,
it adds well side drawer ID right here.
Therefore, to finally finish the side drawer,
we have to add another header, the same header
basically as the default one,
but this one should not refer
to the ID side drawer,
but it would refer to the ID hash, for example,
to bring us back to the top of the landing page
and to make the side drawer, therefore disappear.