From d586e15c56651914a33ab0757aa836c58446174b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 25 Jun 2020 23:56:41 +0200
Subject: [PATCH] Add option to hide the menu on desktop

---
 src/App.vue                      | 40 ++++++++++++++++++++-----
 src/styles/theme/content.scss    |  5 +++-
 src/styles/theme/navigation.scss | 50 +++++++++++++++++++++++---------
 3 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6e83f29e..741e5635 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,8 +14,18 @@
 						<img src="/images/logo-full-pride.svg" alt="Vikunja" v-if="(new Date()).getMonth() === 5"/>
 						<img src="/images/logo-full.svg" alt="Vikunja" v-else/>
 					</router-link>
+					<a
+							@click="menuActive = true"
+							class="menu-show-button"
+							:class="{'is-visible': !menuActive}"
+					>
+						<icon icon="bars"></icon>
+					</a>
 				</div>
-				<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
+				<a
+						@click="menuActive = true"
+						class="menu-show-button"
+				>
 					<icon icon="bars"></icon>
 				</a>
 				<div class="list-title" v-if="currentList.id">
@@ -61,7 +71,7 @@
 				</div>
 			</nav>
 			<div v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
-				<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive">
+				<a @click="menuActive = false" class="menu-hide-button" v-if="menuActive">
 					<icon icon="times"></icon>
 				</a>
 				<div
@@ -69,7 +79,7 @@
 						:class="{'has-background': background}"
 						:style="{'background-image': `url(${background})`}"
 				>
-					<div class="namespace-container" :class="{'is-active': mobileMenuActive}">
+					<div class="namespace-container" :class="{'is-active': menuActive}">
 						<div class="menu top-menu">
 							<router-link :to="{name: 'home'}" class="logo">
 								<img src="/images/logo-full.svg" alt="Vikunja"/>
@@ -125,6 +135,7 @@
 								</li>
 							</ul>
 						</div>
+						<a @click="menuActive = false" class="collapse-menu-button">Collapse Menu</a>
 						<aside class="menu namespaces-lists">
 							<div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
 							<template v-for="n in namespaces">
@@ -193,8 +204,14 @@
 						</aside>
 						<a class="menu-bottom-link" target="_blank" href="https://vikunja.io">Powered by Vikunja</a>
 					</div>
-					<div class="app-content" :class="{'fullpage-overlay': fullpage}">
-						<a class="mobile-overlay" v-if="mobileMenuActive" @click="mobileMenuActive = false"></a>
+					<div
+							class="app-content"
+							:class="{
+								'fullpage-overlay': fullpage,
+								'is-menu-enabled': menuActive,
+							}"
+					>
+						<a class="mobile-overlay" v-if="menuActive" @click="menuActive = false"></a>
 						<transition name="fade">
 							<router-view/>
 						</transition>
@@ -273,7 +290,7 @@
 		data() {
 			return {
 				namespaceService: NamespaceService,
-				mobileMenuActive: false,
+				menuActive: true,
 				currentDate: new Date(),
 				userMenuActive: false,
 				authTypes: authTypes,
@@ -339,6 +356,11 @@
 				)
 			}
 
+			// Hide the menu by default on mobile
+			if (window.innerWidth < 770) {
+				this.menuActive = false
+			}
+
 			// Try renewing the token every time vikunja is loaded initially
 			// (When opening the browser the focus event is not fired)
 			this.$store.dispatch('auth/renewToken')
@@ -402,9 +424,13 @@
 				}
 
 				this.loadNamespacesIfNeeded(e)
-				this.mobileMenuActive = false
 				this.userMenuActive = false
 
+				// If the menu is active on desktop, don't hide it because that would confuse the user
+				if (window.innerWidth < 770) {
+					this.menuActive = false
+				}
+
 				// Reset the current list highlight in menu if the current list is not list related.
 				if (
 					this.$route.name === 'home' ||
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 22274d5e..208024c1 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -7,7 +7,10 @@
   .app-content {
     padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
     z-index: 2;
-    margin-left: 17vw;
+
+    &.is-menu-enabled {
+      margin-left: 17vw;
+    }
 
     @media screen and (max-width: $tablet) {
       margin-left: 0;
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 6ad0edb7..b8cf2c5d 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -14,6 +14,11 @@
     box-shadow: $navbar-dropdown-boxed-shadow;
     top: 101%;
   }
+
+  .navbar-brand {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .navbar.main-theme {
@@ -113,15 +118,30 @@
     overflow-x: auto;
     width: 17vw;
 
-    @media screen and (max-width: $tablet) {
-      padding: 0 0 1em;
-      left: -147vw;
-      top: 0;
-      bottom: 0;
-      width: 70vw;
+    padding: 0 0 1em;
+    left: -147vw;
+    bottom: 0;
 
-      &.is-active {
-        left: 0;
+    @media screen and (max-width: $tablet) {
+      top: 0;
+      width: 70vw;
+    }
+
+    &.is-active {
+      left: 0;
+    }
+
+    .collapse-menu-button {
+      font-size: .75rem;
+      color: $grey;
+      text-align: center;
+      display: block;
+      width: 100%;
+      margin: $navbar-padding / 2 0 $navbar-padding;
+      cursor: pointer;
+
+      @media screen and (max-width: $tablet) {
+        display: none;
       }
     }
 
@@ -270,7 +290,7 @@
     }
 
     .top-menu {
-      margin: $navbar-padding / 2 0 $navbar-padding;
+      margin-top: $navbar-padding / 2;
 
       .menu-list {
         li {
@@ -326,7 +346,7 @@
   }
 }
 
-.mobilemenu-hide-button, .mobilemenu-show-button {
+.menu-hide-button, .menu-show-button {
   display: none;
   z-index: 31;
   font-weight: bold;
@@ -339,7 +359,7 @@
   }
 }
 
-.mobilemenu-hide-button {
+.menu-hide-button {
   position: fixed;
 
   &:hover, &:focus {
@@ -361,13 +381,13 @@
 }
 
 @media screen and (max-width: $tablet) {
-  .mobilemenu-hide-button {
+  .menu-hide-button {
     display: block;
     top: $hamburger-menu-icon-spacing;
     right: $hamburger-menu-icon-spacing;
   }
 
-  .mobilemenu-show-button {
+  .menu-show-button {
     display: block;
     margin-left: $hamburger-menu-icon-spacing;
   }
@@ -382,6 +402,10 @@
   }
 }
 
+.menu-show-button.is-visible {
+  display: block;
+}
+
 .logout-icon {
   margin-right: 0.85em !important;
 }