next/components/layouts/sidebar.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>