Move navigation toggle to vue components

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/App.vue

@@ -21,11 +21,11 @@
  -->
 
 <template>
-	<div id="content" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
+	<Content id="content" app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
-		<AppNavigation v-show="navShown" />
+		<AppNavigation />
-		<div id="app-content">
+		<AppContent>
 			<router-view />
-		</div>
+		</AppContent>
 
 		<Modal v-if="cardDetailsInModal && $route.params.cardId" :title="t('deck', 'Card details')" @close="hideModal()">
 			<div class="modal__content modal__card">
@@ -34,15 +34,16 @@
 		</Modal>
 
 		<router-view v-show="!cardDetailsInModal || !$route.params.cardId" name="sidebar" />
-	</div>
+	</Content>
 </template>
 
 <script>
 
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation'
-import { Modal } from '@nextcloud/vue'
+import { Modal, Content, AppContent } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi'
+import { emit, subscribe } from '@nextcloud/event-bus'
 
 const boardApi = new BoardApi()
 
@@ -51,6 +52,8 @@ export default {
 	components: {
 		AppNavigation,
 		Modal,
+		Content,
+		AppContent,
 	},
 	data() {
 		return {
@@ -91,6 +94,15 @@ export default {
 		this.$store.dispatch('loadBoards')
 		this.$store.dispatch('loadSharees')
 	},
+	mounted() {
+		// Set navigation to initial state and update in case it gets toggled
+		emit('toggle-navigation', { open: this.navShown, _initial: true })
+		this.$nextTick(() => {
+			subscribe('navigation-toggled', (navState) => {
+				this.$store.dispatch('toggleNav', navState.open)
+			})
+		})
+	},
 	methods: {
 		hideModal() {
 			this.$router.push({ name: 'board' })

src/components/navigation/AppNavigation.vue

@@ -192,8 +192,4 @@ export default {
 			color: var(--color-text-light);
 		}
 	}
-
-	::v-deep .app-navigation-toggle {
-		display: none;
-	}
 </style>

src/store/main.js

@@ -58,7 +58,7 @@ export default new Vuex.Store({
 	state: {
 		config: loadState('deck', 'config', {}),
 		showArchived: false,
-		navShown: true,
+		navShown: localStorage.getItem('deck.navShown') === 'true',
 		compactMode: localStorage.getItem('deck.compactMode') === 'true',
 		cardDetailsInModal: localStorage.getItem('deck.cardDetailsInModal') === 'true',
 		sidebarShown: false,
@@ -203,8 +203,9 @@ export default new Vuex.Store({
 				return board.id !== b.id
 			})
 		},
-		toggleNav(state) {
+		toggleNav(state, navState) {
-			state.navShown = !state.navShown
+			state.navShown = navState
+			localStorage.setItem('deck.navShown', navState)
 		},
 		toggleSidebar(state) {
 			state.sidebarShown = !state.sidebarShown
@@ -408,8 +409,8 @@ export default new Vuex.Store({
 		setBoardFilter({ commmit }, filter) {
 			commmit('setBoardFilter', filter)
 		},
-		toggleNav({ commit }) {
+		toggleNav({ commit }, navState) {
-			commit('toggleNav')
+			commit('toggleNav', navState)
 		},
 		toggleSidebar({ commit }) {
 			commit('toggleSidebar')