feat(components): add sidebar component

components/layouts/sidebar.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+	import type {
+		MenuItemType,
+		SubMenuType,
+	} from "ant-design-vue/es/menu/src/interface";
+	import { ItemType, theme } from "ant-design-vue";
+	import sidebarIcon from "./sidebarIconified.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,
+							},
+							class: "smallcaps",
+						},
+						["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('/')) {
+						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>