From c0a8ec7becd9114f2a5e9bbb80e6af15d9a15b6f Mon Sep 17 00:00:00 2001
From: kolaente <konrad@kola-entertainments.de>
Date: Sun, 19 May 2019 18:19:22 +0200
Subject: [PATCH] Fixed menu not being visible on mobile

---
 src/App.vue             |  2 +-
 src/styles/general.scss | 11 +++++------
 src/styles/theme.scss   | 23 ++++++++++++++++++++++-
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 444cc8089..067185b3a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,7 @@
 					<div class="dropdown is-right is-active">
 						<div class="dropdown-trigger">
 							<button class="button noshadow" @click="userMenuActive = !userMenuActive">
-								<span>{{user.infos.username}}</span>
+								<span class="username">{{user.infos.username}}</span>
 								<span class="icon is-small">
 									<icon icon="chevron-down"/>
 								</span>
diff --git a/src/styles/general.scss b/src/styles/general.scss
index aeb4dd859..fca3414b7 100644
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@@ -36,7 +36,7 @@
 
   .namespace-container{
     background: $vikunja-nav-background;
-    z-index: 3;
+    z-index: 6;
     color: $vikunja-nav-color;
     padding: 0;
     transition: all $transition;
@@ -52,7 +52,6 @@
       top: 0;
       bottom: 0;
       width: 70vw;
-      z-index: 5;
 
       &.is-active {
         left: 0;
@@ -215,12 +214,12 @@
 .mobilemenu-hide-button,.mobilemenu-show-button{
   display: none;
   position: fixed;
-  z-index: 5;
+  z-index: 31;
   font-weight: bold;
   font-size: 2em;
-  color: $light;
+  color: $dark;
   &:hover, &:focus{
-    color: $light;
+    color: darken($dark, 20);
   }
 }
 
@@ -239,7 +238,7 @@
   left: 0;
   right: 0;
   background: rgba(250,250,250,0.8);
-  z-index: 4;
+  z-index: 5;
   opacity: 0;
   transition: all $transition;
 }
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index f56b098b9..e3d12335d 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -240,7 +240,28 @@ h1,h2,h3,h4,h5,h6{
 
 .navbar.main-theme {
   background: $light-background;
-  z-index: 30 !important;
+  z-index: 5 !important;
+
+  @media screen and (max-width: $desktop) {
+    display: flex;
+    justify-content: space-between;
+
+    @media screen and (max-width: $tablet) {
+      .navbar-brand {
+        margin-left: 3em;
+      }
+    }
+
+    @media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
+      .user {
+        width: 7em;
+
+        .username {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 .switch-view {