Merge pull request #17 from fybx/drawer

aydinlatma.html

@@ -39,12 +39,12 @@
         <span class="bar bar4"></span>
     </label>
 </header>
-<nav class="dropdown hidden dropdown-navbar">
+<nav id="drawer">
-    <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
-    <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
-    <a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
-    <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
-    <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">

galeri.html

@@ -43,12 +43,12 @@
         <span class="bar bar4"></span>
     </label>
 </header>
-<nav class="dropdown hidden dropdown-navbar">
+<nav id="drawer">
-    <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
-    <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
-    <a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
-    <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
-    <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">

hakkimizda.html

@@ -39,12 +39,12 @@
         <span class="bar bar4"></span>
     </label>
 </header>
-<nav class="dropdown hidden dropdown-navbar">
+<nav id="drawer">
-    <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
-    <a class="dropdown-nav-item hidden" href="#">Hakkımızda</a>
+    <a class="drawer-item" href="#">Hakkımızda</a>
-    <a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
-    <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
-    <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">

iletisim.html

@@ -39,12 +39,12 @@
         <span class="bar bar4"></span>
     </label>
 </header>
-<nav class="dropdown hidden dropdown-navbar">
+<nav id="drawer">
-    <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
-    <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
-    <a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
-    <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
-    <a class="dropdown-nav-item hidden" href="#">İletişim</a>
+    <a class="drawer-item" href="#">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">

index.html

@@ -40,12 +40,12 @@
             <span class="bar bar4"></span>
         </label>
     </header>
-    <nav class="dropdown hidden dropdown-navbar">
+    <nav id="drawer">
-        <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
+        <a class="drawer-item" href="#">Ana sayfa</a>
-        <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
+        <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
-        <a class="dropdown-nav-item hidden" href="#brands">Markalar</a>
+        <a class="drawer-item" href="index.html#brands">Markalar</a>
-        <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+        <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
-        <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
+        <a class="drawer-item" href="iletisim.html">İletişim</a>
     </nav>
     <div id="container">
         <main id="content">

kamera.html

@@ -38,12 +38,12 @@
             <span class="bar bar4"></span>
     </label>
 </header>
-<nav class="dropdown hidden dropdown-navbar">
+<nav id="drawer">
-    <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
-    <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
-    <a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
-    <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
-    <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">

resources/css/main.scss

@@ -85,19 +85,22 @@ a {
   }
 }
 
-.dropdown {
+#drawer {
   position: fixed;
+  bottom: 0;
+  right: 0;
   z-index: 2;
   background: variables.$cg_drawer;
-  width: 100%;
+  width: 0;
   height: 90vh;
-  -webkit-animation: drawer-open 550ms;
+  display: flex;
-  animation: drawer-open 550ms;
   flex-direction: column;
   align-items: center;
+  transition: width 500ms;
 
-  .dropdown-nav-item {
+  .drawer-item {
     position: relative;
+    opacity: 0;
     margin-top: math.div(variables.$px_horizontalPadding, 4);
     background: variables.$cg_drawer_navitem;
     -webkit-background-clip: text;
@@ -106,8 +109,7 @@ a {
     color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
-    -webkit-animation: navbar-appear 550ms;
+    transition: opacity 250ms ease-in-out;
-    animation: navbar-appear 550ms;
 
     &:first-of-type {
       margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -130,6 +132,15 @@ a {
       transform: scaleX(1);
       transform-origin: bottom left;
     }
+
+    &.visible {
+      opacity: 1;
+    }
+  }
+
+  &.expanded {
+    width: 100%;
+    top: unset;
   }
 
   @include mixins.header_overflow2 {
@@ -137,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;
@@ -258,6 +159,10 @@ a {
   @include mixins.header_overflow2 {
     min-height: calc(100vh - 45px);
   }
+
+  &.hidden {
+    display: none;
+  }
 }
 
 #content {
@@ -270,7 +175,6 @@ a {
 #scroll-to-top {
   width: $px_scroll-to-top_size;
   height: $px_scroll-to-top_size;
-  display: none;
   position: fixed;
   right: 25px;
   bottom: 55px;

resources/scripts/main.js

@@ -1,10 +1,13 @@
-scroll_to_top = document.getElementById("scroll-to-top");
+const SCROLL_MIN = 100;
+const $scroll_to_top = document.getElementById("scroll-to-top");
+const $drawer = document.getElementById("drawer");
+const $drawer_item = document.querySelectorAll(".drawer-item");
 
-window.onscroll = function () {
+function checkScroll() {
-    if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100) {
+    if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
-        scroll_to_top.style.display = "block";
+        $scroll_to_top.style.visibility = "visible";
     } else {
-        scroll_to_top.style.display = "none";
+        $scroll_to_top.style.visibility = "hidden";
     }
 }
 
@@ -17,47 +20,21 @@ async function sleep(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
 
-let dropdown = document.getElementsByClassName('dropdown')[0];
-let navitems = document.getElementsByClassName('dropdown-nav-item');
-
-function showDropdown() {
-    dropdown.classList.remove('hidden');
-    dropdown.classList.add('flex');
-}
-
-function hideDropdown() {
-    dropdown.classList.remove('flex');
-    dropdown.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() {
-    if (dropdown.classList.contains('hidden')) {
+    let expanded = $drawer.classList.contains("expanded");
-        showDropdown();
+    if (expanded) {
-        await sleep(550);
+        for (let i = 0; i < $drawer_item.length; i++) {
-        document.getElementById("container").style.display = "none";
+            $drawer_item[i].classList.toggle("visible");
-        await sleep(200);
+        }
-        showNavitems();
+        $drawer.classList.toggle("expanded");
+    } else {
+        $drawer.classList.toggle("expanded");
+        await sleep(250);
+        for (let i = 0; i < $drawer_item.length; i++) {
+            $drawer_item[i].classList.toggle("visible");
+        }
     }
-    else {
+}
-        document.getElementById("container").style.display = "grid";
+
-        dropdown.classList.add('dropdown_close_animation');
+window.addEventListener('load', checkScroll);
-        await sleep(550);
+window.addEventListener('scroll', checkScroll);
-        dropdown.classList.remove('dropdown_close_animation');
-        hideDropdown();
-        hideNavitems();
-    }
-}