Rework routing to make sidebar dependent on child routes

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

src/components/Controls.vue

@@ -35,6 +35,9 @@
 			<a href="#todo">{{ board.title }}</a>
 			<span style="display: inline;" class="icon-shared" />
 		</div>
+		<div class="board-actions">
+			<router-link :to="{name: 'board.details'}" v-tooltip="t('deck', 'Board settings')" class="icon-settings" tag="button"></router-link>
+		</div>
 	</div>
 
 </template>
@@ -52,6 +55,9 @@ export default {
 	methods: {
 		toggleNav() {
 			this.$store.dispatch('toggleNav')
+		},
+		toggleSidebar: function() {
+			this.$store.dispatch('toggleSidebar')
 		}
 	}
 }
@@ -67,4 +73,14 @@ export default {
 		position: static;
 	}
 
+	.board-actions {
+		flex-grow: 1;
+		order: 100;
+		display: flex;
+		justify-content: flex-end;
+	}
+	button.icon-settings {
+		width: 44px;
+	}
+
 </style>

src/components/board/Board.vue

@@ -24,7 +24,6 @@
 	<div>
 		<Controls :board="board" />
 		<div v-if="board">
-			board {{ board.title }}<br>
 			<!-- example for external drop zone -->
 			<container :should-accept-drop="() => true" style="border:1px solid #aaa;" />
 			<button @click="toggleSidebar">toggle sidebar</button>
@@ -104,7 +103,7 @@ export default {
 			board: state => state.currentBoard
 		}),
 		orderedCards() {
-			//return (stack) => _.orderBy(this.stacks[stack].cards, 'order')
+			// return (stack) => _.orderBy(this.stacks[stack].cards, 'order')
 		}
 
 	},

src/components/board/BoardSidebar.vue

@@ -23,9 +23,6 @@
 <template>
 	<div class="sidebar">
 		<div class="sidebar-header">
-			<a class="icon-close" title="Close" @click="closeSidebar">
-				<span class="hidden-visually">Close</span>
-			</a>
 			<h3>{{ board.title }}</h3>
 		</div>
 
@@ -56,16 +53,12 @@
 
 <script>
 import { Avatar } from 'nextcloud-vue'
+import { mapState } from 'vuex'
+
 export default {
 	name: 'BoardSidebar',
 	components: { Avatar },
 	props: {
-		board: {
-			type: Object,
-			default: function() {
-				return {}
-			}
-		}
 	},
 	data() {
 		return {
@@ -90,6 +83,11 @@ export default {
 			]
 		}
 	},
+	computed: {
+		...mapState({
+			board: state => state.currentBoard
+		})
+	},
 	methods: {
 		closeSidebar() {
 			this.$store.dispatch('toggleSidebar')