Add "support & consulting" link to the app navigation bar (epicmaxco#…

…1042)

src/components/icons/VaIconDiscord.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <g clip-path="url(#clip0_1086_1040)">
+      <path
+        d="M16.9308 3.64152C15.6342 3.04632 14.2658 2.62189 12.8599 2.37886C12.8471 2.37647 12.834 2.37818 12.8222 2.38373C12.8105 2.38928 12.8008 2.39839 12.7945 2.40977C12.6187 2.72252 12.4239 3.13044 12.2876 3.45102C10.7503 3.22086 9.22092 3.22086 7.71525 3.45102C7.57892 3.12327 7.37709 2.72252 7.2005 2.40977C7.19396 2.39865 7.18422 2.38976 7.17255 2.38426C7.16088 2.37876 7.14783 2.37691 7.13509 2.37894C5.72907 2.62141 4.36058 3.04581 3.06409 3.64144C3.05299 3.64618 3.04365 3.65424 3.03734 3.66452C0.444503 7.53819 -0.26583 11.3166 0.08267 15.0482C0.0836554 15.0573 0.0864643 15.0662 0.0909303 15.0742C0.0953964 15.0822 0.101429 15.0893 0.10867 15.0949C1.81934 16.3513 3.47642 17.1139 5.10275 17.6194C5.1154 17.6232 5.1289 17.623 5.14144 17.6189C5.15398 17.6148 5.16496 17.607 5.17292 17.5964C5.55759 17.0711 5.9005 16.5171 6.19459 15.9346C6.19863 15.9266 6.20094 15.9179 6.20136 15.909C6.20178 15.9 6.2003 15.8911 6.19703 15.8828C6.19375 15.8745 6.18875 15.8669 6.18236 15.8607C6.17596 15.8544 6.16831 15.8496 6.15992 15.8465C5.61592 15.6402 5.098 15.3886 4.59975 15.1029C4.59067 15.0976 4.58303 15.0901 4.57753 15.0811C4.57203 15.0721 4.56882 15.0619 4.56819 15.0514C4.56757 15.0409 4.56954 15.0304 4.57394 15.0208C4.57834 15.0112 4.58503 15.0029 4.59342 14.9965C4.69825 14.9179 4.80317 14.8363 4.90325 14.7537C4.91215 14.7464 4.92291 14.7416 4.93434 14.7401C4.94577 14.7386 4.9574 14.7402 4.96792 14.7449C8.24109 16.2394 11.7846 16.2394 15.0191 14.7449C15.0296 14.7399 15.0414 14.738 15.0529 14.7394C15.0645 14.7408 15.0755 14.7455 15.0845 14.7529C15.1847 14.8354 15.2895 14.9179 15.3952 14.9965C15.4036 15.0028 15.4103 15.0111 15.4148 15.0206C15.4192 15.0302 15.4213 15.0406 15.4207 15.0512C15.4202 15.0617 15.4171 15.0719 15.4117 15.0809C15.4062 15.0899 15.3987 15.0974 15.3897 15.1029C14.8912 15.394 14.3691 15.6425 13.8288 15.8457C13.8204 15.8489 13.8128 15.8538 13.8065 15.8602C13.8001 15.8665 13.7952 15.8742 13.792 15.8826C13.7888 15.891 13.7874 15.8999 13.7879 15.9089C13.7884 15.9179 13.7908 15.9266 13.7949 15.9346C14.0953 16.5163 14.4382 17.0703 14.8158 17.5956C14.8235 17.6064 14.8344 17.6146 14.847 17.6189C14.8596 17.6231 14.8732 17.6233 14.8859 17.6194C16.5201 17.1139 18.1772 16.3512 19.8878 15.0949C19.8952 15.0896 19.9013 15.0827 19.9058 15.0747C19.9103 15.0668 19.9131 15.058 19.9139 15.0489C20.3309 10.7348 19.2154 6.98736 16.9568 3.66527C16.9513 3.65448 16.9421 3.64611 16.9308 3.64152ZM6.68334 12.776C5.69792 12.776 4.88592 11.8713 4.88592 10.7602C4.88592 9.64919 5.68217 8.74444 6.68342 8.74444C7.69242 8.74444 8.4965 9.6571 8.48075 10.7603C8.48075 11.8713 7.6845 12.776 6.68334 12.776ZM13.329 12.776C12.3436 12.776 11.5316 11.8713 11.5316 10.7602C11.5316 9.64919 12.3278 8.74444 13.329 8.74444C14.338 8.74444 15.1421 9.6571 15.1263 10.7603C15.1263 11.8713 14.338 12.776 13.329 12.776Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1086_1040">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

src/components/navbar/components/AppNavbarActions.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="app-navbar-actions">
-    <GithubButton v-if="!isMobile" class="app-navbar-actions__item" />
+    <VaButton
+      v-if="!isMobile"
+      preset="secondary"
+      href="https://ui.vuestic.dev/support/consulting"
+      target="_blank"
+      color="textPrimary"
+      class="app-navbar-actions__item flex-shrink-0 mx-0"
+    >
+      <VaIcon size="large" class="material-symbols-outlined mr-1">support_agent</VaIcon>
+      {{ t('supportAndConsulting') }}
+    </VaButton>
     <VaButton
       v-if="!isMobile"
       preset="secondary"
@@ -9,8 +19,10 @@
       color="textPrimary"
       class="app-navbar-actions__item flex-shrink-0 mx-0"
     >
+      <VaIcon size="large" class="material-symbols-outlined mr-1">info</VaIcon>
       {{ t('aboutVuesticAdmin') }}
     </VaButton>
+    <GithubButton v-if="!isMobile" class="app-navbar-actions__item" />
     <VaButton
       v-if="!isMobile"
       preset="secondary"
@@ -19,7 +31,7 @@
       color="textPrimary"
       class="app-navbar-actions__item flex-shrink-0 mx-0"
     >
-      {{ t('helpAndSupport') }}
+      <VaIcon :component="VaIconDiscord" />
     </VaButton>
     <NotificationDropdown class="app-navbar-actions__item" />
     <ProfileDropdown class="app-navbar-actions__item app-navbar-actions__item--profile mr-1" />
@@ -30,6 +42,7 @@
 import ProfileDropdown from './dropdowns/ProfileDropdown.vue'
 import NotificationDropdown from './dropdowns/NotificationDropdown.vue'
 import GithubButton from './GitHubButton.vue'
+import VaIconDiscord from '../../icons/VaIconDiscord.vue'
 
 defineProps({
   isMobile: { type: Boolean, default: false },

src/i18n/locales/gb.json

@@ -167,6 +167,7 @@
   },
   "helpAndSupport": "Help & support",
   "aboutVuesticAdmin": "About Vuestic Admin",
+  "supportAndConsulting": "Support & Consulting",
   "search": {
     "placeholder": "Search..."
   },