From 12369a49a5226e8dd40fd8305d25151a914cf823 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Tue, 4 May 2021 14:47:16 +0300
Subject: [PATCH] styled navigation buttom

---
 src/commons/navigation/navigation.jsx |  3 +-
 src/sass/layout/_navigation.scss      | 41 +++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/commons/navigation/navigation.jsx b/src/commons/navigation/navigation.jsx
index 1d9a7f8..0b6ec0a 100644
--- a/src/commons/navigation/navigation.jsx
+++ b/src/commons/navigation/navigation.jsx
@@ -7,7 +7,8 @@ function Navigation() {
         id="navi-toggle"
       />
       <label for="navi-toggle" className="navigation__button">
-        Menu
+        <i className="fa fa-bars navigation__button--bars"></i>
+        <i className="fa fa-times navigation__button--times"></i>
       </label>
 
       <div className="navigation__background">&nbsp;</div>
diff --git a/src/sass/layout/_navigation.scss b/src/sass/layout/_navigation.scss
index fd73f2a..dee20b1 100644
--- a/src/sass/layout/_navigation.scss
+++ b/src/sass/layout/_navigation.scss
@@ -12,6 +12,19 @@
     right: 6rem;
     border-radius: 50%;
     z-index: 2000;
+    box-shadow: $shadow-light;
+    cursor: pointer;
+
+    &--bars,
+    &--times {
+      @include center-horizontal-vertical;
+      font-size: 3.5rem;
+      text-align: center;
+      transition: opacity 0.2s;
+    }
+    &--times {
+      opacity: 0;
+    }
   }
 
   &__background {
@@ -26,8 +39,7 @@
       $color-primary-dark
     );
     z-index: 1000;
-
-    transform: scale(100);
+    transition: all 0.8s cubic-bezier(0.85, 0, 0.15, 1);
   }
 
   &__nav {
@@ -35,14 +47,19 @@
     width: 100%;
     position: fixed;
     top: 0;
-    right: 0;
+    left: 0;
     z-index: 1500;
+
+    opacity: 0;
+    width: 0;
+    transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
   }
 
   &__list {
     @include center-horizontal-vertical;
     list-style: none;
     text-align: center;
+    width: 100%;
   }
 
   &__item {
@@ -81,4 +98,22 @@
       transform: translateX(1rem);
     }
   }
+
+  &__checkbox:checked ~ &__background {
+    transform: scale(80);
+  }
+
+  &__checkbox:checked ~ &__nav {
+    opacity: 1;
+    width: 100%;
+  }
+
+  //ICON
+  &__checkbox:checked ~ &__button &__button--times {
+    opacity: 1;
+  }
+
+  &__checkbox:checked ~ &__button &__button--bars {
+    opacity: 0;
+  }
 }