feat: Display Account context in the UI (#4069)

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-if="showShowCurrentAccountContext" class="account-context--group">
+    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
+    <p class="account-context--name text-ellipsis">
+      {{ account.name }}
+    </p>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  computed: {
+    ...mapGetters({
+      account: 'getCurrentAccount',
+      userAccounts: 'getUserAccounts',
+    }),
+    showShowCurrentAccountContext() {
+      return this.userAccounts.length > 1 && this.account.name;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.account-context--group {
+  border-radius: var(--border-radius-normal);
+  border: 1px solid var(--color-border);
+  font-size: var(--font-size-mini);
+  padding: var(--space-small);
+  margin-bottom: var(--space-small);
+
+  .account-context--name {
+    font-weight: var(--font-weight-medium);
+    margin-bottom: 0;
+  }
+}
+</style>

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -1,5 +1,6 @@
 <template>
   <div v-if="hasSecondaryMenu" class="main-nav secondary-menu">
+    <account-context />
     <transition-group name="menu-list" tag="ul" class="menu vertical">
       <secondary-nav-item
         v-for="menuItem in accessibleMenuItems"
@@ -18,9 +19,11 @@
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
+import AccountContext from './AccountContext.vue';
 
 export default {
   components: {
+    AccountContext,
     SecondaryNavItem,
   },
   props: {