add smartphone navigation #4 #5

michivonah · Sep 4, 2022 · c7b1670 · c7b1670
1 parent 5b0cdb8
commit c7b1670
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 1 deletion.
diff --git a/assets/functions.js b/assets/functions.js
@@ -33,4 +33,17 @@ function toggleSection(sectionName, type){
       if(state == true) document.getElementById(current).style.display = "block";
       else document.getElementById(current).style.display = "none";
     }
+  }
+
+  function toggleNavigation(mode){
+    var toggleBtn = document.getElementById("openNavbar");
+    var nav = document.getElementById("toolNavigation");
+    if(mode == "show"){
+      nav.style.left = 0;
+      toggleBtn.style.display = "none";
+    }
+    else{
+      nav.style.left = "-100%";
+      toggleBtn.style.display = "flex";
+    }
   }
diff --git a/index.html b/index.html
@@ -54,6 +54,10 @@
     <div id="loader"></div>
   </div>
 
+  <div id="openNavbar" onclick="toggleNavigation('show')">
+    <i class="ai-chevron-right"></i>
+  </div>
+
     <div id="content">
       <div id="toolNavigation">
         <div id="toolList">
@@ -62,7 +66,6 @@
             <p>math-tools.app</p>
           </div>
 
-
           <input type="radio" id="welcome" class="toolCategoryInput" name="toolCategory" onchange="changeTool();" checked>
           <label for="welcome" class="toolCategoryLabel"><i class="ai-victory-hand"></i> Willkommen</label>
 
@@ -163,6 +166,9 @@ <h2>Hinweis zum Datenschutz</h2>
           changeTool();
           // install service worker
           if('serviceWorker' in navigator) navigator.serviceWorker.register('/service-worker.js');
+          // add eventlistener for smartphone navigation
+          var navButtons = document.querySelectorAll('.toolCategoryLabel');
+          navButtons.forEach(obj => obj.addEventListener("click", toggleNavigation));
           // show a random greeting
           randomGreeting();
           // hide loadingscreen

diff --git a/style.css b/style.css
@@ -126,6 +126,7 @@ body{
       resize: horizontal;
       overflow-x: hidden;
       overflow-y: scroll;
+      transition: var(--transition);
    }
 
    #toolList{
@@ -177,6 +178,34 @@ body{
       margin: 0 5px;
    }
 
+   /* Nav for smartphone */
+   #openNavbar{
+      width: 56px;
+      height: auto;
+      padding: 10px;
+      font-size: 1.2rem;
+      font-weight: 700;
+      background: var(--theme1);
+      opacity: 0.9;
+      border-radius: 0;
+      border-top-right-radius: 12px;
+      border-bottom-right-radius: 12px;
+      position: fixed;
+      bottom: 15vh;
+      left: 0;
+      display: none; /* FLEX */
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-end;
+      align-content: center;
+      align-items: center;
+      transition: var(--transition);
+   }
+
+   #openNavbar:hover{
+      width: 66px;
+   }
+
    /* Tools */
    #toolContainer{
       width: 100%;
@@ -310,6 +339,24 @@ body{
 
    /* Smartphone */
    @media screen and (max-width:640px){
+      /* NAVIGATION */
+      #openNavbar{
+         display: flex;
+      }
+
+      #toolNavigation{
+         width: 100%;
+         min-width: 100%;
+         max-width: 100%;
+         height: 100%;
+         resize: none;
+         overflow-x: hidden;
+         overflow-y: scroll;
+         position: absolute;
+         top: 0;
+         left: -100%;
+         z-index: 100;
+      }
    }
 
    /* Selection */