Added a menu for smaller screens (still not finished tho). Also, more

fixes.

scripts/main.js

@@ -1,5 +1,8 @@
 const theme_switcher = document.getElementById("theme-switcher");
 const imgs = document.getElementsByTagName("img");
+const sections_button = document.getElementById("sections-button");
+const sections_menu = document.getElementById("sections-menu");
+const main = document.getElementById("main");
 
 let theme = window.localStorage.getItem("theme");
 
@@ -48,6 +51,45 @@ function changeToLightTheme() {
   }
 }
 
-// DEBUG
+function closeMenu() {
+  sections_button.setAttribute("opened", "false");
+  sections_button.children[0].src = sections_button.children[0].src.replace(
+    "opened",
+    "closed",
+  );
+  sections_menu.style.display = "none";
+}
+
+function openMenu() {
+  sections_button.setAttribute("opened", "true");
+  sections_button.children[0].src = sections_button.children[0].src.replace(
+    "closed",
+    "opened",
+  );
+  sections_menu.style.display = "flex";
+  sections_menu.style.flexDirection = "column";
+}
+
+sections_button.addEventListener("click", () => {
+  if (sections_button.getAttribute("opened") === "false") {
+    openMenu();
+  } else {
+    closeMenu();
+  }
+});
+
+window.addEventListener("resize", () => {
+  if (sections_button.getAttribute("opened") === "true") {
+    closeMenu();
+  }
+});
+
+main.addEventListener("click", (event) => {
+  if (sections_button.getAttribute("opened") === "true") {
+    closeMenu();
+  }
+});
+
+DEBUG;
 console.log(window.innerWidth);
 console.log(window.innerHeight);