https://linorgoralik.com/js/applyTemplates.js

1document.addEventListener("DOMContentLoaded", function () {
2    const header = document.querySelector("header");
3    applyHeader(header);
4    drawMenu(header);
5    applyFooter();
6    const menuItems = document.querySelectorAll(".header_menu__item");
7    let activeMenuItem = null;
8    for (let i = 0; i < menuItems?.length; i++) {
9        menuItems[i].addEventListener("click", (e) => {
10            if (activeMenuItem !== null) {
11                menuItems[activeMenuItem].classList.remove("active");
12            }
13            if (activeMenuItem == i) {
14                activeMenuItem = null;
15            } else {
16                activeMenuItem = i;
17                menuItems[i].classList.add("active");
18            }
19        });
20    }
21    document.addEventListener("click", (e) => {
22        e.preventDefault;
23        if (
24            activeMenuItem !== null &&
25            menuItems[activeMenuItem].classList.contains("active") &&
26            e.target !== menuItems[activeMenuItem]
27        ) {
28            menuItems[activeMenuItem].classList.remove("active");
29            activeMenuItem = null;
30        }
31    });
32});
33
34const applyHeader = (header) => {
35    let headerTitle = {};
36    let templateFunc = Handlebars.compile(templateHeader);
37    let tempFromObj = templateFunc(headerTitle);
38    const headerName = document.createElement("div");
39    headerName.setAttribute("class", "header_name");
40    headerName.innerHTML = tempFromObj;
41    header.appendChild(headerName);
42};
43
44const getMenu = (dataset) => {
45    const mapTable = Object.create(null);
46    const menuTree = [];
47    dataset.forEach((item) => {
48        if (!item.parentId) mapTable[item.id] = { ...item, childNodes: [] };
49    });
50    dataset.forEach((item) => {
51        if (item.parentId && mapTable[item.parentId]) {
52            mapTable[item.parentId].childNodes.push(item);
53        } else if (!item.parentId) {
54            menuTree.push(mapTable[item.id]);
55        }
56    });
57    return menuTree;
58};
59
60const drawMenu = (header) => {
61    let menuData = getMenu(siteMap);
62    let templateFunc = Handlebars.compile(templateMenu);
63    let tempFromObj = templateFunc(menuData);
64    const headerMenu = document.createElement("ul");
65    headerMenu.setAttribute("class", "header_menu");
66    headerMenu.innerHTML = tempFromObj;
67    header.appendChild(headerMenu);
68};
69
70const applyFooter = () => {
71    let footerContent = {};
72    let templateFunc = Handlebars.compile(templateFooter);
73    let tempFromObj = templateFunc(footerContent);
74    const footer = document.querySelector("footer");
75    footer.innerHTML = tempFromObj;
76};