60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import LayoutIcon from "@/components/layout/LayoutIcon.vue";
|
|
import { getMenuIconName } from "@/lib/menu-display";
|
|
import type { NavigationType } from "@/lib/layout-settings";
|
|
import type { AdminMenu } from "@/types";
|
|
|
|
type SidebarMenu = AdminMenu & { isVisible?: boolean };
|
|
|
|
withDefaults(defineProps<{
|
|
menu: SidebarMenu;
|
|
basePath?: string;
|
|
collapsed?: boolean;
|
|
navigationType?: NavigationType;
|
|
}>(), {
|
|
basePath: "",
|
|
collapsed: false,
|
|
navigationType: "left",
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<el-sub-menu
|
|
v-if="menu.type === 'directory'"
|
|
:index="menu.path || menu.id"
|
|
:aria-label="menu.name"
|
|
:class="['sidebar-item', `sidebar-item--${navigationType}`]"
|
|
>
|
|
<template #title>
|
|
<el-tooltip :content="menu.name" :disabled="!collapsed" placement="right">
|
|
<span class="sidebar-item__content">
|
|
<LayoutIcon :name="getMenuIconName(menu)" :title="collapsed ? menu.name : undefined" size="18" />
|
|
<span v-if="!collapsed" class="sidebar-item__label">{{ menu.name }}</span>
|
|
</span>
|
|
</el-tooltip>
|
|
</template>
|
|
<SidebarItem
|
|
v-for="child in menu.children || []"
|
|
:key="child.id"
|
|
:menu="child"
|
|
:base-path="basePath"
|
|
:collapsed="collapsed"
|
|
:navigation-type="navigationType"
|
|
/>
|
|
</el-sub-menu>
|
|
|
|
<el-menu-item
|
|
v-else-if="menu.type === 'page' && menu.path"
|
|
:index="menu.path"
|
|
:aria-label="menu.name"
|
|
:class="['sidebar-item', `sidebar-item--${navigationType}`]"
|
|
>
|
|
<el-tooltip :content="menu.name" :disabled="!collapsed" placement="right">
|
|
<span class="sidebar-item__content">
|
|
<LayoutIcon :name="getMenuIconName(menu)" :title="collapsed ? menu.name : undefined" size="18" />
|
|
<span v-if="!collapsed" class="sidebar-item__label">{{ menu.name }}</span>
|
|
</span>
|
|
</el-tooltip>
|
|
</el-menu-item>
|
|
</template>
|