From 6d3269395a3287135175c0a360a33106d017c443 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= <fyb@duck.com>
Date: Thu, 28 Jul 2022 11:16:39 +0300
Subject: [PATCH] Add transition to drawer-item

---
 resources/css/main.scss   | 113 +-------------------------------------
 resources/scripts/main.js |  13 ++---
 2 files changed, 8 insertions(+), 118 deletions(-)

diff --git a/resources/css/main.scss b/resources/css/main.scss
index cabd48c..d0b8ac3 100644
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -98,7 +98,7 @@ a {
   align-items: center;
   transition: width 500ms;
 
-  .dropdown-nav-item {
+  .drawer-item {
     position: relative;
     opacity: 0;
     margin-top: math.div(variables.$px_horizontalPadding, 4);
@@ -109,6 +109,7 @@ a {
     color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
+    transition: opacity 250ms ease-in-out;
 
     &:first-of-type {
       margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -147,116 +148,6 @@ a {
   }
 }
 
-.dropdown_close_animation {
-  -webkit-animation: drawer-close 550ms;
-  animation: drawer-close 550ms;
-}
-
-.dropdown-nav-item_close_animation {
-  -webkit-animation: navbar-disappear 550ms;
-  animation: navbar-disappear 550ms;
-}
-
-@-webkit-keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@-webkit-keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@-webkit-keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@-webkit-keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
 #container {
   min-height: 90vh;
   display: grid;
diff --git a/resources/scripts/main.js b/resources/scripts/main.js
index c109fa2..9cb02db 100644
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -2,6 +2,7 @@ const SCROLL_MIN = 100;
 scroll_to_top = document.getElementById("scroll-to-top");
 el_drawer = document.getElementById("drawer");
 el_container = document.getElementById("container");
+$drawer_item = document.querySelectorAll(".drawer-item");
 
 function checkScroll() {
     if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
@@ -20,20 +21,18 @@ async function sleep(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
 
-let navitems = document.getElementsByClassName('dropdown-nav-item');
-
 async function toggleDropdown() {
     let expanded = el_drawer.classList.contains("expanded");
     if (expanded) {
-        for (let i = 0; i < navitems.length; i++) {
-            navitems[i].classList.toggle("visible");
+        for (let i = 0; i < $drawer_item.length; i++) {
+            $drawer_item[i].classList.toggle("visible");
         }
         el_drawer.classList.toggle("expanded");
     } else {
         el_drawer.classList.toggle("expanded");
-        await sleep(500);
-        for (let i = 0; i < navitems.length; i++) {
-            navitems[i].classList.toggle("visible");
+        await sleep(250);
+        for (let i = 0; i < $drawer_item.length; i++) {
+            $drawer_item[i].classList.toggle("visible");
         }
     }
 }