Fixed menu not being visible on mobile

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>

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;
 }

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 {