From 5c6cb84383a1669957b54540c546f6249b9acb47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Tue, 9 Jul 2024 20:39:49 -0400
Subject: [PATCH] refactor(components): sidebar looks and acts prettier now

---
 components/layouts/sidebar.vue | 97 ++++++++++++++++++----------------
 1 file changed, 51 insertions(+), 46 deletions(-)

diff --git a/components/layouts/sidebar.vue b/components/layouts/sidebar.vue
index 161bef6..d3da535 100644
--- a/components/layouts/sidebar.vue
+++ b/components/layouts/sidebar.vue
@@ -3,6 +3,7 @@
 	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();
@@ -10,8 +11,8 @@
 	const selState = ref<string>("");
 
 	const { data: injecto } = await useApiFetch<ISidebarItem[]>("/sidebar");
-
-	let items = reactive<ItemType[]>([
+	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"]),
@@ -57,27 +58,24 @@
 				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])],
-					),
-				})),
+			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,
-	]);
-
-	// console.log("wtf", items)
+	]);*/
 </script>
 <template>
 	<!--	<client-only>-->
 	<a-menu
+		id="sidebar-menu"
 		mode="inline"
 		@select="
 			({ item, key, selectedKeys }) => {
@@ -89,37 +87,41 @@
 		"
 		: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>
+		<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>
-				<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> -->
+				<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>
@@ -127,4 +129,7 @@
 	.smallcaps {
 		font-variant: small-caps;
 	}
+	#sidebar-menu ul {
+		height: 100%;
+	}
 </style>