Allow to toggle sidebar and always show the toggle

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

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",

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,78 +23,32 @@
  -->
 
 <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
  *
  */
 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>