Implement configurable custom button in header

Ocelot-Social-Community · Feb 18, 2025 · a784e22 · a784e22
1 parent 471aa3f
commit a784e22
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 1 deletion.
diff --git a/webapp/components/CustomButton/CustomButton.vue b/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>
diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/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,6 +287,7 @@ 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'
@@ -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 },
@@ -310,6 +328,7 @@ export default {
       SHOW_GROUP_BUTTON_IN_HEADER,
       SHOW_CONTENT_FILTER_HEADER_MENU,
       isHeaderMenu: headerMenu.MENU.length > 0,
+      customButton: headerMenu.CUSTOM_BUTTON,
       menu: headerMenu.MENU,
       mobileSearchVisible: false,
       toggleMobileMenu: false,

diff --git a/webapp/constants/headerMenu.js b/webapp/constants/headerMenu.js
@@ -1,4 +1,13 @@
 export default {
+  CUSTOM_BUTTON: {
+    // iconPath: '/img/custom/X',
+    // iconWidth: '28px',
+    // iconAltText: 'X',
+    // toolTipIdent: 'nameIdent',
+    // path: '/',
+    // url: 'https://ocelot.social/en/donate',
+    // target: '_blank',
+  },
   MENU: [
     // {
     //   nameIdent: 'nameIdent',