63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
<template>
|
|
<n-layout has-sider class="h-full">
|
|
<n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240" show-trigger>
|
|
<n-menu
|
|
:collapsed-width="64"
|
|
:collapsed-icon-size="22"
|
|
:options="menuOptions"
|
|
:value="route.name as string"
|
|
@update:value="updateMenuSelect"
|
|
/>
|
|
</n-layout-sider>
|
|
<n-layout>
|
|
<router-view />
|
|
</n-layout>
|
|
</n-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
DataUsageRound,
|
|
AllInboxFilled,
|
|
PermDataSettingRound,
|
|
ShoppingBagRound,
|
|
} from '@vicons/material'
|
|
import { NIcon, NLayout, NLayoutSider, NMenu, type MenuOption } from 'naive-ui'
|
|
import { h, type Component } from 'vue'
|
|
import { RouterView, useRoute, useRouter } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
function renderIcon(icon: Component) {
|
|
return () => h(NIcon, null, { default: () => h(icon) })
|
|
}
|
|
|
|
const menuOptions: MenuOption[] = [
|
|
{
|
|
label: 'Usage',
|
|
key: 'dashboardUsage',
|
|
icon: renderIcon(DataUsageRound),
|
|
},
|
|
{
|
|
label: 'Files',
|
|
key: 'dashboardFiles',
|
|
icon: renderIcon(AllInboxFilled),
|
|
},
|
|
{
|
|
label: 'Bundles',
|
|
key: 'dashboardBundles',
|
|
icon: renderIcon(ShoppingBagRound),
|
|
},
|
|
{
|
|
label: 'Quota',
|
|
key: 'dashboardQuota',
|
|
icon: renderIcon(PermDataSettingRound),
|
|
},
|
|
]
|
|
|
|
function updateMenuSelect(key: string) {
|
|
router.push({ name: key })
|
|
}
|
|
</script>
|