diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 3068b768..0df28ddb 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -11,7 +11,6 @@ { - return page.url === this.$router.currentRoute.value.path; - }) - }, computed: { ...mapGetters({ isUserAuthenticated: 'user/isUserAuthenticated', @@ -87,34 +80,28 @@ export default defineComponent({ userProfile: 'user/getUserProfile' }) }, - watch:{ - $route (to) { - // When logout and login it should point to Oth index - // TODO Find a better way - if (to.path === '/login') { - this.selectedIndex = 0; - } - }, - }, setup() { const store = useStore(); - const selectedIndex = ref(0); + const router = useRouter(); const appPages = [ { title: "Inventory", url: "/inventory", + childRoutes: ["/inventory-review"], iosIcon: albumsOutline, mdIcon: albumsOutline }, { title: "Purchase order", url: "/purchase-order", + childRoutes: ["/purchase-order-review"], iosIcon: calendar, mdIcon: calendar }, { title: "Saved Mappings", url: "/saved-mappings", + childRoutes: ["/mapping/"], iosIcon: bookmarkOutline, mdIcon: bookmarkOutline }, @@ -123,8 +110,14 @@ export default defineComponent({ url: "/settings", iosIcon: settings, mdIcon: settings, - }, + } ]; + + const selectedIndex = computed(() => { + const path = router.currentRoute.value.path + return appPages.findIndex((screen) => screen.url === path || screen.childRoutes?.includes(path) || screen.childRoutes?.some((route) => path.includes(route))) + }) + return { selectedIndex, appPages, @@ -133,7 +126,7 @@ export default defineComponent({ settings, store }; - }, + } });