feat: Add primary tabs for the three different modes

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "bulma": "^1.0.3",
         "bulma-tooltip": "^3.0.2",
+        "font-awesome": "^4.7.0",
         "i18next": "^23.12.2",
         "i18next-browser-languagedetector": "^8.0.0",
         "i18next-http-backend": "^2.5.2",
@@ -18,6 +19,7 @@
       },
       "devDependencies": {
         "@creativebulma/bulma-tooltip": "^1.2.0",
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "css-loader": "^7.1.2",
         "sass": "^1.86.3",
         "sass-loader": "^16.0.5",
@@ -56,6 +58,16 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "dev": true,
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -1959,6 +1971,15 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "license": "(OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",

package.json

@@ -22,6 +22,7 @@
   "license": "AGPL-3.0-or-later",
   "devDependencies": {
     "@creativebulma/bulma-tooltip": "^1.2.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "css-loader": "^7.1.2",
     "sass": "^1.86.3",
     "sass-loader": "^16.0.5",
@@ -33,6 +34,7 @@
   "dependencies": {
     "bulma": "^1.0.3",
     "bulma-tooltip": "^3.0.2",
+    "font-awesome": "^4.7.0",
     "i18next": "^23.12.2",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",

public/index.html

@@ -21,7 +21,44 @@
 
 <div class="content">
     <h1 data-i18n-key="app-name" class="title is-1">Käfigrechner</h1>
-    <div class="container-form">
+    <div class="tabs is-centered is-boxed is-toggle" id="primary-tabs">
+        <ul>
+            <li class="is-active" data-tab-id="1">
+                <a>
+                    <span class="icon is-small">
+                        <i class="fas fa-number" aria-hidden="true"></i>
+                    </span>
+                    How many rats does this cage fit?
+                </a>
+            </li>
+            <li data-tab-id="2">
+                <a>
+                    <span class="icon is-small">
+                        <i class="fas fa-question" aria-hidden="true"></i>
+                    </span>
+                    What cage should I get?
+                </a>
+            </li>
+            <li data-tab-id="3">
+                <a>
+                    <span class="icon is-small">
+                        <i class="fas fa-check" aria-hidden="true"></i>
+                    </span>
+                    Check existing cage
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<div id="tab-content">
+    <div class="" data-content-id="1">
+        <p>Here you can check how many rats could fit in your cage.</p>
+    </div>
+    <div class="" data-content-id="2">
+        <p>Here is a list of cages you can get.</p>
+    </div>
+    <div class="is-active" data-content-id="3">
         <div class="card" id="container-cages">
             <div class="card-content" id="card-ManualMeasurements">
                 <h2 class="title is-4"><label data-i18n-key="cage-measurements"
@@ -41,7 +78,8 @@
 
                     <div class="columns">
                         <div class="column">
-                            <label for="numFullFloors" class="label" data-i18n-key="full-floors">Vollebenen</label>
+                            <label for="numFullFloors" class="label"
+                                   data-i18n-key="full-floors">Vollebenen</label>
                             <span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
                             <svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
                                  stroke="currentColor">

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");