feat(webapp): implement configurable custom button in header (#8215)

* Implement configurable custom button in header

* Implement default values for 'headerMenu'

---------

Co-authored-by: mahula <lenzmath@posteo.de>

webapp/components/CustomButton/CustomButton.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <a v-if="settings.url" :href="settings.url" :target="settings.target">
+      <base-button
+        class="custom-button"
+        circle
+        ghost
+        v-tooltip="{
+          content: $t(settings.toolTipIdent),
+          placement: 'bottom-start',
+        }"
+      >
+        <img
+          class="logo-svg"
+          :src="settings.iconPath"
+          :alt="settings.iconAltText"
+          :style="logoWidthStyle"
+        />
+      </base-button>
+    </a>
+    <nuxt-link v-else :to="settings.toolTipIdent">
+      <base-button
+        class="custom-button"
+        circle
+        ghost
+        v-tooltip="{
+          content: $t(settings.toolTipIdent),
+          placement: 'bottom-start',
+        }"
+      >
+        <img
+          class="logo-svg"
+          :src="settings.iconPath"
+          :alt="settings.iconAltText"
+          :style="logoWidthStyle"
+        />
+      </base-button>
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+import isEmpty from 'lodash/isEmpty'
+
+export default {
+  name: 'CustomButton',
+  props: {
+    settings: { type: Object, required: true },
+  },
+  data() {
+    return {
+      isEmpty,
+    }
+  },
+  computed: {
+    logoWidthStyle() {
+      const width = this.isEmpty(this.settings.iconWidth) ? '26px' : this.settings.iconWidth
+      return `width: ${width};`
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.custom-button {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.logo-svg {
+  height: auto;
+  fill: #000000;
+}
+</style>

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -96,6 +96,10 @@
               <client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
                 <map-button />
               </client-only>
+              <!-- custom button -->
+              <client-only v-if="!isEmpty(customButton)">
+                <custom-button :settings="customButton" />
+              </client-only>
               <!-- avatar menu -->
               <client-only>
                 <avatar-menu placement="top" />
@@ -214,6 +218,18 @@
               </div>
             </client-only>
           </ds-flex-item>
+          <!-- custom button -->
+          <ds-flex-item
+            v-if="!isEmpty(customButton)"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="text-align: center"
+          >
+            <client-only>
+              <div @click="toggleMobileMenuView">
+                <custom-button :settings="customButton" />
+              </div>
+            </client-only>
+          </ds-flex-item>
           <!-- avatar menu mobile -->
           <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end">
             <client-only>
@@ -271,9 +287,10 @@ import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
 import LOGOS from '~/constants/logos.js'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
+import CustomButton from '~/components/CustomButton/CustomButton'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import GroupButton from '~/components/Group/GroupButton'
-import headerMenu from '~/constants/headerMenu.js'
+import headerMenuBranded from '~/constants/headerMenuBranded.js'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
@@ -286,6 +303,8 @@ import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParams
 export default {
   components: {
     AvatarMenu,
+    ChatNotificationMenu,
+    CustomButton,
     FilterMenu,
     GroupButton,
     InviteButton,
@@ -295,7 +314,6 @@ export default {
     NotificationMenu,
     PageParamsLink,
     SearchField,
-    ChatNotificationMenu,
   },
   props: {
     showMobileMenu: { type: Boolean, default: false },
@@ -309,8 +327,9 @@ export default {
       LOGOS,
       SHOW_GROUP_BUTTON_IN_HEADER,
       SHOW_CONTENT_FILTER_HEADER_MENU,
-      isHeaderMenu: headerMenu.MENU.length > 0,
+      isHeaderMenu: headerMenuBranded.MENU.length > 0,
-      menu: headerMenu.MENU,
+      customButton: headerMenuBranded.CUSTOM_BUTTON,
+      menu: headerMenuBranded.MENU,
       mobileSearchVisible: false,
       toggleMobileMenu: false,
       inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,

webapp/constants/headerMenu.js

@@ -1,13 +1 @@
-export default {
+export default {}
-  MENU: [
-    // {
-    //   nameIdent: 'nameIdent',
-    //   path: '/',
-    // },
-    // {
-    //   nameIdent: 'nameIdent',
-    //   url: 'https://ocelot.social',
-    //   target: '_blank',
-    // },
-  ],
-}

webapp/constants/headerMenuBranded.js

@@ -0,0 +1,27 @@
+import { merge } from 'lodash'
+import headerMenu from '~/constants/headerMenu.js'
+
+const defaultHeaderMenu = {
+  CUSTOM_BUTTON: {
+    // iconPath: '/img/custom/X',
+    // iconWidth: '28px',
+    // iconAltText: 'X',
+    // toolTipIdent: 'nameIdent',
+    // path: '/',
+    // url: 'https://ocelot.social/en/donate',
+    // target: '_blank',
+  },
+  MENU: [
+    // {
+    //   nameIdent: 'nameIdent',
+    //   path: '/',
+    // },
+    // {
+    //   nameIdent: 'nameIdent',
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+  ],
+}
+
+export default merge(defaultHeaderMenu, headerMenu)