menu modes presque ok

background.js

@@ -28,12 +28,14 @@ grained('#grain-bg', {
 
 let pageAmount = 0;
 let currentPage = 1, prevPage;
+let currentProfondeur = "atlas";
 
 document.querySelectorAll('.mode').forEach(function(node, index) {
     pageAmount++;
     node.addEventListener('click', function() {
         document.querySelectorAll('.active').forEach(function(el) {
-            el.classList.remove('active'); 
+            el.classList.remove('active');
+            if (currentProfondeur == "carte") { el.classList.add('collapsed'); }
         });
         node.classList.toggle('active');
         prevPage = currentPage;
@@ -123,4 +125,56 @@ radial-gradient(circle at 93% 95%,
 radial-gradient(circle at 73% 10%,
     hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
     rgba(255, 255, 255, 0) 100%)
-`;
+`;
+
+// menu
+function toggleProfondeur(el) {
+    if (el.classList.contains("selected")) {
+        return;
+    } else {
+        for (let sibling of el.parentNode.children) {
+            sibling.classList.remove('selected');
+        }
+    }
+    el.classList.add("selected");
+    if(el.innerHTML == "L'atlas") {
+        currentProfondeur = "atlas";
+        document.querySelectorAll('.mode').forEach(function(node) {
+            if(node.classList.contains("collapsed")) {
+                node.classList.remove("collapsed");
+            }
+        });
+    } else {
+        currentProfondeur = "carte";
+        document.querySelectorAll('.mode').forEach(function(node) {
+            if(!node.classList.contains("active")) {
+                node.classList.add("collapsed");
+            }
+        });
+    }
+}
+
+
+// toggle changement de couleur de fond (faire une fonction propr)
+// et variable globale du mode dans lequel on est
+// loop avec les flèches
+
+function toggleMode(direction) {
+    let modes = [];
+    let currentIndex;
+    document.querySelectorAll('.mode').forEach(function(node, index) {
+        modes.push(node);
+        if (node.classList.contains("active")) {
+            currentIndex = index;
+            node.classList.remove("active");
+            if (currentProfondeur == "carte") {
+                node.classList.add("collapsed");
+            }
+        }
+    });
+    if (direction == "next") {
+        modes[currentIndex + 1].classList.add('active');
+    } else if (direction == "prev") {
+        modes[currentIndex - 1].classList.add('active');
+    }
+}