From 591457458ebb44dc06bc7a750ef1fac4e2474832 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                             | 218 ------------------
 package.json                                  |   1 +
 src/components/AppContent/AppContent.vue      |  58 +----
 .../AppNavigation/AppNavigation.vue           | 121 ++++++++--
 .../AppNavigationToggle.vue                   |  41 ++--
 5 files changed, 130 insertions(+), 309 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a24ddb54d..dc5e631539 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4963,15 +4963,6 @@
 				"test-exclude": "^6.0.0"
 			}
 		},
-		"babel-plugin-jest-hoist": {
-			"version": "25.2.1",
-			"resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-25.2.1.tgz",
-			"integrity": "sha512-HysbCQfJhxLlyxDbKcB2ucGYV0LjqK4h6dBoI3RtFuOxTiTWK6XGZMsHb0tGh8iJdV4hC6Z2GCHzVvDeh9i0lQ==",
-			"dev": true,
-			"requires": {
-				"@types/babel__traverse": "^7.0.6"
-			}
-		},
 		"babel-plugin-transform-es2015-modules-commonjs": {
 			"version": "6.26.2",
 			"resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz",
@@ -4994,17 +4985,6 @@
 				"babel-types": "^6.24.1"
 			}
 		},
-		"babel-preset-jest": {
-			"version": "25.2.1",
-			"resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-25.2.1.tgz",
-			"integrity": "sha512-zXHJBM5iR8oEO4cvdF83AQqqJf3tJrXy3x8nfu2Nlqvn4cneg4Ca8M7cQvC5S9BzDDy1O0tZ9iXru9J6E3ym+A==",
-			"dev": true,
-			"requires": {
-				"@babel/plugin-syntax-bigint": "^7.0.0",
-				"@babel/plugin-syntax-object-rest-spread": "^7.0.0",
-				"babel-plugin-jest-hoist": "^25.2.1"
-			}
-		},
 		"babel-runtime": {
 			"version": "6.26.0",
 			"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -12982,192 +12962,6 @@
 			"integrity": "sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==",
 			"dev": true
 		},
-		"jest-haste-map": {
-			"version": "25.2.3",
-			"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-25.2.3.tgz",
-			"integrity": "sha512-pAP22OHtPr4qgZlJJFks2LLgoQUr4XtM1a+F5UaPIZNiCRnePA0hM3L7aiJ0gzwiNIYwMTfKRwG/S1L28J3A3A==",
-			"dev": true,
-			"requires": {
-				"@jest/types": "^25.2.3",
-				"anymatch": "^3.0.3",
-				"fb-watchman": "^2.0.0",
-				"fsevents": "^2.1.2",
-				"graceful-fs": "^4.2.3",
-				"jest-serializer": "^25.2.1",
-				"jest-util": "^25.2.3",
-				"jest-worker": "^25.2.1",
-				"micromatch": "^4.0.2",
-				"sane": "^4.0.3",
-				"walker": "^1.0.7",
-				"which": "^2.0.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "25.2.3",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-25.2.3.tgz",
-					"integrity": "sha512-6oLQwO9mKif3Uph3RX5J1i3S7X7xtDHWBaaaoeKw8hOzV6YUd0qDcYcHZ6QXMHDIzSr7zzrEa51o2Ovlj6AtKQ==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^1.1.1",
-						"@types/yargs": "^15.0.0",
-						"chalk": "^3.0.0"
-					}
-				},
-				"ansi-styles": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-					"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-					"dev": true,
-					"requires": {
-						"@types/color-name": "^1.1.1",
-						"color-convert": "^2.0.1"
-					}
-				},
-				"anymatch": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-					"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"chalk": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-					"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"fsevents": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
-					"integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
-					"dev": true,
-					"optional": true
-				},
-				"graceful-fs": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
-					"integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
-					"dev": true
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-util": {
-					"version": "25.2.3",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-25.2.3.tgz",
-					"integrity": "sha512-7tWiMICVSo9lNoObFtqLt9Ezt5exdFlWs5fLe1G4XLY2lEbZc814cw9t4YHScqBkWMfzth8ASHKlYBxiX2rdCw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^25.2.3",
-						"chalk": "^3.0.0",
-						"is-ci": "^2.0.0",
-						"make-dir": "^3.0.0"
-					}
-				},
-				"make-dir": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz",
-					"integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==",
-					"dev": true,
-					"requires": {
-						"semver": "^6.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
-					"integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.0.5"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "7.1.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-					"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
-			}
-		},
 		"jest-jasmine2": {
 			"version": "25.2.6",
 			"resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-25.2.6.tgz",
@@ -13613,12 +13407,6 @@
 			"integrity": "sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==",
 			"dev": true
 		},
-		"jest-regex-util": {
-			"version": "25.2.1",
-			"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-25.2.1.tgz",
-			"integrity": "sha512-wroFVJw62LdqTdkL508ZLV82FrJJWVJMIuYG7q4Uunl1WAPTf4ftPKrqqfec4SvOIlvRZUdEX2TFpWR356YG/w==",
-			"dev": true
-		},
 		"jest-resolve": {
 			"version": "25.2.6",
 			"resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-25.2.6.tgz",
@@ -14582,12 +14370,6 @@
 				}
 			}
 		},
-		"jest-serializer": {
-			"version": "25.2.1",
-			"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-25.2.1.tgz",
-			"integrity": "sha512-fibDi7M5ffx6c/P66IkvR4FKkjG5ldePAK1WlbNoaU4GZmIAkS9Le/frAwRUFEX0KdnisSPWf+b1RC5jU7EYJQ==",
-			"dev": true
-		},
 		"jest-serializer-vue": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/jest-serializer-vue/-/jest-serializer-vue-2.0.2.tgz",
diff --git a/package.json b/package.json
index 1b2bae2167..a5fa3415a4 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
 	],
 	"dependencies": {
 		"@nextcloud/axios": "^1.1.0",
+		"@nextcloud/event-bus": "^1.1.3",
 		"@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..ee90d91fcc 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,18 +23,13 @@
  -->
 
 <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>
 </template>
 
 <script>
-import Hammer from 'hammerjs'
-import AppNavigationToggle from '../AppNavigationToggle'
 
 /**
  * App content container to be used for the main content of your app
@@ -40,59 +37,18 @@ import AppNavigationToggle from '../AppNavigationToggle'
  */
 export default {
 	name: 'AppContent',
-	components: {
-		AppNavigationToggle,
-	},
-	data() {
-		return {
-			// closed by default on mobile mode
-			opened: false,
-		}
-	},
-	mounted() {
-		this.mc = new Hammer(this.$el, { cssProps: { userSelect: 'text' } })
-		this.mc.on('swipeleft swiperight', e => {
-			this.handleSwipe(e)
-		})
-	},
-	unmounted() {
-		this.mc.off('swipeleft swiperight')
-		this.mc.destroy()
-	},
-	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
-			const touchzone = 40
-			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)
-			}
-		},
-	},
 }
 </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..8e567a501d 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
@@ -21,33 +22,100 @@
  -
  -->
 <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 Hammer from 'hammerjs'
+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() {
+		this.mc = new Hammer(this.$el, { cssProps: { userSelect: 'text' } })
+		this.mc.on('swipeleft swiperight', e => {
+			this.handleSwipe(e)
+		})
+		subscribe('toggle-navigation', this.toggleNavigationByEventBus)
+	},
+	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)
+		},
+		// handle the swipe event
+		handleSwipe(e) {
+			const minSwipeX = 70
+			const touchzone = 40
+			const startX = e.srcEvent.pageX - e.deltaX
+			const hasEnoughDistance = Math.abs(e.deltaX) > minSwipeX
+			if (hasEnoughDistance && startX < touchzone) {
+				this.toggleNavigation(true)
+			} else if (this.open && hasEnoughDistance && startX < touchzone + 300) {
+				this.toggleNavigation(false)
+			}
+		},
+	},
 }
 </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;
+	// Above appcontent
+	z-index: 2000;
 	// Do not use vh because of mobile headers
 	// are included in the calculation
-	height: calc(100% - #{$header-height});
+	height: 100%;
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
 	-webkit-user-select: none;
@@ -59,25 +127,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>