mirror of
https://github.com/Lissy93/dashy.git
synced 2026-01-26 01:31:23 +01:00
feat(nav): add Home button on sub-pages and hide current page from nav
This commit is contained in:
parent
3890c5006a
commit
8ec9ac0fa3
1 changed files with 22 additions and 14 deletions
|
|
@ -6,21 +6,19 @@
|
|||
/>
|
||||
<nav id="nav" v-if="navVisible">
|
||||
<!-- Render either router-link or anchor, depending if internal / external link -->
|
||||
<template v-for="(link, index) in allLinks">
|
||||
<router-link v-if="!isUrl(link.path)"
|
||||
:key="index"
|
||||
<template v-for="(link, index) in allLinks" :key="index">
|
||||
<router-link
|
||||
v-if="!isUrl(link.path)"
|
||||
:to="link.path"
|
||||
class="nav-item"
|
||||
>{{link.title}}
|
||||
</router-link>
|
||||
<a v-else
|
||||
:key="index"
|
||||
:class="['nav-item', link._isHome ? 'home-button' : '']"
|
||||
>{{ link.title }}</router-link>
|
||||
<a
|
||||
v-else
|
||||
:href="link.path"
|
||||
:target="determineTarget(link)"
|
||||
class="nav-item"
|
||||
:class="['nav-item', link._isHome ? 'home-button' : '']"
|
||||
rel="noopener noreferrer"
|
||||
>{{link.title}}
|
||||
</a>
|
||||
>{{ link.title }}</a>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -44,15 +42,22 @@ export default {
|
|||
isMobile: false,
|
||||
}),
|
||||
computed: {
|
||||
/* Get links to sub-pages, and combine with nav-links */
|
||||
/* Build nav links: custom links + sub-pages (excluding current) + optional Home button */
|
||||
allLinks() {
|
||||
const subPages = this.$store.getters.pages.filter((page) => checkPageVisibility(page))
|
||||
const currentSubPageId = this.$store.state.currentConfigInfo?.confId || null;
|
||||
let subPages = this.$store.getters.pages
|
||||
.filter((page) => checkPageVisibility(page))
|
||||
.map((subPage) => ({
|
||||
path: makePageSlug(subPage.name, 'home'),
|
||||
title: subPage.name,
|
||||
_isSubPage: true,
|
||||
}));
|
||||
if (currentSubPageId) {
|
||||
subPages = subPages.filter(p => !p.path.endsWith(`/${currentSubPageId}`));
|
||||
}
|
||||
const navLinks = this.links || [];
|
||||
return [...navLinks, ...subPages];
|
||||
const homeButton = currentSubPageId ? [{ path: '/home/', title: 'Home', _isHome: true }] : [];
|
||||
return [...navLinks, ...subPages, ...homeButton];
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
|
@ -107,6 +112,9 @@ export default {
|
|||
border: 1px solid var(--nav-link-border-color-hover);
|
||||
box-shadow: var(--nav-link-shadow-hover);
|
||||
}
|
||||
&.home-button {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Mobile and Burger-Menu Styles */
|
||||
|
|
|
|||
Loading…
Reference in a new issue