Added the navigation appearance on a click

ruta-is-coding · Dec 2, 2023 · 3add463 · 3add463
1 parent 6a6c37c
commit 3add463
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/css/style.css b/css/style.css
@@ -551,7 +551,8 @@ body {
   position: fixed;
   top: 6rem;
   right: 6rem;
-  z-index: 200; }
+  z-index: 200;
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
 
 .navigation__background {
   height: 6rem;
@@ -562,23 +563,26 @@ body {
   top: 6.5rem;
   right: 6.5rem;
   background-image: radial-gradient(#7ed56f, #28b485);
-  transform: scale(80); }
+  transition: transform 0.7s cubic-bezier(0.8, 0, 0.07, 1); }
 
 .navigation__nav {
+  opacity: 0;
+  width: 0;
   height: 100vh;
-  width: 100vw;
   position: fixed;
   top: 0;
-  right: 0;
-  z-index: 150; }
+  left: 0;
+  z-index: 150;
+  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
 
 .navigation__list {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   list-style-type: none;
-  text-align: center; }
+  text-align: center;
+  width: 100%; }
 
 .navigation__item {
   margin: 1rem; }
@@ -603,6 +607,13 @@ body {
   color: #55c57a;
   transform: translateX(1rem); }
 
+.navigation__checkbox:checked ~ .navigation__background {
+  transform: scale(80); }
+
+.navigation__checkbox:checked ~ .navigation__nav {
+  opacity: 100;
+  width: 100vw; }
+
 .section-about {
   background-color: #f7f7f7;
   padding: 25rem 5rem;

diff --git a/sass/layout/_navigation.scss b/sass/layout/_navigation.scss
@@ -12,6 +12,7 @@
     top: 6rem;
     right: 6rem;
     z-index: 200;
+    box-shadow: $shadow-md;
   }
 
   &__background {
@@ -26,23 +27,25 @@
       $color-primary-light,
       $color-primary-dark
     );
-
-    transform: scale(80);
+    transition: transform 0.7s cubic-bezier(0.8, 0, 0.07, 1);
   }
 
   &__nav {
+    opacity: 0;
+    width: 0;
     height: 100vh;
-    width: 100vw;
     position: fixed;
     top: 0;
-    right: 0;
+    left: 0;
     z-index: 150;
+    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
 
   &__list {
     @include centerAbsolute;
     list-style-type: none;
     text-align: center;
+    width: 100%;
   }
 
   &__item {
@@ -81,4 +84,13 @@
       transform: translateX(1rem);
     }
   }
+
+  &__checkbox:checked ~ &__background {
+    transform: scale(80);
+  }
+
+  &__checkbox:checked ~ &__nav {
+    opacity: 100;
+    width: 100vw;
+  }
 }