From 1f0b2dfa663bac59550033caac2e35a7f9b29f3b 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:04:30 +0300
Subject: [PATCH] Remove dropdown-nav-item appear animation

---
 galeri.html               | 12 ++++++------
 resources/css/main.scss   | 10 ++++++----
 resources/scripts/main.js | 31 ++++---------------------------
 3 files changed, 16 insertions(+), 37 deletions(-)

diff --git a/galeri.html b/galeri.html
index 8131cdf..e5cfa2c 100644
--- a/galeri.html
+++ b/galeri.html
@@ -43,12 +43,12 @@
         <span class="bar bar4"></span>
     </label>
 </header>
-<nav class="dropdown hidden dropdown-navbar">
-    <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
-    <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
-    <a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a>
-    <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
-    <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
+<nav id="drawer">
+    <a class="dropdown-nav-item" href="index.html">Ana sayfa</a>
+    <a class="dropdown-nav-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="dropdown-nav-item" href="index.html#brands">Markalar</a>
+    <a class="dropdown-nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="dropdown-nav-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">
diff --git a/resources/css/main.scss b/resources/css/main.scss
index c12c550..cabd48c 100644
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -87,7 +87,7 @@ a {
 
 #drawer {
   position: fixed;
-  top: 0;
+  bottom: 0;
   right: 0;
   z-index: 2;
   background: variables.$cg_drawer;
@@ -100,6 +100,7 @@ a {
 
   .dropdown-nav-item {
     position: relative;
+    opacity: 0;
     margin-top: math.div(variables.$px_horizontalPadding, 4);
     background: variables.$cg_drawer_navitem;
     -webkit-background-clip: text;
@@ -108,8 +109,6 @@ a {
     color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
-    -webkit-animation: navbar-appear 550ms;
-    animation: navbar-appear 550ms;
 
     &:first-of-type {
       margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -132,12 +131,15 @@ a {
       transform: scaleX(1);
       transform-origin: bottom left;
     }
+
+    &.visible {
+      opacity: 1;
+    }
   }
 
   &.expanded {
     width: 100%;
     top: unset;
-    bottom: 0;
   }
 
   @include mixins.header_overflow2 {
diff --git a/resources/scripts/main.js b/resources/scripts/main.js
index cd2b0be..a86ad5d 100644
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -22,34 +22,11 @@ async function sleep(milliseconds) {
 
 let navitems = document.getElementsByClassName('dropdown-nav-item');
 
-function showDropdown() {
-    el_drawer.classList.remove('hidden');
-    el_drawer.classList.add('flex');
-}
-
-function hideDropdown() {
-    el_drawer.classList.remove('flex');
-    el_drawer.classList.add('hidden');
-}
-
-function showNavitems() {
-    for (let i = 0; i < navitems.length; i++) {
-        navitems[i].classList.remove('hidden');
-        navitems[i].classList.add('inline-block');
-    }
-}
-
-function hideNavitems() {
-    for (let i = 0; i < navitems.length; i++) {
-        navitems[i].classList.remove('inline-block');
-        navitems[i].classList.add('hidden');
-    }
-}
-
-async function toggleDropdown() {
+function toggleDropdown() {
     el_drawer.classList.toggle("expanded");
-    await sleep(500);
-    el_container.classList.toggle("hidden");
+    for (let i = 0; i < navitems.length; i++) {
+        navitems[i].classList.toggle("visible");
+    }
 }
 
 window.addEventListener('load', checkScroll);