Show create button on empty dashboards in nav

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>

app/src/modules/insights/routes/overview.vue

@@ -7,7 +7,7 @@
 		</template>
 
 		<template #navigation>
-			<insights-navigation />
+			<insights-navigation @create="createDialogActive = true" />
 		</template>
 
 		<template #actions>