From d92ea9e61ac33af3b527807e6e338d1546d67186 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Jun 2021 18:16:55 -0400
Subject: [PATCH] Show create button on empty dashboards in nav

---
 app/src/modules/insights/components/navigation.vue | 11 +++++++++--
 app/src/modules/insights/routes/overview.vue       |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/src/modules/insights/components/navigation.vue b/app/src/modules/insights/components/navigation.vue
index 1cace0ff98..cdfa3ef9d2 100644
--- a/app/src/modules/insights/components/navigation.vue
+++ b/app/src/modules/insights/components/navigation.vue
@@ -1,6 +1,10 @@
 <template>
 	<v-list large>
-		<v-list-item v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
+		<v-button v-if="navItems.length === 0" fullWidth outlined dashed @click="$emit('create')">
+			{{ t('create_dashboard') }}
+		</v-button>
+
+		<v-list-item v-else v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
 			<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
 			<v-list-item-content>
 				<v-text-overflow :text="navItem.name" />
@@ -13,10 +17,13 @@
 import { defineComponent, computed, ref } from 'vue';
 import { useInsightsStore } from '@/stores';
 import { Dashboard } from '@/types';
+import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
+	emits: ['create'],
 	name: 'InsightsNavigation',
 	setup() {
+		const { t } = useI18n();
 		const insightsStore = useInsightsStore();
 
 		const createDialogActive = ref(false);
@@ -29,7 +36,7 @@ export default defineComponent({
 			}))
 		);
 
-		return { navItems, createDialogActive };
+		return { navItems, createDialogActive, t };
 	},
 });
 </script>
diff --git a/app/src/modules/insights/routes/overview.vue b/app/src/modules/insights/routes/overview.vue
index 9ebb71236b..65c012e874 100644
--- a/app/src/modules/insights/routes/overview.vue
+++ b/app/src/modules/insights/routes/overview.vue
@@ -7,7 +7,7 @@
 		</template>
 
 		<template #navigation>
-			<insights-navigation />
+			<insights-navigation @create="createDialogActive = true" />
 		</template>
 
 		<template #actions>