From c723f3b15a5d20fe66578d6bcbfd87edb9e58a1c Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 15 May 2024 19:27:47 +0200
Subject: [PATCH] (merch) add link to shop to (mobile) menu

---
 components/Header.vue                  | 79 +++++++++++++++++---------
 components/PotentiallyExternalLink.vue | 17 ++++++
 2 files changed, 68 insertions(+), 28 deletions(-)
 create mode 100644 components/PotentiallyExternalLink.vue

diff --git a/components/Header.vue b/components/Header.vue
index 639322c83..f7c852a2a 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -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}`,
diff --git a/components/PotentiallyExternalLink.vue b/components/PotentiallyExternalLink.vue
new file mode 100644
index 000000000..47e32d955
--- /dev/null
+++ b/components/PotentiallyExternalLink.vue
@@ -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>