<script setup lang="ts">
|
import { ref, watch } from 'vue';
|
import { useRoute } from 'vue-router';
|
import { SimpleScrollbar } from '@sa/materials';
|
import type { RouteKey } from '@elegant-router/types';
|
import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
|
import { useAppStore } from '@/store/modules/app';
|
import { useThemeStore } from '@/store/modules/theme';
|
import { useRouteStore } from '@/store/modules/route';
|
import { useRouterPush } from '@/hooks/common/router';
|
import { useMenu, useMixMenuContext } from '../context';
|
|
defineOptions({
|
name: 'TopHybridHeaderFirst'
|
});
|
|
const route = useRoute();
|
const appStore = useAppStore();
|
const themeStore = useThemeStore();
|
const routeStore = useRouteStore();
|
const { routerPushByKeyWithMetaQuery } = useRouterPush();
|
const {
|
firstLevelMenus,
|
secondLevelMenus,
|
activeFirstLevelMenuKey,
|
handleSelectFirstLevelMenu,
|
activeDeepestLevelMenuKey
|
} = useMixMenuContext('TopHybridHeaderFirst');
|
const { selectedKey } = useMenu();
|
|
const expandedKeys = ref<string[]>([]);
|
|
/**
|
* Handle first level menu select
|
* @param key RouteKey
|
*/
|
function handleSelectMenu(key: RouteKey) {
|
handleSelectFirstLevelMenu(key);
|
|
// if there are second level menus, select the deepest one by default
|
activeDeepestLevelMenuKey();
|
}
|
|
function updateExpandedKeys() {
|
if (appStore.siderCollapse || !selectedKey.value) {
|
expandedKeys.value = [];
|
return;
|
}
|
expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
|
}
|
|
watch(
|
() => route.name,
|
() => {
|
updateExpandedKeys();
|
},
|
{ immediate: true }
|
);
|
</script>
|
|
<template>
|
<Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
|
<NMenu
|
mode="horizontal"
|
:value="activeFirstLevelMenuKey"
|
:options="firstLevelMenus"
|
:indent="18"
|
responsive
|
@update:value="handleSelectMenu"
|
/>
|
</Teleport>
|
<Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
|
<SimpleScrollbar>
|
<NMenu
|
v-model:expanded-keys="expandedKeys"
|
mode="vertical"
|
:value="selectedKey"
|
:collapsed="appStore.siderCollapse"
|
:collapsed-width="themeStore.sider.collapsedWidth"
|
:collapsed-icon-size="22"
|
:options="secondLevelMenus"
|
:indent="18"
|
@update:value="routerPushByKeyWithMetaQuery"
|
/>
|
</SimpleScrollbar>
|
</Teleport>
|
</template>
|
|
<style scoped></style>
|
