feat: Toggle notes list sidebar

Signed-off-by: Enjeck C <[email protected]>

Author: enjeck

src/components/CategoriesList.vue

@@ -5,6 +5,9 @@
 
 <template>
 	<Fragment>
+		<NcButton @click="onToggleNotesList">
+			{{ t('notes', 'Toggle Notes List') }}
+		</NcButton>
 		<NcAppNavigationItem
 			:name="t('notes', 'All notes')"
 			:class="{ active: selectedCategory === null }"
@@ -47,6 +50,7 @@ import {
 	NcAppNavigationItem,
 	NcAppNavigationCaption,
 	NcCounterBubble,
+	NcButton,
 } from '@nextcloud/vue'
 import { Fragment } from 'vue-frag'
 
@@ -65,6 +69,7 @@ export default {
 		Fragment,
 		NcAppNavigationItem,
 		NcAppNavigationCaption,
+		NcButton,
 		NcCounterBubble,
 		FolderIcon,
 		FolderOutlineIcon,
@@ -83,9 +88,16 @@ export default {
 		selectedCategory() {
 			return store.getters.getSelectedCategory()
 		},
+		toggleNotesList() {
+			return store.getters.getToggleNotesList()
+		},
 	},
 
 	methods: {
+		onToggleNotesList() {
+			store.commit('setToggleNotesList', !this.toggleNotesList)
+		},
+
 		categoryTitle(category) {
 			return categoryLabel(category)
 		},

src/components/NotesView.vue

@@ -6,7 +6,7 @@
 <template>
 	<NcAppContent pane-config-key="note" :show-details="showNote" @update:showDetails="hideNote">
 		<template slot="list">
-			<NcAppContentList class="content-list">
+			<NcAppContentList v-if="!showNotesList" class="content-list">
 				<div class="content-list__search">
 					<NcTextField
 						:value.sync="searchText"
@@ -59,7 +59,6 @@
 </template>
 
 <script>
-
 import {
 	NcAppContent,
 	NcAppContentList,
@@ -131,6 +130,9 @@ export default {
 				return this.filteredNotes
 			}
 		},
+		showNotesList() {
+			return store.state.app.toggleNotesList
+		},
 
 		// group notes by time ("All notes") or by category (if category chosen)
 		groupedNotes() {

src/store/app.js

@@ -11,9 +11,13 @@ const state = {
 	isManualSave: false,
 	documentTitle: null,
 	searchText: '',
+	toggleNotesList: false,
 }
 
 const getters = {
+	getToggleNotesList: (state) => () => {
+		return state.toggleNotesList
+	},
 }
 
 const mutations = {
@@ -40,6 +44,10 @@ const mutations = {
 	updateSearchText(state, searchText) {
 		state.searchText = searchText
 	},
+
+	setToggleNotesList(state, value) {
+		state.toggleNotesList = value
+	},
 }
 
 const actions = {