1
00:00:02,160 --> 00:00:06,250
So let's make sure we don't always see that mobile menu.

2
00:00:06,250 --> 00:00:09,660
And for this in my navigation CSS file,

3
00:00:09,660 --> 00:00:11,620
outside of the media query,

4
00:00:11,620 --> 00:00:15,280
when I define my mobile menu styles here,

5
00:00:15,280 --> 00:00:18,688
I actually don't want to set display to flex as a default,

6
00:00:18,688 --> 00:00:21,435
but to non as a default, because by default,

7
00:00:21,435 --> 00:00:24,730
no matter if it's a small or a big screen,

8
00:00:24,730 --> 00:00:26,850
it should not be visible.

9
00:00:26,850 --> 00:00:29,800
We only want to make it visible with browser site

10
00:00:29,800 --> 00:00:31,020
JavaScript.

11
00:00:31,020 --> 00:00:34,623
One stat button is clicked that hamburger button.

12
00:00:35,690 --> 00:00:39,010
So I'll set this to non here. And in addition,

13
00:00:39,010 --> 00:00:40,504
inside of the media query,

14
00:00:40,504 --> 00:00:45,504
we also have displayed on here on the mobile menu.

15
00:00:45,630 --> 00:00:50,090
The idea with data is that we always hide it when we are on

16
00:00:50,090 --> 00:00:52,840
a bigger screen, but we hide it by default,

17
00:00:52,840 --> 00:00:55,210
if we are on a smaller screen, but there,

18
00:00:55,210 --> 00:00:58,943
we will then add JavaScript to show it at some point.

19
00:00:59,930 --> 00:01:02,430
So with that, it's gone.

20
00:01:02,430 --> 00:01:05,640
Now we need to write JavaScript code for showing it when

21
00:01:05,640 --> 00:01:07,950
that button here is pressed.

22
00:01:07,950 --> 00:01:08,863
And for this,

23
00:01:08,863 --> 00:01:12,550
we can go into the public folder and actually add a script's

24
00:01:12,550 --> 00:01:17,420
sub folder for all the JavaScript code we write here.

25
00:01:17,420 --> 00:01:19,040
And at the moment we got no code yet,

26
00:01:19,040 --> 00:01:20,340
but that will soon change.

27
00:01:21,330 --> 00:01:25,100
And in here, I'll add a mobile JS file.

28
00:01:25,100 --> 00:01:28,437
Now, very important in case it shouldn't be clear.

29
00:01:28,437 --> 00:01:31,820
The scripts which we add here in the scripts folder in the

30
00:01:31,820 --> 00:01:36,330
public folder will be browser site JavaScript.

31
00:01:36,330 --> 00:01:40,370
This is not JavaScript code that runs on the server with

32
00:01:40,370 --> 00:01:41,560
node JS.

33
00:01:41,560 --> 00:01:44,655
This will be JavaScript code that runs in the browser code

34
00:01:44,655 --> 00:01:49,224
that we run to manipulate what we see on the screen.

35
00:01:49,224 --> 00:01:54,100
Now you wouldn't need Java script to open or close a mobile

36
00:01:54,100 --> 00:01:59,100
menu, as you learned in the responsive layouts core section

37
00:01:59,320 --> 00:02:02,600
earlier, but it is quite common to use JavaScript.

38
00:02:02,600 --> 00:02:03,490
And it's up to you,

39
00:02:03,490 --> 00:02:07,600
which approach you prefer here to also practice working with

40
00:02:07,600 --> 00:02:12,340
JavaScript. I will use Java script, but it's not a must use.

41
00:02:12,340 --> 00:02:15,263
As you learned in the responsive layouts section.

42
00:02:16,920 --> 00:02:19,110
Now in here in mobile JS,

43
00:02:19,110 --> 00:02:22,470
I wanted you one simple thing in the end.

44
00:02:22,470 --> 00:02:24,720
I want to add a click listener to this button.

45
00:02:24,720 --> 00:02:26,050
And if we click it,

46
00:02:26,050 --> 00:02:30,356
I want to change the display style off the mobile menu.

47
00:02:30,356 --> 00:02:32,899
Therefore you're in mobile JS.

48
00:02:32,899 --> 00:02:35,410
I will get access to the two elements.

49
00:02:35,410 --> 00:02:39,780
I'm interacting with the mobile menu button element,

50
00:02:39,780 --> 00:02:41,780
which is that button we click.

51
00:02:41,780 --> 00:02:44,584
And then they're offered the mobile menu itself.

52
00:02:44,584 --> 00:02:47,600
Now for the mobile menu button element.

53
00:02:47,600 --> 00:02:52,240
If we have a quick look at header EJS we of course see that

54
00:02:52,240 --> 00:02:55,280
this button has an idea of mobile menu button.

55
00:02:55,280 --> 00:02:57,850
So we can use that ID for selecting it.

56
00:02:57,850 --> 00:03:00,835
The mobile menu we'll have an ideal mobile menu,

57
00:03:00,835 --> 00:03:03,163
so we can always use that later.

58
00:03:04,230 --> 00:03:06,090
So let's start with the button.

59
00:03:06,090 --> 00:03:08,230
We can get hold of it with document,

60
00:03:08,230 --> 00:03:11,140
get element by ID as you learned,

61
00:03:11,140 --> 00:03:14,860
and then just pass the ID like this as a value,

62
00:03:14,860 --> 00:03:18,480
as a string to that, get the element by ID method.

63
00:03:18,480 --> 00:03:21,674
And that's a built in method that's provided by browser

64
00:03:21,674 --> 00:03:24,320
site, Java script.

65
00:03:24,320 --> 00:03:25,840
That's all is important.

66
00:03:25,840 --> 00:03:29,765
This would not be available in node JS because with this get

67
00:03:29,765 --> 00:03:33,960
element by ID method, we are interacting with the Dom.

68
00:03:33,960 --> 00:03:36,130
So this only works in the browser.

69
00:03:36,130 --> 00:03:39,420
It's one of the key differences between browser side and

70
00:03:39,420 --> 00:03:40,253
server side.

71
00:03:40,253 --> 00:03:44,070
JavaScript interacting with the Dom is only possible in the

72
00:03:44,070 --> 00:03:47,196
browser because you only have to Dom the page,

73
00:03:47,196 --> 00:03:50,960
the rendered and parsed HTML elements with which you want to

74
00:03:50,960 --> 00:03:52,033
interact there.

75
00:03:53,750 --> 00:03:55,120
Now, in addition,

76
00:03:55,120 --> 00:03:58,930
I will also get access to the mobile menu itself with

77
00:03:58,930 --> 00:04:02,363
document, get element by ID mobile menu,

78
00:04:03,740 --> 00:04:08,550
and then we want a function for toggling the mobile menu.

79
00:04:08,550 --> 00:04:12,120
So I will name it. Toggle mobile menu.

80
00:04:12,120 --> 00:04:13,680
Sounds like a fitting name for me,

81
00:04:13,680 --> 00:04:16,760
since it is a function that should show or hide it depending

82
00:04:16,760 --> 00:04:19,160
on whether it's currently visible or not.

83
00:04:19,160 --> 00:04:21,779
And then on the mobile menu button element.

84
00:04:21,779 --> 00:04:26,150
So this hamburger button in the navigation,

85
00:04:26,150 --> 00:04:29,499
I want to add an event listener so that we can run our own

86
00:04:29,499 --> 00:04:32,563
code. When a certain event occurs.

87
00:04:33,560 --> 00:04:36,320
Now, add event listener takes two parameter veil.

88
00:04:36,320 --> 00:04:40,970
Using the first value is a string that identifies the event

89
00:04:40,970 --> 00:04:43,650
for which we want to attach a listener. And in my case,

90
00:04:43,650 --> 00:04:46,860
that's a click event because I want to react to clicks on

91
00:04:46,860 --> 00:04:48,560
that button.

92
00:04:48,560 --> 00:04:51,410
Now there's a large list of built in events.

93
00:04:51,410 --> 00:04:52,960
You can listen to.

94
00:04:52,960 --> 00:04:55,850
We learned about that early in the course already,

95
00:04:55,850 --> 00:04:59,807
and here it's to click the second parameter value then is

96
00:04:59,807 --> 00:05:04,240
the function that should be executed when that event occurs.

97
00:05:04,240 --> 00:05:07,775
You can define an anonymous function here to define it just

98
00:05:07,775 --> 00:05:10,050
in time when it's needed. So to say,

99
00:05:10,050 --> 00:05:12,866
or you point at an existing function,

100
00:05:12,866 --> 00:05:15,070
which is what I'll do here.

101
00:05:15,070 --> 00:05:18,224
I'll point at the toggle mobile menu function and very

102
00:05:18,224 --> 00:05:21,759
important. You don't add parentheses here instead.

103
00:05:21,759 --> 00:05:23,920
You really, just to point at it,

104
00:05:23,920 --> 00:05:27,008
you just use its name so that it is not executed

105
00:05:27,008 --> 00:05:30,740
immediately. When this line of code here is parsed,

106
00:05:30,740 --> 00:05:33,922
but instead only when that click occurs so that the browser

107
00:05:33,922 --> 00:05:37,928
calls that function for us and executes that function for us

108
00:05:37,928 --> 00:05:39,913
when that click occurs.

109
00:05:41,160 --> 00:05:43,850
And then here in this function,

110
00:05:43,850 --> 00:05:47,226
we want to make sure that this mobile menu element is shown

111
00:05:47,226 --> 00:05:50,610
if it's currently hidden or that it's hidden.

112
00:05:50,610 --> 00:05:53,760
If it's currently shown and to achieve this,

113
00:05:53,760 --> 00:05:56,340
we can reach out to the mobile menu element.

114
00:05:56,340 --> 00:05:59,120
So to the element and there,

115
00:05:59,120 --> 00:06:01,290
we got various ways of achieving this.

116
00:06:01,290 --> 00:06:05,600
We could reuse the style property and then set display to

117
00:06:05,600 --> 00:06:09,180
block, for example, or to flex.

118
00:06:09,180 --> 00:06:11,270
And simply first of all, check,

119
00:06:11,270 --> 00:06:14,290
if it's currently non and then set it to flex,

120
00:06:14,290 --> 00:06:16,700
or if it is flex and then set it to non,

121
00:06:16,700 --> 00:06:18,930
that would be one way of doing it.

122
00:06:18,930 --> 00:06:21,830
But we can also use the built in class list,

123
00:06:21,830 --> 00:06:25,769
property and object that exists on all those Dom elements,

124
00:06:25,769 --> 00:06:30,769
which allows us to manage the CSS classes that are added,

125
00:06:31,290 --> 00:06:35,260
or that are a part of that element.

126
00:06:35,260 --> 00:06:36,093
And there,

127
00:06:36,093 --> 00:06:40,280
we gotta add method to add classes or a remove method to

128
00:06:40,280 --> 00:06:44,520
remove CSS classes, but here, most importantly, for us,

129
00:06:44,520 --> 00:06:47,150
we also got a toggle method,

130
00:06:47,150 --> 00:06:48,910
which does what the name implies.

131
00:06:48,910 --> 00:06:51,960
It's toggles a certain CSS class.

132
00:06:51,960 --> 00:06:55,510
So it adds it if it doesn't exist yet and removes it if a

133
00:06:55,510 --> 00:06:58,833
desk, which has exactly the behavior we want here.

134
00:07:00,040 --> 00:07:01,782
Now, here, we could name this class open.

135
00:07:01,782 --> 00:07:03,500
The name is up to you,

136
00:07:03,500 --> 00:07:06,400
and this would ensure that whenever this button is clicked,

137
00:07:06,400 --> 00:07:11,150
the open CSS class is either added or removed to,

138
00:07:11,150 --> 00:07:14,123
or from this mobile menu element.

139
00:07:15,720 --> 00:07:16,910
Now to see this in action,

140
00:07:16,910 --> 00:07:20,410
we have to make sure that mobile JS is being executed and

141
00:07:20,410 --> 00:07:25,410
deal for in head. EJS where we also set up our main styles.

142
00:07:25,950 --> 00:07:30,350
We can also now add a script tag,

143
00:07:30,350 --> 00:07:31,860
and I'm doing this here in head.

144
00:07:31,860 --> 00:07:36,410
EJS because this should apply to all my pages.

145
00:07:36,410 --> 00:07:37,310
And then here,

146
00:07:37,310 --> 00:07:40,088
I'm not going to add any JavaScript code between those

147
00:07:40,088 --> 00:07:41,750
script tacks,

148
00:07:41,750 --> 00:07:45,880
but instead we can add a SRC attribute to include an

149
00:07:45,880 --> 00:07:47,840
external file.

150
00:07:47,840 --> 00:07:48,800
And in this case,

151
00:07:48,800 --> 00:07:53,700
that's from scripts slash mobile JS the file we just worked

152
00:07:53,700 --> 00:07:55,340
on, which is in the scripts folder,

153
00:07:55,340 --> 00:07:57,180
which is in the public folder.

154
00:07:57,180 --> 00:07:59,240
And because it's in a public folder,

155
00:07:59,240 --> 00:08:01,184
it will be served statically,

156
00:08:01,184 --> 00:08:04,920
thanks to this static middleware,

157
00:08:04,920 --> 00:08:07,923
which we have in app JS here,

158
00:08:07,923 --> 00:08:10,890
we're serving the public folder aesthetically,

159
00:08:10,890 --> 00:08:13,470
and that's why we can load all the styles.

160
00:08:13,470 --> 00:08:15,993
That's why we can also load the script file.

161
00:08:16,860 --> 00:08:21,152
And we need that closing tag here is still unlike link

162
00:08:21,152 --> 00:08:25,470
script. Can't be avoid element as you learned,

163
00:08:25,470 --> 00:08:28,010
it needs to have an opening and a closing tag,

164
00:08:28,010 --> 00:08:29,707
even if there's nothing in between,

165
00:08:29,707 --> 00:08:32,440
that is just how it works.

166
00:08:32,440 --> 00:08:36,289
We now do set our source and we now add another attribute.

167
00:08:36,289 --> 00:08:38,309
And that's the defer attribute,

168
00:08:38,309 --> 00:08:42,789
which simply ensures that the script is only executed after

169
00:08:42,789 --> 00:08:46,090
the entire page content has been parsed.

170
00:08:46,090 --> 00:08:49,200
And this is important because inside of the script,

171
00:08:49,200 --> 00:08:53,890
we reach out to two different HTML elements.

172
00:08:53,890 --> 00:08:57,410
And that will only if the browser knows these elements

173
00:08:57,410 --> 00:08:58,243
already.

174
00:08:58,243 --> 00:09:00,930
And that only is the case after the entire page has been

175
00:09:00,930 --> 00:09:02,300
parsed.

176
00:09:02,300 --> 00:09:05,370
That's why we need to defer to make sure that the script

177
00:09:05,370 --> 00:09:09,860
doesn't execute too early with that. However,

178
00:09:09,860 --> 00:09:11,440
if we save everything,

179
00:09:11,440 --> 00:09:14,820
if we now reload and I click this button,

180
00:09:14,820 --> 00:09:16,900
you will notice that on this aside,

181
00:09:16,900 --> 00:09:21,440
this open class here is now there. And if I click again,

182
00:09:21,440 --> 00:09:22,860
it's removed.

183
00:09:22,860 --> 00:09:24,720
So this is being toggled here.

184
00:09:24,720 --> 00:09:28,600
As you can see on the right because of class lists, toggle,

185
00:09:28,600 --> 00:09:30,350
which is of course very convenient.

186
00:09:31,710 --> 00:09:34,690
Of course, the open class isn't doing anything yet though.

187
00:09:34,690 --> 00:09:37,580
And that's there for something we have to change in

188
00:09:37,580 --> 00:09:39,420
navigation, CSS.

189
00:09:39,420 --> 00:09:44,330
I'm going to add a new rule here in the main rules outside

190
00:09:44,330 --> 00:09:48,831
of the media query, I'm going to target mobile menu.open,

191
00:09:48,831 --> 00:09:53,500
and please note that there is no white space between mobile

192
00:09:53,500 --> 00:09:55,410
menu and open.

193
00:09:55,410 --> 00:09:58,747
This kind of selector means that I want to select all

194
00:09:58,747 --> 00:10:02,330
elements, which have an ideal of mobile menu.

195
00:10:02,330 --> 00:10:07,020
And at the same time, the open class added on them.

196
00:10:07,020 --> 00:10:11,440
So the same element must have this ID and the open class.

197
00:10:11,440 --> 00:10:15,460
And this is a condition that will be met by this mobile

198
00:10:15,460 --> 00:10:16,293
menu.

199
00:10:16,293 --> 00:10:20,170
If the open class was added because we click this button and

200
00:10:20,170 --> 00:10:22,970
only then in this case,

201
00:10:22,970 --> 00:10:25,720
I'll set this play to flex hour wise.

202
00:10:25,720 --> 00:10:28,033
We have this setting of display non.

203
00:10:29,760 --> 00:10:31,530
If we had a blank in between,

204
00:10:31,530 --> 00:10:33,170
then the rule would be different.

205
00:10:33,170 --> 00:10:35,010
Then this selector would say,

206
00:10:35,010 --> 00:10:39,310
please select all elements that have the open class that are

207
00:10:39,310 --> 00:10:43,450
descendants of an element with the mobile menu ID.

208
00:10:43,450 --> 00:10:45,240
And that's a totally different thing.

209
00:10:45,240 --> 00:10:48,350
We would be targeting child or descendant elements with

210
00:10:48,350 --> 00:10:49,260
that.

211
00:10:49,260 --> 00:10:51,940
I want to target the mobile menu itself.

212
00:10:51,940 --> 00:10:56,520
If it has the ID and this class on the same element.

213
00:10:56,520 --> 00:11:00,840
That's the key difference with that If we reload again,

214
00:11:00,840 --> 00:11:05,130
now we can toggle this mobile menu. When we click that,

215
00:11:05,130 --> 00:11:07,680
now we can't navigate to the different links because we

216
00:11:07,680 --> 00:11:09,530
haven't added this logic yet,

217
00:11:09,530 --> 00:11:13,710
but we can at least show or hide the mobile menu.

218
00:11:13,710 --> 00:11:14,697
And of course,

219
00:11:14,697 --> 00:11:18,700
we also got the working navigation on a desktop screen.

220
00:11:18,700 --> 00:11:22,483
Also, if we log out, this still works and looks good.

221
00:11:23,370 --> 00:11:24,910
So with that,

222
00:11:24,910 --> 00:11:29,030
we now got this added and now it is time to work on the

223
00:11:29,030 --> 00:11:32,730
administration area and to make sure that we can actually

224
00:11:32,730 --> 00:11:34,683
add and manage products.