refactor: Sidebar UI (#3390)

* Refactor sidebar links in DefaultLayout.vue

* 🧹
This commit is contained in:
Kuchenpirat 2024-04-01 10:16:52 +02:00 committed by GitHub
parent 7c365b7c03
commit a283828461
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 44 deletions

View File

@ -6,8 +6,6 @@
v-model="sidebar"
absolute
:top-link="topLinks"
:secondary-header="cookbookLinks.length ? $tc('sidebar.cookbooks') : undefined"
:secondary-header-link="isOwnGroup && cookbookLinks.length ? `/g/${groupSlug}/cookbooks` : undefined"
:secondary-links="cookbookLinks || []"
:bottom-links="isAdmin ? bottomLinks : []"
>
@ -146,14 +144,6 @@
to: `/g/${groupSlug.value}/r/create/new`,
restricted: true,
},
{
insertDivider: true,
icon: $globals.icons.pages,
title: i18n.tc("sidebar.cookbook"),
subtitle: i18n.tc("sidebar.create-cookbook"),
to: `/g/${groupSlug.value}/cookbooks`,
restricted: true,
},
]);
const bottomLinks = computed<SidebarLinks>(() => [
@ -191,22 +181,35 @@
restricted: true,
},
{
icon: $globals.icons.categories,
to: `/g/${groupSlug.value}/recipes/categories`,
title: i18n.tc("sidebar.categories"),
icon: $globals.icons.book,
to: `/g/${groupSlug.value}/cookbooks`,
title: i18n.tc("cookbook.cookbooks"),
restricted: true,
},
{
icon: $globals.icons.tags,
to: `/g/${groupSlug.value}/recipes/tags`,
title: i18n.tc("sidebar.tags"),
restricted: true,
},
{
icon: $globals.icons.potSteam,
to: `/g/${groupSlug.value}/recipes/tools`,
title: i18n.tc("tool.tools"),
icon: $globals.icons.organizers,
title: "Organizers",
restricted: true,
children: [
{
icon: $globals.icons.categories,
to: `/g/${groupSlug.value}/recipes/categories`,
title: i18n.tc("sidebar.categories"),
restricted: true,
},
{
icon: $globals.icons.tags,
to: `/g/${groupSlug.value}/recipes/tags`,
title: i18n.tc("sidebar.tags"),
restricted: true,
},
{
icon: $globals.icons.potSteam,
to: `/g/${groupSlug.value}/recipes/tools`,
title: i18n.tc("tool.tools"),
restricted: true,
},
],
},
]);

View File

@ -39,13 +39,12 @@
<v-list-item-title>{{ nav.title }}</v-list-item-title>
</template>
<v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
<v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to" class="ml-2">
<v-list-item-icon>
<v-icon>{{ child.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ child.title }}</v-list-item-title>
</v-list-item>
<v-divider class="mb-4"></v-divider>
</v-list-group>
<!-- Single Item -->
@ -68,18 +67,8 @@
</template>
<!-- Secondary Links -->
<template v-if="secondaryLinks">
<router-link v-if="secondaryHeader && secondaryHeaderLink" :to="secondaryHeaderLink" style="text-decoration: none;">
<v-subheader :to="secondaryHeaderLink" class="pb-0">
{{ secondaryHeader }}
</v-subheader>
</router-link>
<div v-else-if="secondaryHeader">
<v-subheader :to="secondaryHeaderLink" class="pb-0">
{{ secondaryHeader }}
</v-subheader>
</div>
<v-divider v-if="secondaryHeader"></v-divider>
<template v-if="secondaryLinks.length > 0">
<v-divider class="mt-2"></v-divider>
<v-list nav dense exact>
<template v-for="nav in secondaryLinks">
<div v-if="!nav.restricted || isOwnGroup" :key="nav.title">
@ -179,14 +168,6 @@ export default defineComponent({
required: false,
default: null,
},
secondaryHeader: {
type: String,
default: null,
},
secondaryHeaderLink: {
type: String,
default: null,
},
},
setup(props, context) {
// V-Model Support

View File

@ -146,6 +146,8 @@ import {
mdiFlipVertical,
mdiRotateLeft,
mdiRotateRight,
mdiBookOpenPageVariant,
mdiFileCabinet,
} from "@mdi/js";
export const icons = {
@ -293,6 +295,8 @@ export const icons = {
tagArrowUp: mdiTagArrowUpOutline,
categories: mdiShapeOutline,
pages: mdiBookOutline,
book: mdiBookOpenPageVariant,
organizers: mdiFileCabinet,
// Admin
user: mdiAccount,