rockfic/next
2
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

71
components/layouts/sidebar.vue
View File

@ -3,6 +3,7 @@
import { ItemType, theme } from "ant-design-vue"; import { ItemType, theme } from "ant-design-vue";
import Icon from "../icon.vue"; import Icon from "../icon.vue";
import { ISidebarItem } from "@models/sidebarEntry"; import { ISidebarItem } from "@models/sidebarEntry";
import { NuxtLink } from "#components";
const { useToken } = theme; const { useToken } = theme;
const { token } = useToken(); const { token } = useToken();
@ -10,8 +11,8 @@
const selState = ref<string>(""); const selState = ref<string>("");
const { data: injecto } = await useApiFetch<ISidebarItem[]>("/sidebar"); const { data: injecto } = await useApiFetch<ISidebarItem[]>("/sidebar");
let custItems = computed(() => (injecto.value || ([] as ISidebarItem[])).sort((a, b) => a.index - b.index));
let items = reactive<ItemType[]>([ /*let items = ref<ItemType[]>([
{ {
key: "important", key: "important",
label: h("span", { class: "smallcaps" }, ["Pinned"]), label: h("span", { class: "smallcaps" }, ["Pinned"]),
@ -57,9 +58,7 @@
name: "sparkles", name: "sparkles",
size: 19, size: 19,
}), }),
children: (injecto.value || ([] as ISidebarItem[])) children: custItems.value.map((b) => ({
.sort((a, b) => a.index - b.index)
.map((b) => ({
key: b.url, key: b.url,
label: h( label: h(
"span", "span",
@ -71,13 +70,12 @@
), ),
})), })),
} as SubMenuType, } as SubMenuType,
]); ]);*/
// console.log("wtf", items)
</script> </script>
<template> <template>
<!-- <client-only>--> <!-- <client-only>-->
<a-menu <a-menu
id="sidebar-menu"
mode="inline" mode="inline"
@select=" @select="
({ item, key, selectedKeys }) => { ({ item, key, selectedKeys }) => {
@ -89,37 +87,41 @@
" "
:trigger-sub-menu-action="'click'" :trigger-sub-menu-action="'click'"
v-model:active-key="selState" v-model:active-key="selState"
:items="items"
:inline-indent="16" :inline-indent="16"
> >
<!-- <a-sub-menu> <a-sub-menu key="important">
<template #icon>
<icon istyle="regular" name="thumbtack" :size="19" />
</template>
<template #title> <template #title>
<sidebar-icon> <span class="smallcaps">Pinned</span>
</template>
<a-menu-item key="/submission-rules">
<template #icon> <template #icon>
<Icon name="sparkles" istyle="regular" :size="19"/> <icon istyle="regular" name="memo" :size="15" />
</template> </template>
<template #rest> <b :style="{ color: token.colorInfo }">SUBMISSION RULES</b>
<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-menu-item>
</a-sub-menu> --> <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> </a-menu>
<!-- </client-only>--> <!-- </client-only>-->
</template> </template>
@ -127,4 +129,7 @@
.smallcaps { .smallcaps {
font-variant: small-caps; font-variant: small-caps;
} }
#sidebar-menu ul {
height: 100%;
}
</style> </style>