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 { 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,27 +58,24 @@
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) key: b.url,
.map((b) => ({ label: h(
key: b.url, "span",
label: h( {
"span", "data-color": b.color,
{ class: "custom-side-item",
"data-color": b.color, },
class: "custom-side-item", [h(NuxtLink, { to: b.url }, [b.linkTitle])],
}, ),
[h(NuxtLink, { to: b.url }, [b.linkTitle])], })),
),
})),
} 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 #title> <template #icon>
<sidebar-icon> <icon istyle="regular" name="thumbtack" :size="19" />
<template #icon> </template>
<Icon name="sparkles" istyle="regular" :size="19"/> <template #title>
</template> <span class="smallcaps">Pinned</span>
<template #rest> </template>
<div class="smallcaps"> <a-menu-item key="/submission-rules">
fun features <template #icon>
</div> <icon istyle="regular" name="memo" :size="15" />
</template>
</sidebar-icon>
</template> </template>
<a-menu-item> <b :style="{ color: token.colorInfo }">SUBMISSION RULES</b>
<sidebar-icon> </a-menu-item>
<template #icon> <a-menu-item key="/terms">
<icon name="memo" :icolor="token.colorInfo" istyle="regular" :size="13"/> <template #icon>
</template> <icon istyle="regular" name="globe" :size="15" />
<template #rest> </template>
<nuxt-link to="/submission-rules"> <b>Terms of Service</b>
<b :style="{ color: token.colorInfo }"> </a-menu-item>
submission rules </a-sub-menu>
</b> <a-sub-menu key="fun-features">
</nuxt-link> <template #icon>
</template> <Icon name="sparkles" istyle="regular" :size="19" />
</sidebar-icon> </template>
</a-menu-item> <template #title>
</a-sub-menu> --> <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>