So let's make sure we don't always see that mobile menu.
And for this in my navigation CSS file,
outside of the media query,
when I define my mobile menu styles here,
I actually don't want to set display to flex as a default,
but to non as a default, because by default,
no matter if it's a small or a big screen,
it should not be visible.
We only want to make it visible with browser site
JavaScript.
One stat button is clicked that hamburger button.
So I'll set this to non here. And in addition,
inside of the media query,
we also have displayed on here on the mobile menu.
The idea with data is that we always hide it when we are on
a bigger screen, but we hide it by default,
if we are on a smaller screen, but there,
we will then add JavaScript to show it at some point.
So with that, it's gone.
Now we need to write JavaScript code for showing it when
that button here is pressed.
And for this,
we can go into the public folder and actually add a script's
sub folder for all the JavaScript code we write here.
And at the moment we got no code yet,
but that will soon change.
And in here, I'll add a mobile JS file.
Now, very important in case it shouldn't be clear.
The scripts which we add here in the scripts folder in the
public folder will be browser site JavaScript.
This is not JavaScript code that runs on the server with
node JS.
This will be JavaScript code that runs in the browser code
that we run to manipulate what we see on the screen.
Now you wouldn't need Java script to open or close a mobile
menu, as you learned in the responsive layouts core section
earlier, but it is quite common to use JavaScript.
And it's up to you,
which approach you prefer here to also practice working with
JavaScript. I will use Java script, but it's not a must use.
As you learned in the responsive layouts section.
Now in here in mobile JS,
I wanted you one simple thing in the end.
I want to add a click listener to this button.
And if we click it,
I want to change the display style off the mobile menu.
Therefore you're in mobile JS.
I will get access to the two elements.
I'm interacting with the mobile menu button element,
which is that button we click.
And then they're offered the mobile menu itself.
Now for the mobile menu button element.
If we have a quick look at header EJS we of course see that
this button has an idea of mobile menu button.
So we can use that ID for selecting it.
The mobile menu we'll have an ideal mobile menu,
so we can always use that later.
So let's start with the button.
We can get hold of it with document,
get element by ID as you learned,
and then just pass the ID like this as a value,
as a string to that, get the element by ID method.
And that's a built in method that's provided by browser
site, Java script.
That's all is important.
This would not be available in node JS because with this get
element by ID method, we are interacting with the Dom.
So this only works in the browser.
It's one of the key differences between browser side and
server side.
JavaScript interacting with the Dom is only possible in the
browser because you only have to Dom the page,
the rendered and parsed HTML elements with which you want to
interact there.
Now, in addition,
I will also get access to the mobile menu itself with
document, get element by ID mobile menu,
and then we want a function for toggling the mobile menu.
So I will name it. Toggle mobile menu.
Sounds like a fitting name for me,
since it is a function that should show or hide it depending
on whether it's currently visible or not.
And then on the mobile menu button element.
So this hamburger button in the navigation,
I want to add an event listener so that we can run our own
code. When a certain event occurs.
Now, add event listener takes two parameter veil.
Using the first value is a string that identifies the event
for which we want to attach a listener. And in my case,
that's a click event because I want to react to clicks on
that button.
Now there's a large list of built in events.
You can listen to.
We learned about that early in the course already,
and here it's to click the second parameter value then is
the function that should be executed when that event occurs.
You can define an anonymous function here to define it just
in time when it's needed. So to say,
or you point at an existing function,
which is what I'll do here.
I'll point at the toggle mobile menu function and very
important. You don't add parentheses here instead.
You really, just to point at it,
you just use its name so that it is not executed
immediately. When this line of code here is parsed,
but instead only when that click occurs so that the browser
calls that function for us and executes that function for us
when that click occurs.
And then here in this function,
we want to make sure that this mobile menu element is shown
if it's currently hidden or that it's hidden.
If it's currently shown and to achieve this,
we can reach out to the mobile menu element.
So to the element and there,
we got various ways of achieving this.
We could reuse the style property and then set display to
block, for example, or to flex.
And simply first of all, check,
if it's currently non and then set it to flex,
or if it is flex and then set it to non,
that would be one way of doing it.
But we can also use the built in class list,
property and object that exists on all those Dom elements,
which allows us to manage the CSS classes that are added,
or that are a part of that element.
And there,
we gotta add method to add classes or a remove method to
remove CSS classes, but here, most importantly, for us,
we also got a toggle method,
which does what the name implies.
It's toggles a certain CSS class.
So it adds it if it doesn't exist yet and removes it if a
desk, which has exactly the behavior we want here.
Now, here, we could name this class open.
The name is up to you,
and this would ensure that whenever this button is clicked,
the open CSS class is either added or removed to,
or from this mobile menu element.
Now to see this in action,
we have to make sure that mobile JS is being executed and
deal for in head. EJS where we also set up our main styles.
We can also now add a script tag,
and I'm doing this here in head.
EJS because this should apply to all my pages.
And then here,
I'm not going to add any JavaScript code between those
script tacks,
but instead we can add a SRC attribute to include an
external file.
And in this case,
that's from scripts slash mobile JS the file we just worked
on, which is in the scripts folder,
which is in the public folder.
And because it's in a public folder,
it will be served statically,
thanks to this static middleware,
which we have in app JS here,
we're serving the public folder aesthetically,
and that's why we can load all the styles.
That's why we can also load the script file.
And we need that closing tag here is still unlike link
script. Can't be avoid element as you learned,
it needs to have an opening and a closing tag,
even if there's nothing in between,
that is just how it works.
We now do set our source and we now add another attribute.
And that's the defer attribute,
which simply ensures that the script is only executed after
the entire page content has been parsed.
And this is important because inside of the script,
we reach out to two different HTML elements.
And that will only if the browser knows these elements
already.
And that only is the case after the entire page has been
parsed.
That's why we need to defer to make sure that the script
doesn't execute too early with that. However,
if we save everything,
if we now reload and I click this button,
you will notice that on this aside,
this open class here is now there. And if I click again,
it's removed.
So this is being toggled here.
As you can see on the right because of class lists, toggle,
which is of course very convenient.
Of course, the open class isn't doing anything yet though.
And that's there for something we have to change in
navigation, CSS.
I'm going to add a new rule here in the main rules outside
of the media query, I'm going to target mobile menu.open,
and please note that there is no white space between mobile
menu and open.
This kind of selector means that I want to select all
elements, which have an ideal of mobile menu.
And at the same time, the open class added on them.
So the same element must have this ID and the open class.
And this is a condition that will be met by this mobile
menu.
If the open class was added because we click this button and
only then in this case,
I'll set this play to flex hour wise.
We have this setting of display non.
If we had a blank in between,
then the rule would be different.
Then this selector would say,
please select all elements that have the open class that are
descendants of an element with the mobile menu ID.
And that's a totally different thing.
We would be targeting child or descendant elements with
that.
I want to target the mobile menu itself.
If it has the ID and this class on the same element.
That's the key difference with that If we reload again,
now we can toggle this mobile menu. When we click that,
now we can't navigate to the different links because we
haven't added this logic yet,
but we can at least show or hide the mobile menu.
And of course,
we also got the working navigation on a desktop screen.
Also, if we log out, this still works and looks good.
So with that,
we now got this added and now it is time to work on the
administration area and to make sure that we can actually
add and manage products.