fix mobile menu

js/burgerMenu.js

-let burgerMenu = document.querySelector("#burgerMenu");
-
-if(burgerMenu != null) {
-    burgerMenu.onclick = () => {
-        document.getElementById("burgerMenu").classList.toggle("change");
-        document.getElementById("mainMenuContainer").classList.toggle("visible");
-
-    }
-}
\ No newline at end of file

js/customElements/mainMenu.js

@@ -9,6 +9,23 @@ class MainMenu extends HTMLElement {
         let menuContainer = document.createElement("div");
         menuContainer.className = "mainMenuContainer";
 
+        let burgerMenu = document.createElement("div");
+        burgerMenu.id = "burgerMenu";
+
+        burgerMenu.onclick = () => {
+            document.getElementById("burgerMenu").classList.toggle("change");
+            document.querySelector(".mainMenuContainer").classList.toggle("visible");
+
+        }
+
+        for(let i = 1; i <= 3; i++) {
+            let bar = document.createElement("div");
+            bar.className = "bar" + i;
+            burgerMenu.appendChild(bar);
+        }
+        this.appendChild(burgerMenu);
+
+
         menu.forEach((element) => {
             if(element["type"] === "link"){
                 let a = document.createElement("a");

js/script.js

-require("./burgerMenu");
 require("./error");
 require("./imgPreview");
 require("./includeHTML");

scss/_menuMobile.scss

@@ -34,7 +34,7 @@
     display: inline-grid !important;
   }
 
-  #mainMenuContainer{
+  .mainMenuContainer{
     display: none;
 
     text-align: left;