mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 14:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(layout): menu category

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-06 00:49:56 +02:00
parent f70fce65e2
commit 9c9be9e2e2
No known key found for this signature in database
GPG key ID: DBD997E935996158
1 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/layouts/base.layout.vue
View file

@ -3,7 +3,7 @@ import { NIcon } from 'naive-ui';
import { h, ref, type Component } from 'vue'; import { h, ref, type Component } from 'vue';
import { RouterLink, useRoute } from 'vue-router'; import { RouterLink, useRoute } from 'vue-router';
import { LightModeFilled, DarkModeFilled } from '@vicons/material' import { LightModeFilled, DarkModeFilled } from '@vicons/material'
import { tools } from '@/tools'; import { toolsByCategory } from '@/tools';
import SearchBar from '../components/SearchBar.vue'; import SearchBar from '../components/SearchBar.vue';
import { useStyleStore } from '@/stores/style.store'; import { useStyleStore } from '@/stores/style.store';
@ -15,11 +15,16 @@ const styleStore = useStyleStore()
const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { default: () => text }) const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { default: () => text })
const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) }) const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) })
const menuOptions = tools.map(({ name, path, icon }) => ({ const m = toolsByCategory.map(category => ({
label: category.name,
key: category.name,
type: 'group',
children: category.components.map(({ name, path, icon }) => ({
label: makeLabel(name, path), label: makeLabel(name, path),
key: name,
icon: makeIcon(icon) icon: makeIcon(icon)
}))
})) }))
</script> </script>
<template> <template>
@ -47,7 +52,7 @@ const menuOptions = tools.map(({ name, path, icon }) => ({
:collapsed="collapsed" :collapsed="collapsed"
:collapsed-width="64" :collapsed-width="64"
:collapsed-icon-size="22" :collapsed-icon-size="22"
:options="menuOptions" :options="m"
v-model:value="activeKey" v-model:value="activeKey"
/> />
</n-layout-sider> </n-layout-sider>