TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-09 07:26:01 -04:00
Code Issues Packages Projects Releases Wiki Activity

(merch) add link to shop to (mobile) menu

Browse Source
This commit is contained in:
Andrea Vos 2024-05-15 19:27:47 +02:00
parent d96b693204
commit c723f3b15a
2 changed files with 68 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
components/Header.vue
View File

@ -2,24 +2,26 @@
<div v-if="$config.header" class="mb-lg-4">
<header @mouseleave="hoverItem = null">
<div class="d-none d-lg-flex justify-content-between align-items-center flex-row nav-custom btn-group mb-0">
<nuxt-link
v-for="link in links"
:key="link.link"
:to="link.link"
:class="`nav-item btn btn-sm ${link.header ? 'nav-header' : ''} ${isActiveRoute(link) ? 'active' : ''} ${link.header ? 'flex-grow-0' : ''}`"
@mouseenter.native="hoverItem = link"
>
<h1 v-if="link.header" class="text-nowrap">
<Logo flag />
<span class="higher"><T>title</T></span>
</h1>
<template v-else>
<Avatar v-if="link.avatar" :user="link.avatar" dsize="1.6rem" />
<Icon v-else :v="link.icon" :size="1.6" />
<br>
<span class="text-nowrap"><Spelling :text="link.text" /></span>
</template>
</nuxt-link>
<template v-for="link in links">
<PotentiallyExternalLink
v-if="link.desktop === undefined || link.desktop === true"
:key="link.link"
:to="link.link"
:class="`nav-item btn btn-sm ${link.header ? 'nav-header' : ''} ${isActiveRoute(link) ? 'active' : ''} ${link.header ? 'flex-grow-0' : ''}`"
@mouseenter.native="hoverItem = link"
>
<h1 v-if="link.header" class="text-nowrap">
<Logo flag />
<span class="higher"><T>title</T></span>
</h1>
<template v-else>
<Avatar v-if="link.avatar" :user="link.avatar" dsize="1.6rem" />
<Icon v-else :v="link.icon" :size="1.6" />
<br>
<span class="text-nowrap"><Spelling :text="link.text" /></span>
</template>
</PotentiallyExternalLink>
</template>
<div class="nav-item flex-grow-0" @mouseenter="hoverItem = null">
<VersionDropdown end />
</div>
@ -35,11 +37,18 @@
<VersionDropdown />
</div>
<div class="btn-group-vertical d-flex nav-custom mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Avatar v-if="link.avatar" :user="link.avatar" dsize="1rem" />
<Icon v-else :v="link.icon" />
<Spelling :text="link.textLong || link.text" />
</nuxt-link>
<template v-for="link in links">
<PotentiallyExternalLink
v-if="link.mobile === undefined || link.mobile === true"
:key="link.link"
:to="link.link"
:class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`"
>
<Avatar v-if="link.avatar" :user="link.avatar" dsize="1rem" />
<Icon v-else :v="link.icon" />
<Spelling :text="link.textLong || link.text" />
</PotentiallyExternalLink>
</template>
</div>
</div>
<div :class="['hamburger-menu']" :style="`opacity: ${hamburgerShown ? 1 : 0}`">
@ -51,11 +60,18 @@
</button>
<div :class="['bg border p-3 shadow', hamburgerActive ? '' : 'd-none']">
<div class="btn-group-vertical d-flex nav-custom nav-custom-start mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Avatar v-if="link.avatar" :user="link.avatar" dsize="1rem" />
<Icon v-else :v="link.icon" />
<Spelling :text="link.textLong || link.text" />
</nuxt-link>
<template v-for="link in links">
<PotentiallyExternalLink
v-if="link.mobile === undefined || link.mobile === true"
:key="link.link"
:to="link.link"
:class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`"
>
<Avatar v-if="link.avatar" :user="link.avatar" dsize="1rem" />
<Icon v-else :v="link.icon" />
<Spelling :text="link.textLong || link.text" />
</PotentiallyExternalLink>
</template>
</div>
</div>
</div>
@ -380,6 +396,13 @@ export default {
});
}
links.push({
link: `https://shop.pronouns.page`,
icon: 'shopping-bag',
text: this.$t('contact.groups.shop'),
desktop: false,
});
if (this.$config.user.enabled) {
links.push({
link: `/${this.$config.user.route}`,

17
components/PotentiallyExternalLink.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<a v-if="isExternal" :href="to" target="_blank" rel="noopener"><slot></slot></a>
<nuxt-link v-else :to="to"><slot></slot></nuxt-link>
</template>
<script>
export default {
props: {
to: { required: true, type: String },
},
computed: {
isExternal() {
return this.to.startsWith('https://') || this.to.startsWith('http://')
}
}
};
</script>