From 6c6bd17871e8ac4bffe8a1c60e99e3fecda6097d Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Fri, 3 Apr 2020 16:43:30 +0200
Subject: [PATCH] Allow to toggle sidebar and always show the toggle

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 package-lock.json                             |  12 +-
 package.json                                  |   1 +
 src/components/AppContent/AppContent.vue      |  64 ++++----
 .../AppNavigation/AppNavigation.vue           | 142 ++++++++++++++----
 .../AppNavigationToggle.vue                   |  41 +++--
 5 files changed, 177 insertions(+), 83 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8ea82c17f6..52e82a3095 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -520,7 +520,7 @@
 			"dependencies": {
 				"@babel/code-frame": {
 					"version": "7.8.3",
-					"resolved": false,
+					"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
 					"integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
 					"requires": {
 						"@babel/highlight": "^7.8.3"
@@ -635,7 +635,7 @@
 			"dependencies": {
 				"@babel/code-frame": {
 					"version": "7.8.3",
-					"resolved": false,
+					"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
 					"integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
 					"requires": {
 						"@babel/highlight": "^7.8.3"
@@ -3313,9 +3313,9 @@
 			}
 		},
 		"@nextcloud/event-bus": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-1.1.3.tgz",
-			"integrity": "sha512-/f3OMh9Tu3bn17sCc1Sb5AaC/fjegP9bjFmlsPDFNcCAHrKKM5B2X+2eUDF2osLirYaBjVqypBmD87zyiE0WjQ==",
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-1.1.4.tgz",
+			"integrity": "sha512-It27KzmUaSQ7w22nHFwOn8XgeVG0HYYOSNG9gs4UkP5VqcZ16m4ydt3GkMpWcyFec4OUjJc+yf7omRc3pNxsSw==",
 			"requires": {
 				"@types/semver": "^6.2.1",
 				"core-js": "^3.6.2",
@@ -4476,7 +4476,7 @@
 				},
 				"@babel/highlight": {
 					"version": "7.9.0",
-					"resolved": false,
+					"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
 					"integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
 					"dev": true,
 					"requires": {
diff --git a/package.json b/package.json
index 3b35021ee7..ff7f565777 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
 	],
 	"dependencies": {
 		"@nextcloud/axios": "^1.1.0",
+		"@nextcloud/event-bus": "^1.1.4",
 		"@nextcloud/l10n": "^1.1.0",
 		"@nextcloud/router": "^1.0.0",
 		"core-js": "^3.4.4",
diff --git a/src/components/AppContent/AppContent.vue b/src/components/AppContent/AppContent.vue
index 05c9da67de..51f6dc9a12 100644
--- a/src/components/AppContent/AppContent.vue
+++ b/src/components/AppContent/AppContent.vue
@@ -2,6 +2,8 @@
  - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
  -
  - @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ - @author Marco Ambrosini <marcoambrosini@pm.me>
+ - @author John Molakvoæ <skjnldsv@protonmail.com>
  -
  - @license GNU AGPL version 3 or any later version
  -
@@ -21,10 +23,7 @@
  -->
 
 <template>
-	<main id="app-content" class="no-snapper" :style="opened ? 'transform: translateX(300px)' : ''">
-		<AppNavigationToggle :aria-expanded="opened"
-			aria-controls="app-navigation"
-			@click="toggleNavigation" />
+	<main id="app-content" class="no-snapper">
 		<!-- @slot Provide content to the app content -->
 		<slot />
 	</main>
@@ -32,7 +31,7 @@
 
 <script>
 import Hammer from 'hammerjs'
-import AppNavigationToggle from '../AppNavigationToggle'
+import { emit } from '@nextcloud/event-bus'
 
 /**
  * App content container to be used for the main content of your app
@@ -40,37 +39,25 @@ import AppNavigationToggle from '../AppNavigationToggle'
  */
 export default {
 	name: 'AppContent',
-	components: {
-		AppNavigationToggle,
-	},
-	data() {
-		return {
-			// closed by default on mobile mode
-			opened: false,
-		}
+
+	props: {
+		// Allows to disable the control by swipe of the app navigation open state
+		allowSwipeNavigation: {
+			type: Boolean,
+			default: true,
+		},
 	},
+
 	mounted() {
-		this.mc = new Hammer(this.$el, { cssProps: { userSelect: 'text' } })
-		this.mc.on('swipeleft swiperight', e => {
-			this.handleSwipe(e)
-		})
+		if (this.allowSwipeNavigation) {
+			this.mc = new Hammer(this.$el, { cssProps: { userSelect: 'text' } })
+			this.mc.on('swipeleft swiperight', this.handleSwipe)
+		}
 	},
-	unmounted() {
-		this.mc.off('swipeleft swiperight')
-		this.mc.destroy()
+	beforeDestroy() {
+		this.mc.off('swipeleft swiperight', this.handleSwipe)
 	},
 	methods: {
-		/**
-		 * Toggle the navigation
-		 *
-		 * @param {Boolean} [state] set the state instead of inverting the current one
-		 */
-		toggleNavigation(state) {
-			this.opened = state || !this.opened
-			this.opened
-				? document.body.classList.add('nav-open')
-				: document.body.classList.remove('nav-open')
-		},
 		// handle the swipe event
 		handleSwipe(e) {
 			const minSwipeX = 70
@@ -78,21 +65,28 @@ export default {
 			const startX = e.srcEvent.pageX - e.deltaX
 			const hasEnoughDistance = Math.abs(e.deltaX) > minSwipeX
 			if (hasEnoughDistance && startX < touchzone) {
-				this.toggleNavigation(true)
-			} else if (this.opened && hasEnoughDistance && startX < touchzone + 300) {
-				this.toggleNavigation(false)
+				emit('toggle-navigation', {
+					open: true,
+				})
+			} else if (hasEnoughDistance && startX < touchzone + 300) {
+				emit('toggle-navigation', {
+					open: false,
+				})
 			}
 		},
 	},
 }
 </script>
 <style lang="scss" scoped>
+
 #app-content {
 	z-index: 1000;
 	background-color: var(--color-main-background);
 	position: relative;
 	flex-basis: 100vw;
 	min-height: 100%;
-	transition: transform var(--animation-quick);
+	// Overriding server styles TODO: cleanup!
+	margin: 0 !important;
 }
+
 </style>
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index d739f0e6e6..bf6b757d40 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -2,6 +2,7 @@
  - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
  -
  - @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ - @author John Molakvoæ <skjnldsv@protonmail.com>
  - @author Marco Ambrosini <marcoambrosini@pm.me>
  -
  - @license GNU AGPL version 3 or any later version
@@ -20,34 +21,118 @@
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
  -
  -->
+<docs>
+The navigation bar can be open and closed from anywhere in the app using the
+nextcloud event bus.
+
+### Install the event bus package
+
+```bash
+npm i -S @nextcloud/event-bus
+```
+
+### Usage
+
+#### Open the navigation
+
+```js static
+import { emit } from '@nextcloud/event-bus'
+emit('toggle-navigation', {
+	open: true,
+})
+```
+
+#### Close the navigation
+
+```js static
+import { emit } from '@nextcloud/event-bus'
+emit('toggle-navigation', {
+	open: false,
+})
+```
+
+</docs>
+
 <template>
-	<div id="app-navigation" class="vue">
+	<div
+		class="app-navigation"
+		:class="{'app-navigation--close':!open }">
+		<AppNavigationToggle :open.sync="open" />
 		<slot />
 	</div>
 </template>
 
 <script>
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
+import AppNavigationToggle from '../AppNavigationToggle/AppNavigationToggle'
+import isMobile from '../../mixins/isMobile'
+
 export default {
 	name: 'AppNavigation',
+
+	components: {
+		AppNavigationToggle,
+	},
+
+	mixins: [isMobile],
+
+	data() {
+		return {
+			open: true,
+		}
+	},
+
+	watch: {
+		isMobile() {
+			this.open = !this.isMobile
+		},
+	},
+
+	mounted() {
+		subscribe('toggle-navigation', this.toggleNavigationByEventBus)
+		// Emit an event with the initial state of the navigation
+		emit('navigation-toggled', {
+			open: this.open,
+		})
+	},
+	unmounted() {
+		this.mc.off('swipeleft swiperight')
+		this.mc.destroy()
+		unsubscribe('toggle-navigation', this.toggleNavigationByEventBus)
+	},
+
+	methods: {
+		/**
+		 * Toggle the navigation
+		 *
+		 * @param {Boolean} [state] set the state instead of inverting the current one
+		 */
+		toggleNavigation(state) {
+			this.open = state || !this.open
+			emit('navigation-toggled', {
+				open: this.open,
+			})
+		},
+		toggleNavigationByEventBus({ open }) {
+			this.toggleNavigation(open)
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/variables.scss';
 
-#app-navigation {
+.app-navigation {
 	will-change: transform;
-	transition: transform var(--animation-quick);
+	transition: transform var(--animation-quick), margin var(--animation-quick);
 	width: $navigation-width;
-	position: fixed;
+	position: sticky;
+	position: -webkit-sticky;
 	top: $header-height;
 	left: 0;
-	z-index: 500;
-	overflow-y: auto;
-	overflow-x: hidden;
-	// Do not use vh because of mobile headers
-	// are included in the calculation
-	height: calc(100% - #{$header-height});
+	// Above appcontent
+	z-index: 2000;
+	height: calc(100vh - #{$header-height});
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
 	-webkit-user-select: none;
@@ -59,25 +144,30 @@ export default {
 	flex-direction: column;
 	flex-grow: 0;
 	flex-shrink: 0;
-}
 
-//list of navigation items
-ul {
-	position: relative;
-	height: 100%;
-	width: inherit;
-	overflow-x: hidden;
-	overflow-y: auto;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
+	&--close {
+		margin-left: - $navigation-width;
+		transform: translateX(-100%);
+	}
+
+	//list of navigation items
+	ul {
+		position: relative;
+		height: 100%;
+		width: inherit;
+		overflow-x: hidden;
+		overflow-y: auto;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+	}
 }
 
-// mobile view only
+// When on mobile, we make the navigation slide over the appcontent
 @media only screen and (max-width: $breakpoint-mobile) {
-	// if navigation is shown
-	.nav-open #app-navigation {
-		transform: translateX(0);
+	.app-navigation:not(.app-navigation--close) {
+		margin-left: - $navigation-width;
 	}
 }
+
 </style>
diff --git a/src/components/AppNavigationToggle/AppNavigationToggle.vue b/src/components/AppNavigationToggle/AppNavigationToggle.vue
index c9df6ce353..e79efcb18b 100644
--- a/src/components/AppNavigationToggle/AppNavigationToggle.vue
+++ b/src/components/AppNavigationToggle/AppNavigationToggle.vue
@@ -2,6 +2,8 @@
  - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
  -
  - @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ - @author John Molakvoæ <skjnldsv@protonmail.com>
+ - @author Marco Ambrosini <marcoambrosini@pm.me>
  -
  - @license GNU AGPL version 3 or any later version
  -
@@ -20,19 +22,31 @@
  -
  -->
 <template>
-	<a id="app-navigation-toggle"
+	<a class="app-navigation-toggle"
 		tabindex="0"
 		href="#"
-		@click.prevent="emitClick"
-		@keydown.space.exact.prevent="emitClick" />
+		:aria-expanded="open"
+		aria-controls="app-navigation"
+		@click.prevent="toggleNavigation"
+		@keydown.space.exact.prevent="toggleNavigation" />
 </template>
 
 <script>
+
 export default {
+
 	name: 'AppNavigationToggle',
+
+	props: {
+		open: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
 	methods: {
-		emitClick() {
-			this.$emit('click')
+		toggleNavigation() {
+			this.$emit('update:open', !this.open)
 		},
 	},
 }
@@ -41,11 +55,11 @@ export default {
 <style scoped lang="scss">
 @import '../../fonts/scss/iconfont-vue';
 
-#app-navigation-toggle {
-	display: none;
-	position: fixed;
-	z-index: 1050; // above app-content
-	left: 0;
+.app-navigation-toggle {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin-right: - $clickable-area;
 	width: $clickable-area;
 	height: $clickable-area;
 	padding: $icon-margin;
@@ -62,10 +76,5 @@ export default {
 		opacity: $opacity_full;
 	}
 }
-// mobile only
-@media only screen and (max-width: 768px) {
-	#app-navigation-toggle {
-		display: inline-block !important;
-	}
-}
+
 </style>