fix sidebar behaviour in mobile mode

Author: gko

src/App.vue

@@ -36,6 +36,7 @@ import AppSettings from './components/AppSettings'
 import NavigationList from './components/NavigationList'
 import NotesService from './NotesService'
 import store from './store'
+import { openNavbar } from './nextcloud'
 
 export default {
 	name: 'App',
@@ -164,10 +165,8 @@ export default {
 
 		onSearch(query) {
 			this.filter.search = query
-			// TODO move the following from jQuery to plain JS
-			if ($('#app-navigation-toggle').css('display') !== 'none' && !$('body').hasClass('snapjs-left')) {
-				$('#app-navigation-toggle').click()
-			}
+
+			openNavbar()
 		},
 
 		onResetSearch() {
@@ -192,8 +191,11 @@ export default {
 
 		onSelectCategory(category) {
 			this.filter.category = category
-			// TODO move the following from jQuery to plain JS
-			$('#app-navigation > ul').animate({ scrollTop: 0 }, 'fast')
+
+			const appNavigation = document.querySelector('#app-navigation > ul')
+			if (appNavigation) {
+				appNavigation.scrollTop = 0
+			}
 		},
 
 		onClose(event) {

src/components/Note.vue

@@ -61,6 +61,7 @@ import TheEditor from './EditorEasyMDE'
 import ThePreview from './EditorMarkdownIt'
 import NotesService from '../NotesService'
 import store from '../store'
+import { closeNavbar } from '../nextcloud'
 
 export default {
 	name: 'Note',
@@ -130,6 +131,9 @@ export default {
 	methods: {
 		fetchData() {
 			store.commit('setSidebarOpen', false)
+
+			closeNavbar()
+
 			this.onUpdateTitle(this.title)
 			this.loading = true
 			this.preview = false

src/nextcloud.js

@@ -0,0 +1,31 @@
+/**
+ * global nextcloud helpers
+ */
+
+const closeNavbar = () => {
+	const navigationToggle = document.getElementById('app-navigation-toggle')
+	const navOpen = document.body.classList.contains('nav-open')
+
+	if (
+		navigationToggle
+		&& navigationToggle.style.display !== 'none'
+		&& navOpen
+	) {
+		navigationToggle.click()
+	}
+}
+
+const openNavbar = () => {
+	const navigationToggle = document.getElementById('app-navigation-toggle')
+	const navOpen = document.body.classList.contains('nav-open')
+
+	if (
+		navigationToggle
+		&& navigationToggle.style.display !== 'none'
+		&& !navOpen
+	) {
+		navigationToggle.click()
+	}
+}
+
+export { closeNavbar, openNavbar }