Newer
Older
"use strict";
const { images_url } = require("../../../constants");
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
const NAV_MENU_ITEMS = [
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
"/public/education/",
"Pédagogie",
[
// submenu
["/public/education/#game-studio-club", "Game Studio Club"],
["/public/education/#popularization", "Animations vulgarisation"],
],
],
];
class NavBar {
constructor() {
this.initEventHandlers();
}
handleBurgerClick() {
document.getElementById("nav-menu-list").classList.toggle("responsive-show");
}
initEventHandlers() {
window.addEventListener("click", event => {
if (
event.target.id !== "nav-menu-list" &&
!event.target.classList.contains("burger") &&
!event.target.parentNode.classList.contains("burger")
) {
document.getElementById("nav-menu-list").classList.remove("responsive-show");
}
});
}
renderHome() {
return {
tag: "div",
class: "home",
contents: [
{
tag: "a",
href: "/public/",
contents: [
{
tag: "img",
src: `${images_url}/${HOME_LOGO}`,
},
],
},
],
};
}
renderMenu(menuItemsArray, isSubmenu = false) {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
contents: [
{
tag: "a",
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
}
renderResponsiveBurger() {
return {
tag: "div",
class: "burger",
onclick: this.handleBurgerClick.bind(this),
contents: [{ tag: "span", contents: "···" }],
};
}
render() {
return {
tag: "nav",
contents: [
this.renderHome(),
this.renderResponsiveBurger(),
this.renderMenu(NAV_MENU_ITEMS),
],
};
}
}
module.exports = NavBar;