From 0eefdbfcc05f78ea6205229f7585a9cafe39524c Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Tue, 30 Nov 2021 13:58:39 +0100
Subject: [PATCH] Improve navigation menu button

---
 src/components/NavigationMenu.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/NavigationMenu.vue b/src/components/NavigationMenu.vue
index 7c58420..1f7dc8e 100644
--- a/src/components/NavigationMenu.vue
+++ b/src/components/NavigationMenu.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="sm:hidden fixed z-101 bottom-2 right-2 rounded-full backdrop-filter bg-white w-18 h-18 flex justify-center items-center shadow-lg _blur-backdrop-or-hide">
-    <div
-      role="button"
-      aria-label="Toggle navigation menu"
-      class="flex flex-col justify-evenly items-center h-10"
-      @click="active = !active"
-    >
-      <div class="w-10 h-2px bg-black transition duration-200 transform" :style="`transform: ${active ? 'translateY(350%)' : ''} rotate(${active ? 45 : 0}deg)`"/>
-      <div class="w-10 h-2px bg-black transition duration-200 transform" :style="`transform: ${active ? 'translateY(-350%)' : ''} rotate(${active ? -45 : 0}deg)`"/>
+  <div
+    class="sm:hidden fixed z-101 bottom-5 right-5 rounded-full backdrop-filter bg-white w-18 h-18 flex justify-center items-center shadow-lg _blur-backdrop-or-hide"
+    role="button"
+    aria-label="Toggle navigation menu"
+    @click="active = !active"
+  >
+    <div class="flex flex-col justify-evenly items-center h-10">
+      <div class="w-10 h-2px bg-black transition duration-300 transform _easing" :style="`transform: ${active ? 'translateY(350%)' : ''} rotate(${active ? 45 : 0}deg)`"/>
+      <div class="w-10 h-2px bg-black transition duration-300 transform _easing" :style="`transform: ${active ? 'translateY(-350%)' : ''} rotate(${active ? -45 : 0}deg)`"/>
     </div>
   </div>
   <nav
@@ -68,6 +68,11 @@
     }
   }
 
+  ._easing {
+    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  /*noinspection CssUnusedSymbol*/
   @screen sm {
     ._home-link.router-link-active {
       opacity: 0;