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 items = reactive<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: (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);
				}
			}
		"
		: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>