feat(navbar): adds navbar drawer router outlet

Author: dvcol

src/components/AppComponent.vue

@@ -12,7 +12,15 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
 
 <template>
   <header>
-    <NavbarComponent v-if="isAuthenticated" />
+    <RouterView v-slot="{ Component, route }" name="navbar">
+      <NavbarComponent v-if="isAuthenticated">
+        <template v-if="Component" #drawer>
+          <KeepAlive>
+            <component :is="Component" :key="route.path" />
+          </KeepAlive>
+        </template>
+      </NavbarComponent>
+    </RouterView>
   </header>
   <main>
     <RouterView v-slot="{ Component, route }">

src/components/common/navbar/NavbarComponent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NTab, NTabs } from 'naive-ui';
-import { ref } from 'vue';
+import { computed, ref, useSlots } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDopdown.vue';
@@ -11,6 +11,7 @@ import { useI18n } from '~/utils';
 const i18n = useI18n('route');
 const route = useRoute();
 const router = useRouter();
+const slots = useSlots();
 
 const navigate = (to: Route) => {
   router.push(to);
@@ -19,6 +20,8 @@ const navigate = (to: Route) => {
 const routes = [Route.Progress, Route.Calendar, Route.History, Route.List, Route.Search];
 
 const isHover = ref(false);
+const showDrawer = computed(() => route.name && !!slots.drawer && isHover.value);
+
 const navElement = ref<HTMLElement>();
 </script>
 
@@ -51,8 +54,8 @@ const navElement = ref<HTMLElement>();
         <NavbarSettingsDropdown v-if="navElement" :parent-element="navElement" />
       </NTab>
     </NTabs>
-    <div class="drawer" :class="{ visible: isHover }">
-      <div>This is an optional drawer</div>
+    <div class="drawer" :class="{ visible: showDrawer }">
+      <slot name="drawer"></slot>
     </div>
   </nav>
 </template>

src/components/views/history/HistoryNavbar.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>History Navbar</div>
+</template>

src/router/routes.ts

@@ -23,12 +23,18 @@ export const routes: RouteRecordRaw[] = [
   {
     path: `/${Route.Calendar}`,
     name: Route.Calendar,
-    component: () => import('../components/views/calendar/CalendarComponent.vue'),
+    components: {
+      default: () => import('../components/views/calendar/CalendarComponent.vue'),
+      navbar: () => import('../components/views/calendar/CalendarNavbar.vue'),
+    },
   },
   {
     path: `/${Route.History}`,
     name: Route.History,
-    component: () => import('../components/views/history/HistoryComponent.vue'),
+    components: {
+      default: () => import('../components/views/history/HistoryComponent.vue'),
+      navbar: () => import('../components/views/history/HistoryNavbar.vue'),
+    },
   },
   {
     path: `/${Route.List}`,

src/stores/router.store.ts

@@ -25,6 +25,7 @@ export const useRouterStore = defineStore('router', () => {
   };
 
   const setLastRoute = (_route: RouteLocationNormalized) => {
+    if (lastRoute.value?.name === _route.name) return;
     lastRoute.value = _route;
     return storage.local.set('app.state.last-route', _route);
   };