From 2e2887c2add01af2d743fc68b17e52ea454d373a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 20 Jul 2021 23:57:55 +0200
Subject: [PATCH] Change menu hamburger icon

---
 src/components/home/topNavigation.vue |  2 --
 src/styles/theme/navigation.scss      | 39 +++++++++++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index dc6f60a3c..ae7f83568 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -16,14 +16,12 @@
 				@shortkey="() => $store.commit('toggleMenu')"
 				v-shortkey="['ctrl', 'e']"
 			>
-				<icon icon="bars"></icon>
 			</a>
 		</div>
 		<a
 			@click="$store.commit('toggleMenu')"
 			class="menu-show-button"
 		>
-			<icon icon="bars"></icon>
 		</a>
 		<div class="list-title" ref="listTitle" :style="{'display': currentList.id ? '': 'none'}">
 			<template v-if="currentList.id">
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index cab0f973a..1d74d70a3 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -375,14 +375,49 @@
   z-index: 31;
   font-weight: bold;
   font-size: 2rem;
-  color: $text;
+  color: $grey-400;
   line-height: 1;
+  transition: all $transition;
 
   &:hover, &:focus {
-    color: $grey-900;
+	height: 1rem;
+    color: $grey-600;
   }
 }
 
+.menu-show-button {
+	height: .75rem;
+	width: 2rem;
+	
+	&:before, &:after {
+		display: block;
+		content: '';
+		border-top: 3px solid $grey-400;
+		border-radius: $radius;
+		transition: all $transition;
+	}
+	
+	&:before {
+		margin-bottom: .5rem;
+	}
+	
+	&:after {
+		margin-top: .5rem;
+	}
+
+	&:hover, &:focus {
+		color: $grey-600;
+		
+		&:before {
+			margin-bottom: .75rem;
+		}
+
+		&:after {
+			margin-top: .75rem;
+		}
+	}
+}
+
 .menu-hide-button {
   position: fixed;