feat!: refactor general and navigation utility

- either both now use local storage instead of session storage - rename `menu-preference` to `app-navigation` for concistency with `app-` prefix - fix page routing from `appNavigation.activeKey` on page reload Signed-off-by: Fery Wardiyanto <[email protected]>
creasico · Dec 24, 2023 · d3c4ce4 · d3c4ce4
1 parent 22b2489
commit d3c4ce4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/resources/client/layouts/app-layout.vue b/resources/client/layouts/app-layout.vue
@@ -43,7 +43,7 @@ const {
 } = useNavigation('user')
 
 const pageTitle = computed(() => props.title || t(props.page))
-const siderCollapsed = computed(() => menuPreference.value.collapsed || (onMediumScreen.value && !onSmallScreen.value))
+const siderCollapsed = computed(() => appNavigation.value.collapsed || (onMediumScreen.value && !onSmallScreen.value))
 const siderPosition = computed(() => onSmallScreen.value ? 'absolute' : 'static')
 const siderCollapsedMode = computed(() => onSmallScreen.value ? 'transform' : 'width')
 const siderCollapsedWidth = computed(() => onSmallScreen.value ? 0 : 64)
@@ -117,8 +117,8 @@ function touchEnd(e: TouchEvent) {
         <main id="main-navigation" class="n-layout-sider-section w-full flex-grow py-2">
           <n-menu
             ref="mainMenu"
-            v-model:value="menuPreference.activeKey"
-            v-model:expanded-keys="menuPreference.expandedKeys"
+            v-model:value="appNavigation.activeKey"
+            v-model:expanded-keys="appNavigation.expandedKeys"
             :collapsed-icon-size="22"
             :collapsed-width="64"
             :on-update:expanded-keys="updateMainExpandedKeys"

diff --git a/resources/client/utils/general.ts b/resources/client/utils/general.ts
@@ -20,7 +20,7 @@ export interface AppPreference {
 /**
  * State of global application preference.
  */
-export const appPreference: RemovableRef<AppPreference> = useSessionStorage<AppPreference>('app-preference', {
+export const appPreference: RemovableRef<AppPreference> = useLocalStorage<AppPreference>('app-preference', {
   locale: document.documentElement.lang,
   theme: 'auto',
 })
diff --git a/resources/client/utils/navigations.ts b/resources/client/utils/navigations.ts
@@ -22,7 +22,7 @@ export interface BreadcrumbItem extends BreadcrumbItemProps {
 /**
  * Global menu preference.
  */
-export interface MenuPreference {
+export interface AppNavigation {
   collapsed: boolean
   activeKey?: string
   expandedKeys: string[]
@@ -63,7 +63,7 @@ export type NavigationType = keyof NavigationOptions
 /**
  * State of global menu preference.
  */
-export const menuPreference: RemovableRef<MenuPreference> = useSessionStorage<MenuPreference>('menu-preference', {
+export const appNavigation: RemovableRef<AppNavigation> = useLocalStorage<AppNavigation>('app-navigation', {
   collapsed: false,
   expandedKeys: [],
 })
@@ -127,10 +127,13 @@ function transformMenu(type: NavigationType, parent?: MenuOption) {
       },
     }
 
-    if (!menuPreference.value.activeKey && menu.active)
+    if (appNavigation.value.activeKey && appNavigation.value.activeKey === menu.key)
+      router.get(route(nav.route as string))
+
+    if (!appNavigation.value.activeKey && menu.active)
       updateActiveKey(menu.key as string)
 
-    if (menuPreference.value.expandedKeys.length === 0 && menu.active && !!parent)
+    if (appNavigation.value.expandedKeys.length === 0 && menu.active && !!parent)
       updateExpandedKeys([parent.key as string])
 
     if (nav.children)
@@ -141,15 +144,15 @@ function transformMenu(type: NavigationType, parent?: MenuOption) {
 }
 
 function updateCollapse(collapsed: boolean) {
-  menuPreference.value.collapsed = collapsed
+  appNavigation.value.collapsed = collapsed
 }
 
 function updateActiveKey(key?: string) {
-  menuPreference.value.activeKey = key
+  appNavigation.value.activeKey = key
 }
 
 function updateExpandedKeys(keys: string[]) {
-  menuPreference.value.expandedKeys = keys
+  appNavigation.value.expandedKeys = keys
 }
 
 /**
@@ -159,7 +162,7 @@ function updateExpandedKeys(keys: string[]) {
  * @returns Navigation configurations
  */
 export function useNavigation(type: NavigationType): Navigations {
-  if (menuPreference.value.activeKey === 'logout') {
+  if (appNavigation.value.activeKey === 'logout') {
     updateActiveKey()
     updateExpandedKeys([])
   }