Remove dropdown-nav-item appear animation

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

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 {

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