Move navigation toggle handling to @nextcloud/vue native one

src/App.vue

@@ -21,11 +21,11 @@
  -->
 
 <template>
-	<div id="content" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
-		<AppNavigation v-show="navShown" />
-		<div id="app-content">
+	<Content id="content" app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
+		<AppNavigation />
+		<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/Controls.vue

@@ -22,17 +22,17 @@
 
 <template>
 	<div class="controls">
-		<div id="app-navigation-toggle-custom" class="icon-menu" @click="toggleNav" />
-		<div v-if="board" class="board-title">
+		<div v-if="overviewName" class="board-title">
+			<div class="board-bullet icon-calendar-dark" />
+			<h2>{{ overviewName }}</h2>
+		</div>
+		<div v-else-if="board" class="board-title">
 			<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
-			<h2><a href="#">{{ board.title }}</a></h2>
+			<h2>{{ board.title }}</h2>
 			<p v-if="showArchived">
 				({{ t('deck', 'Archived cards') }})
 			</p>
 		</div>
-		<div v-if="overviewName" class="board-title">
-			<h2><a href="#">{{ overviewName }}</a></h2>
-		</div>
 		<div v-if="board" class="board-actions">
 			<div v-if="canManage && !showArchived && !board.archived"
 				id="stack-add"
@@ -321,6 +321,9 @@ export default {
 <style lang="scss" scoped>
 	.controls {
 		display: flex;
+		padding: 3px;
+		height: 44px;
+		padding-left: 44px;
 
 		.board-title {
 			display: flex;
@@ -337,7 +340,7 @@ export default {
 				height: 20px;
 				border: none;
 				border-radius: 50%;
-				background-color: #aaa;
+				background-color: transparent;
 				margin: 12px;
 				margin-left: -4px;
 			}

src/components/board/Board.vue

@@ -181,7 +181,7 @@ export default {
 	}
 
 	.board {
-		margin-left: $board-spacing;
+		padding-left: $board-spacing;
 		position: relative;
 		height: calc(100% - 44px);
 		overflow-x: scroll;

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) {
-			state.navShown = !state.navShown
+		toggleNav(state, navState) {
+			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 }) {
-			commit('toggleNav')
+		toggleNav({ commit }, navState) {
+			commit('toggleNav', navState)
 		},
 		toggleSidebar({ commit }) {
 			commit('toggleSidebar')