mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-21 07:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(menu): collapsible category

Browse source
This commit is contained in:
Corentin Thomasset 2023-03-30 23:35:34 +02:00 • committed by Corentin THOMASSET
parent 849981d1ec
commit 24ba0ff5fa
2 changed files with 144 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
import { NIcon, useThemeVars, type MenuGroupOption, type MenuOption } from 'naive-ui';
import { computed, h } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { Heart, Menu2, Home2 } from '@vicons/tabler';
@ -7,9 +7,10 @@ import { toolsByCategory } from '@/tools';
import { useStyleStore } from '@/stores/style.store';
import { config } from '@/config';
import MenuIconItem from '@/components/MenuIconItem.vue';
import type { Tool } from '@/tools/tools.types';
import type { Tool, ToolCategory } from '@/tools/tools.types';
import { useToolStore } from '@/tools/tools.store';
import { useTracker } from '@/modules/tracker/tracker.services';
import CollapsibleToolMenu from '@/components/CollapsibleToolMenu.vue';
import SearchBar from '../components/SearchBar.vue';
import HeroGradient from '../assets/hero-gradient.svg?component';
import MenuLayout from '../components/MenuLayout.vue';
@ -21,30 +22,14 @@ const styleStore = useStyleStore();
const version = config.app.version;
const commitSha = config.app.lastCommitSha.slice(0, 7);
const makeLabel = (tool: Tool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
const { tracker } = useTracker();
const toolStore = useToolStore();
const menuOptions = computed<MenuGroupOption[]>(() =>
[
...(toolStore.favoriteTools.length > 0
? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }]
: []),
...toolsByCategory,
].map((category) => ({
label: category.name,
key: category.name,
type: 'group',
children: category.components.map((tool) => ({
label: makeLabel(tool),
icon: makeIcon(tool),
key: tool.name,
})),
})),
);
const tools = computed<ToolCategory[]>(() => [
...(toolStore.favoriteTools.length > 0 ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }] : []),
...toolsByCategory,
]);
</script>
<template>
@ -64,14 +49,7 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
<navbar-buttons />
</n-space>
<n-menu
class="menu"
:value="(route.name as string)"
:collapsed-width="64"
:collapsed-icon-size="22"
:options="menuOptions"
:indent="20"
/>
<collapsible-tool-menu :tools-by-category="tools" />
<div class="footer">
<div>