Merge pull request #17 from fybx/drawer

2022-07-28 11:33:01 +03:00
parent f0e80bac7b 649dd386fd
commit 571d918d01
8 changed files with 82 additions and 201 deletions
--- a/aydinlatma.html
+++ b/aydinlatma.html
@@ -39,12 +39,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="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
    <main id="content">
--- 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="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
    <main id="content">
--- a/hakkimizda.html
+++ b/hakkimizda.html
@@ -39,12 +39,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="#">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="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="#">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
    <main id="content">
--- a/iletisim.html
+++ b/iletisim.html
@@ -39,12 +39,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="#">İletişim</a>
+<nav id="drawer">
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="#">İletişim</a>
 </nav>
 <div id="container">
    <main id="content">
--- a/index.html
+++ b/index.html
@@ -40,12 +40,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="#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="drawer-item" href="#">Ana sayfa</a>
+        <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+        <a class="drawer-item" href="index.html#brands">Markalar</a>
+        <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+        <a class="drawer-item" href="iletisim.html">İletişim</a>
    </nav>
    <div id="container">
        <main id="content">
--- a/kamera.html
+++ b/kamera.html
@@ -38,12 +38,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="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
    <main id="content">
--- a/resources/css/main.scss
+++ b/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;
-  animation: drawer-open 550ms;
+  display: flex;
  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;
-    animation: navbar-appear 550ms;
+    transition: opacity 250ms ease-in-out;

    &: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;
--- a/resources/scripts/main.js
+++ b/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 () {
-    if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100) {
-        scroll_to_top.style.display = "block";
+function checkScroll() {
+    if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
+        $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')) {
-        showDropdown();
-        await sleep(550);
-        document.getElementById("container").style.display = "none";
-        await sleep(200);
-        showNavitems();
+    let expanded = $drawer.classList.contains("expanded");
+    if (expanded) {
+        for (let i = 0; i < $drawer_item.length; i++) {
+            $drawer_item[i].classList.toggle("visible");
+        }
+        $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');
-        await sleep(550);
-        dropdown.classList.remove('dropdown_close_animation');
-        hideDropdown();
-        hideNavitems();
-    }
-}
+}
+
+window.addEventListener('load', checkScroll);
+window.addEventListener('scroll', checkScroll);