playing with programmatic navigation creation

vue3/src/apps/tandoor/Tandoor.vue

@@ -37,58 +37,8 @@
                             <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
                         </v-list-item>
                         <v-divider></v-divider>
-                        <v-list-item :to="{ name: 'SettingsPage', params: {} }">
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-sliders"></v-icon>
-                            </template>
-                            {{ $t('Settings') }}
-                        </v-list-item>
-                        <v-list-item :to="{ name: 'DatabasePage', params: {} }">
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-folder-tree"></v-icon>
-                            </template>
-                            {{ $t('Database') }}
-                        </v-list-item>
-                        <v-list-item :to="{ name: 'HelpPage' }">
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-question"></v-icon>
-                            </template>
-                            {{ $t('Help') }}
-                        </v-list-item>
-                        <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
-                        <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
-                        <template v-if="useUserPreferenceStore().spaces.length > 1">
-                            <v-divider></v-divider>
-                            <v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
-                            <v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
-                                <template #prepend>
-                                    <v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
-                                    <v-icon icon="fa-solid fa-circle" v-else></v-icon>
-                                </template>
-                                {{ s.name }}
-                            </v-list-item>
-                        </template>
 
-                        <v-divider></v-divider>
+                        <component :is="item.component" :="item" v-for="item in useNavigation().getUserNavigation()"></component>
-                        <v-list-item link>
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-database"></v-icon>
-                            </template>
-                            {{ $t('Messages') }}
-                            <message-list-dialog></message-list-dialog>
-                        </v-list-item>
-                        <v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-shield"></v-icon>
-                            </template>
-                            {{ $t('Admin') }}
-                        </v-list-item>
-                        <v-list-item :href="getDjangoUrl('accounts/logout')" link>
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
-                            </template>
-                            {{ $t('Logout') }}
-                        </v-list-item>
                     </v-list>
                 </v-menu>
             </v-avatar>
@@ -129,18 +79,11 @@
                     <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
                 </v-list-item>
                 <v-divider></v-divider>
-                <v-list-item prepend-icon="$recipes" title="Home" :to="{ name: 'StartPage', params: {} }"></v-list-item>
+                <component :is="item.component" :="item" v-for="item in useNavigation().NAVIGATION_DRAWER"></component>
-                <v-list-item prepend-icon="$search" :title="$t('Search')" :to="{ name: 'SearchPage' }"></v-list-item>
-                <v-list-item prepend-icon="$mealplan" :title="$t('Meal_Plan')" :to="{ name: 'MealPlanPage', params: {} }"></v-list-item>
-                <v-list-item prepend-icon="$shopping" :title="$t('Shopping_list')" :to="{ name: 'ShoppingListPage', params: {} }"></v-list-item>
-                <v-list-item prepend-icon="fas fa-globe" :title="$t('Import')" :to="{ name: 'RecipeImportPage', params: {} }"></v-list-item>
-                <v-list-item prepend-icon="$books" :title="$t('Books')" :to="{ name: 'BooksPage', params: {} }"></v-list-item>
-                <v-list-item prepend-icon="fa-solid fa-folder-tree" :title="$t('Database')" :to="{ name: 'DatabasePage' }"></v-list-item>
 
                 <navigation-drawer-context-menu></navigation-drawer-context-menu>
             </v-list>
 
-
             <template #append>
                 <v-list nav>
                     <v-list-item prepend-icon="fas fa-sliders" :title="$t('Settings')" :to="{ name: 'SettingsPage', params: {} }"></v-list-item>
@@ -170,10 +113,7 @@
                 <v-icon icon="fa-fw fas fa-bars"></v-icon>
                 <v-bottom-sheet activator="parent" close-on-content-click>
                     <v-list nav>
-                        <v-list-item prepend-icon="fa-solid fa-sliders" :to="{ name: 'SettingsPage', params: {} }" :title="$t('Settings')"></v-list-item>
+                        <component :is="item.component" :="item" v-for="item in useNavigation().BOTTOM_NAVIGATION"></component>
-                        <v-list-item prepend-icon="fas fa-globe" :title="$t('Import')" :to="{ name: 'RecipeImportPage', params: {} }"></v-list-item>
-                        <v-list-item prepend-icon="fa-solid fa-folder-tree" :to="{ name: 'DatabasePage' }" :title="$t('Database')"></v-list-item>
-                        <v-list-item prepend-icon="$books" :title="$t('Books')" :to="{ name: 'BooksPage', params: {} }"></v-list-item>
                     </v-list>
                 </v-bottom-sheet>
             </v-btn>
@@ -201,6 +141,8 @@ import {onMounted} from "vue";
 import {isSpaceAboveLimit} from "@/utils/logic_utils";
 import {useMediaQuery} from "@vueuse/core";
 import HelpDialog from "@/components/dialogs/HelpDialog.vue";
+import {NAVIGATION_DRAWER} from "@/utils/navigation.ts";
+import {useNavigation} from "@/composables/useNavigation.ts";
 
 const {lgAndUp} = useDisplay()
 const {getDjangoUrl} = useDjangoUrls()

vue3/src/composables/useNavigation.ts

@@ -0,0 +1,81 @@
+import {useI18n} from "vue-i18n";
+import {VDivider, VListItem} from "vuetify/components";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore.ts";
+import {useDjangoUrls} from "@/composables/useDjangoUrls.ts";
+
+/**
+ * manages configuration and loading of navigation entries for tandoor main app and plugins
+ */
+export function useNavigation() {
+    const {t} = useI18n()
+
+    let NAVIGATION_DRAWER = [
+        {component: VListItem, prependIcon: '$recipes', title: 'Home', to: {name: 'StartPage', params: {}}},
+        {component: VListItem, prependIcon: '$search', title: t('Search'), to: {name: 'SearchPage', params: {}}},
+        {component: VListItem, prependIcon: '$mealplan', title: t('Meal_Plan'), to: {name: 'MealPlanPage', params: {}}},
+        {component: VListItem, prependIcon: '$shopping', title: t('Shopping_list'), to: {name: 'ShoppingListPage', params: {}}},
+        {component: VListItem, prependIcon: 'fas fa-globe', title: t('Import'), to: {name: 'RecipeImportPage', params: {}}},
+        {component: VListItem, prependIcon: '$books', title: t('Books'), to: {name: 'BooksPage', params: {}}},
+        {component: VListItem, prependIcon: 'fa-solid fa-folder-tree', title: t('DatabasePage'), to: {name: 'SearchPage', params: {}}},
+    ]
+
+    let BOTTOM_NAVIGATION = [
+        {component: VListItem, prependIcon: 'fa-solid fa-sliders', title: t('Settings'), to: {name: 'SettingsPage', params: {}}},
+        {component: VListItem, prependIcon: 'fas fa-globe', title: t('Import'), to: {name: 'RecipeImportPage', params: {}}},
+        {component: VListItem, prependIcon: 'fa-solid fa-folder-tree', title: t('Database'), to: {name: 'DatabasePage', params: {}}},
+        {component: VListItem, prependIcon: '$books', title: t('Books'), to: {name: 'BooksPage', params: {}}},
+    ]
+
+    let USER_NAVIGATION = [
+        {component: VListItem, prependIcon: 'fa-solid fa-sliders', title: t('Settings'), to: {name: 'SettingsPage', params: {}}},
+        {component: VListItem, prependIcon: 'fa-solid fa-question', title: t('Settings'), to: {name: 'HelpPage', params: {}}},
+    ]
+
+    function getUserNavigation() {
+        let navigation = []
+
+        navigation.push({component: VListItem, prependIcon: 'fa-solid fa-sliders', title: t('Settings'), to: {name: 'SettingsPage', params: {}}})
+        navigation.push({component: VListItem, prependIcon: 'fa-solid fa-question', title: t('Help'), to: {name: 'HelpPage', params: {}}})
+
+        if (useUserPreferenceStore().userSettings.user.isSuperuser) {
+            navigation.push({component: VListItem, prependIcon: 'fa-solid fa-shield', title: t('Admin'), href: useDjangoUrls().getDjangoUrl('admin')})
+        }
+
+        if (useUserPreferenceStore().spaces.length > 1) {
+            navigation.push({component: VDivider})
+            useUserPreferenceStore().spaces.forEach(space => {
+                navigation.push({
+                    component: VListItem,
+                    prependIcon: (useUserPreferenceStore().activeSpace.id == space.id) ? 'fa-solid fa-circle-dot' : 'fa-solid fa-circle',
+                    title: space.name,
+                    onClick: () => {
+                        useUserPreferenceStore().switchSpace(space)
+                    }
+                })
+            })
+            navigation.push({component: VDivider})
+        }
+
+        navigation.push({component: VListItem, prependIcon: 'fa-solid fa-arrow-right-from-bracket', title: t('Logout'), href: useDjangoUrls().getDjangoUrl('accounts/logout')})
+
+        return navigation
+    }
+
+    return {NAVIGATION_DRAWER, BOTTOM_NAVIGATION, USER_NAVIGATION, getUserNavigation}
+}
+
+
+//
+
+// <v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
+//     <template #prepend>
+//         <v-icon icon="fa-solid fa-shield"></v-icon>
+//     </template>
+//     {{ $t('Admin') }}
+// </v-list-item>
+// <v-list-item :href="getDjangoUrl('accounts/logout')" link>
+//     <template #prepend>
+//         <v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
+//     </template>
+//     {{ $t('Logout') }}
+// </v-list-item>