From b1fd56e9b6f12c344585b65f707ec209c9d8f9c0 Mon Sep 17 00:00:00 2001
From: realaravinth <realaravinth@batsense.net>
Date: Mon, 23 Aug 2021 18:55:57 +0530
Subject: [PATCH] navbar animation

---
 templates/panel/navbar/mobile.scss | 47 +++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/templates/panel/navbar/mobile.scss b/templates/panel/navbar/mobile.scss
index 66138ca2..0a1bfca2 100644
--- a/templates/panel/navbar/mobile.scss
+++ b/templates/panel/navbar/mobile.scss
@@ -16,16 +16,12 @@
  */
 @import '../../vars';
 
+$hamburger-menu-animation: 0.3s ease-in;
+
 .secondary-menu {
   display: block;
 }
 
-.secondary-menu__list {
-  //  position: sticky;
-  height: 0px;
-  overflow: hidden;
-}
-
 .nav__hamburger-menu {
   display: inline-block;
   width: 50px;
@@ -63,17 +59,48 @@
 }
 
 .nav-toggle:not(:checked) ~ .secondary-menu__list {
-  height: 0px;
-  //  overflow-y: hidden;
-  //  max-height: 100%;
+  overflow-y: hidden;
+  max-height: 0;
+  transition: max-height $hamburger-menu-animation;
 }
 
 .nav-toggle:checked ~ .secondary-menu__list {
-  height: 100%;
+  max-height: 500px;
   overflow-y: auto;
+  transition: max-height $hamburger-menu-animation;
 }
 
 .secondary-menu__brand-name:hover {
   color: $light-text;
   cursor: pointer;
 }
+
+.nav-toggle:checked ~ .secondary-menu__heading {
+  .nav__hamburger-menu {
+    span:nth-child(2) {
+      border: none;
+    }
+
+    span:nth-child(3) {
+      transform: rotate(-45deg) translate(55%, -15%);
+      transition: $hamburger-menu-animation;
+    }
+
+    span:first-child {
+      transform: rotate(45deg) translate(35%, 40%);
+      transition: $hamburger-menu-animation;
+    }
+  }
+}
+
+.nav-toggle:not(checked) ~ .secondary-menu__heading {
+  .nav__hamburger-menu {
+    span:nth-child(3) {
+      transition: $hamburger-menu-animation;
+    }
+
+    span:first-child {
+      transition: $hamburger-menu-animation;
+    }
+  }
+}