137 lines
2.9 KiB
Vue
137 lines
2.9 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 loaded = inject<Ref<boolean>>("loaded");
|
|
|
|
const { useToken } = theme;
|
|
const { token } = useToken();
|
|
|
|
const selState = ref<string>("");
|
|
|
|
const { data: injecto } = await useApiFetch<ISidebarItem[]>("/sidebar");
|
|
|
|
let items: Ref<ItemType[]> = ref([
|
|
{
|
|
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: (injecto.value || ([] as ISidebarItem[]))
|
|
.sort((a, b) => a.index - b.index)
|
|
.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,
|
|
]);
|
|
|
|
// console.log("wtf", items)
|
|
</script>
|
|
<template>
|
|
<client-only>
|
|
<a-menu
|
|
mode="inline"
|
|
@select="
|
|
({ item, key, selectedKeys }) => {
|
|
if ((key as string).startsWith('/')) {
|
|
selState = key as string;
|
|
navigateTo(key as string);
|
|
}
|
|
}
|
|
"
|
|
:style="{
|
|
flexGrow: 0.8,
|
|
}"
|
|
:trigger-sub-menu-action="'click'"
|
|
v-model:active-key="selState"
|
|
:items="items"
|
|
:inline-indent="16"
|
|
>
|
|
<!-- <a-sub-menu>
|
|
<template #title>
|
|
<sidebar-icon>
|
|
<template #icon>
|
|
<Icon name="sparkles" istyle="regular" :size="19"/>
|
|
</template>
|
|
<template #rest>
|
|
<div class="smallcaps">
|
|
fun features
|
|
</div>
|
|
</template>
|
|
</sidebar-icon>
|
|
</template>
|
|
<a-menu-item>
|
|
<sidebar-icon>
|
|
<template #icon>
|
|
<icon name="memo" :icolor="token.colorInfo" istyle="regular" :size="13"/>
|
|
</template>
|
|
<template #rest>
|
|
<nuxt-link to="/submission-rules">
|
|
<b :style="{ color: token.colorInfo }">
|
|
submission rules
|
|
</b>
|
|
</nuxt-link>
|
|
</template>
|
|
</sidebar-icon>
|
|
</a-menu-item>
|
|
</a-sub-menu> -->
|
|
</a-menu>
|
|
</client-only>
|
|
</template>
|
|
<style>
|
|
.smallcaps {
|
|
font-variant: small-caps;
|
|
}
|
|
</style>
|