rockfic/next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): sidebar looks and acts prettier now

Browse Source
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2024-07-09 20:39:49 -04:00
parent 25b7e723f6
commit 5c6cb84383
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 51 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
components/layouts/sidebar.vue
View File

@ -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>