feat: Add primary tabs for the three different modes

src/index.js

@@ -1,6 +1,10 @@
 import i18next from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import HttpApi from "i18next-http-backend";
+import '@fortawesome/fontawesome-free/js/fontawesome'
+import '@fortawesome/fontawesome-free/js/solid'
+import '@fortawesome/fontawesome-free/js/regular'
+import '@fortawesome/fontawesome-free/js/brands'
 import './main.scss';
 
 /////////////////
@@ -62,6 +66,50 @@ function bindLocaleSwitcher(initialValue) {
     update();
 })();
 
+//////////
+// TABS //
+//////////
+
+
+
+function initTabs(tabs, tabContent, activationClass) {
+    tabs.forEach((tab) => {
+        tab.addEventListener('click', (e) => {
+            let selectedTabID = tab.getAttribute('data-tab-id');
+            updateActiveTab(tabs, tab);
+            updateActiveContent(tabContent, selectedTabID);
+        })
+    })
+}
+
+function updateActiveTab(tabs, selectedTabID) {
+    tabs.forEach((tab) => {
+        if (tab && tab.classList.contains(ACTIVATION_CLASS)) {
+            tab.classList.remove(ACTIVATION_CLASS);
+        }
+    });
+    selectedTabID.classList.add(ACTIVATION_CLASS);
+}
+
+function updateActiveContent(tabsContent, selectedTabID) {
+    tabsContent.forEach((item) => {
+        if (item && item.classList.contains(ACTIVATION_CLASS)) {
+            item.classList.remove(ACTIVATION_CLASS);
+        }
+        let data = item.getAttribute('data-content-id');
+        if (data === selectedTabID) {
+            item.classList.add(ACTIVATION_CLASS);
+        }
+    });
+}
+
+const primaryTabs = [...document.querySelectorAll('#primary-tabs li')];
+const primaryTabsContent = [...document.querySelectorAll('#tab-content div')];
+const ACTIVATION_CLASS = 'is-active';
+
+initTabs(primaryTabs, primaryTabsContent, ACTIVATION_CLASS);
+
+
 ////////////////
 // CALCULATOR //
 ////////////////

src/main.scss

@@ -16,6 +16,15 @@ $beige-lighter: #eff0eb;
   $input-shadow: none
 );
 
+#tab-content > div {
+  display: none;
+}
+
+#tab-content > div.is-active {
+  display: block;
+}
+
+
 // Import the Google Font
 @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");