136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import type { MenuItemType, SubMenuType } from "ant-design-vue/es/menu/src/interface";
|
|
import { ItemType, theme } from "ant-design-vue";
|
|
import Icon from "../icon.vue";
|
|
import { ISidebarItem } from "@models/sidebarEntry";
|
|
import { NuxtLink } from "#components";
|
|
|
|
const { useToken } = theme;
|
|
const { token } = useToken();
|
|
|
|
const selState = ref<string>("");
|
|
|
|
const { data: injecto } = await useApiFetch<ISidebarItem[]>("/sidebar");
|
|
let custItems = computed(() => (injecto.value || ([] as ISidebarItem[])).sort((a, b) => a.index - b.index));
|
|
/*let items = ref<ItemType[]>([
|
|
{
|
|
key: "important",
|
|
label: h("span", { class: "smallcaps" }, ["Pinned"]),
|
|
icon: h(Icon, {
|
|
istyle: "regular",
|
|
name: "thumbtack",
|
|
size: 19,
|
|
}),
|
|
children: [
|
|
{
|
|
key: "/submission-rules",
|
|
label: h(
|
|
"b",
|
|
{
|
|
style: {
|
|
color: token.value.colorInfo,
|
|
},
|
|
},
|
|
["SUBMISSION RULES"],
|
|
),
|
|
icon: h(Icon, {
|
|
istyle: "regular",
|
|
name: "memo",
|
|
size: 15,
|
|
}),
|
|
} as MenuItemType,
|
|
{
|
|
key: "/terms",
|
|
label: "Terms of Service",
|
|
icon: h(Icon, {
|
|
istyle: "regular",
|
|
name: "globe",
|
|
size: 15,
|
|
}),
|
|
} as MenuItemType,
|
|
],
|
|
} as SubMenuType,
|
|
{
|
|
key: "fun-features",
|
|
label: h("span", { class: "smallcaps" }, ["Fun features"]),
|
|
icon: h(Icon, {
|
|
istyle: "regular",
|
|
name: "sparkles",
|
|
size: 19,
|
|
}),
|
|
children: custItems.value.map((b) => ({
|
|
key: b.url,
|
|
label: h(
|
|
"span",
|
|
{
|
|
"data-color": b.color,
|
|
class: "custom-side-item",
|
|
},
|
|
[h(NuxtLink, { to: b.url }, [b.linkTitle])],
|
|
),
|
|
})),
|
|
} as SubMenuType,
|
|
]);*/
|
|
</script>
|
|
<template>
|
|
<!-- <client-only>-->
|
|
<a-menu
|
|
id="sidebar-menu"
|
|
mode="inline"
|
|
@select="
|
|
({ item, key, selectedKeys }) => {
|
|
if ((key as string).startsWith('/')) {
|
|
selState = key as string;
|
|
navigateTo(key as string);
|
|
}
|
|
}
|
|
"
|
|
:trigger-sub-menu-action="'click'"
|
|
v-model:active-key="selState"
|
|
:inline-indent="16"
|
|
>
|
|
<a-sub-menu key="important">
|
|
<template #icon>
|
|
<icon istyle="regular" name="thumbtack" :size="19" />
|
|
</template>
|
|
<template #title>
|
|
<span class="smallcaps">Pinned</span>
|
|
</template>
|
|
<a-menu-item key="/submission-rules">
|
|
<template #icon>
|
|
<icon istyle="regular" name="memo" :size="15" />
|
|
</template>
|
|
<b :style="{ color: token.colorInfo }">SUBMISSION RULES</b>
|
|
</a-menu-item>
|
|
<a-menu-item key="/terms">
|
|
<template #icon>
|
|
<icon istyle="regular" name="globe" :size="15" />
|
|
</template>
|
|
<b>Terms of Service</b>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
<a-sub-menu key="fun-features">
|
|
<template #icon>
|
|
<Icon name="sparkles" istyle="regular" :size="19" />
|
|
</template>
|
|
<template #title>
|
|
<div class="smallcaps">fun features</div>
|
|
</template>
|
|
<a-menu-item v-for="item in custItems" :key="item.url">
|
|
<span :style="{ color: item.color }">
|
|
<nuxt-link :to="item.url">{{ item.linkTitle }}</nuxt-link>
|
|
</span>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
</a-menu>
|
|
<!-- </client-only>-->
|
|
</template>
|
|
<style>
|
|
.smallcaps {
|
|
font-variant: small-caps;
|
|
}
|
|
#sidebar-menu ul {
|
|
height: 100%;
|
|
}
|
|
</style>
|