All language subtitles for 140 Making the Mobile Navigation Work.en_US

Now it's time to finally make the mobile navigation work

and let's start by remembering how

the mobile navigation actually works.

So this one we don't need for now.

So it's here at the queries.

Alright.

Let's actually open this here on another side

and the same with the script.

Removing some space there and now down here,

I think it was in this media query

where we have the mobile navigation.

Right.

And so that mobile navigation is displayed

whenever the header has this nav-open class.

Remember that?

So let me copy this.

And then here we need to go back

to our responsive view basically.

So double clicking on inspect and now the header.

So I'm gonna paste now this class name hit enter

and then there is our navigation.

Now then when we want to close the navigation

we want to remove the class.

Alright.

And so now we will use JavaScript

to basically do this automatically.

Whenever this button here is clicked.

Alright.

And that's actually not that hard.

So let's add some comments here.

So set current year

and make mobile navigation work.

We already pasted that here

so that I can now copy paste this comment

just to give this file some easier to understand structure.

Okay.

And so just like before let's start

by selecting the elements that are relevant here.

So in our HTML let's move up here.

So to the navigation

so right here.

So when do we want a certain action to happen?

So in this case adding this class here,

so we always need to start by thinking about that.

So where we actually need to click

in order for something to happen.

And in this case that is this button right here, right?

So let's grab this class name here

and then select that

and again creating a new variable for that.

So let's call it a button for navigation

and then document dot query selector.

And then again our selector between these quotes

and it doesn't matter if single quotes or double quotes.

So the dot as always.

And yeah, so that is our button here.

And the lines always need to end here with the semi colon.

But I haven't been writing that because Prettier,

which is the extension that formats our HTML code

and or CSS does also format JavaScript.

Alright.

So this is one of our HTML elements that is relevant.

And the second one is the header, right?

Because that is where we will want to add this class.

And so let's go select that one as well.

So this one has the class of header.

So header let's again

actually call this L and this one as well

just to follow that same convention.

So document dot query selector

and then with the header class.

Okay.

And now we do just as we did before

right here using this function called add event listener.

So we want to listen for the click event now

on this button, right?

So button nav L dot add event listener

and then click.

And there are of course other events than clicking.

For example hovering or typing some key

on the keyboard or something like that.

Okay.

And then the second part here

of this advent listener function

is that we pass in our own function.

And so remember that here now goes the code

that we actually want to execute whenever

this click event happens on the button.

So what is that action that we want to take?

Well, we basically want to add this class here

to the header when it is not there

but if it is already there then we want to remove that.

And in JavaScript we can do that very easily

with just one line of code.

So we take our header and then since we want to work

with classes there is something called

the class list property.

So class list then dot again

and here from the vs code suggestions

you can see that we can use this one here to add classes.

We can use this one here to remove classes

but what we want to do actually is toggle.

Which is kind of adding and removing all at the same time.

So toggle and here now we're going to use

that nav-open class and that's it.

That's actually all we need.

So what toggle will do is it will look at this element here.

And if it does have this nav-open class

it will then not add it.

So if it's already there it will remove it.

But if it's not there then it will add it.

Okay.

And here I make sure to really just write

the name of the class but without the dot.

So not like this but really just the name of the class.

Okay, and that's actually it.

So let's check that and clicking here.

And indeed you see that now here is nav-open.

Beautiful.

Now I'm just seeing that the focus effect is here behind.

So we need to fix that a little bit

but the functionality here is already working so beautiful.

Really, really nice with just a couple

of lines of JavaScript.

We just made this happen so we can click here as many times

as we want and it will always just work.

But now what I was mentioning about the focus dates is

that maybe you can very faintly see it here

so that orange border here in the background.

And so the problem here is that we need to

actually make sure that this button here

is always on top of this navigation right here.

So of this element with the white background.

So let's do that and remember that exactly for that purpose

we have the Z index property.

So let's see where that is.

Ah right here.

So let's just set some very high value here.

Z index, let's say 1000.

So it doesn't really matter here.

Sometimes we even use something like this

just to show that we want to really use

some really, really high value here.

So let's, well, let's actually keep that here.

So that's kind of a convention that many people do and yeah.

And so there's no problem of us also using that.

But anyway now you see that

the focus date always stays on top,

which means that this button here is now

in fact also on top of all of this here.

Okay.

And just like this we made it work.

And so mission accomplished.