fix: Update route permissions in the new primary menu (#3499)

* fix: Display rolewise primary sidebar

* Fix issues with roles

* Fix active style

* Fix accessible menu

* Fix key missing

* Changes menu icon size

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -1,41 +1,37 @@
 <template>
-  <aside class="woot-sidebar" :class="{ 'only-primary': !showSecondaryMenu }">
+  <aside class="woot-sidebar">
     <primary-sidebar
       :logo-source="globalConfig.logo"
       :installation-name="globalConfig.installationName"
       :account-id="accountId"
       :menu-items="primaryMenuItems"
+      :active-menu-item="activePrimaryMenu.key"
       @toggle-accounts="toggleAccountModal"
       @key-shortcut-modal="toggleKeyShortcutModal"
     />
-
     <secondary-sidebar
-      v-if="showSecondaryMenu"
       :account-id="accountId"
       :inboxes="inboxes"
-      :account-labels="accountLabels"
+      :labels="labels"
       :teams="teams"
-      :menu-items="primaryMenuItems"
+      :menu-config="activeSecondaryMenu"
+      :current-role="currentRole"
       @add-label="showAddLabelPopup"
     />
-
     <woot-key-shortcut-modal
       v-if="showShortcutModal"
       @close="closeKeyShortcutModal"
       @clickaway="closeKeyShortcutModal"
     />
-
     <account-selector
       :show-account-modal="showAccountModal"
       @close-account-modal="toggleAccountModal"
       @show-create-account-modal="openCreateAccountModal"
     />
-
     <add-account-modal
       :show="showCreateAccountModal"
       @close-account-create-modal="closeCreateAccountModal"
     />
-
     <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
       <add-label-modal @close="hideAddLabelPopup" />
     </woot-modal>
@@ -46,14 +42,14 @@
 import { mapGetters } from 'vuex';
 
 import adminMixin from '../../mixins/isAdmin';
-import { getSidebarItems } from '../../i18n/default-sidebar';
+import { getSidebarItems } from './config/default-sidebar';
 import alertMixin from 'shared/mixins/alertMixin';
 
 import AccountSelector from './sidebarComponents/AccountSelector.vue';
 import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
 import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
-import PrimarySidebar from 'dashboard/modules/sidebar/components/Primary';
+import PrimarySidebar from './sidebarComponents/Primary';
-import SecondarySidebar from 'dashboard/modules/sidebar/components/Secondary';
+import SecondarySidebar from './sidebarComponents/Secondary';
 import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
 import {
   hasPressedAltAndCKey,
@@ -93,38 +89,34 @@ export default {
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
-      accountLabels: 'labels/getLabelsOnSidebar',
+      labels: 'labels/getLabelsOnSidebar',
       teams: 'teams/getMyTeams',
     }),
-
+    sideMenuConfig() {
-    sideMenuItems() {
       return getSidebarItems(this.accountId);
     },
     primaryMenuItems() {
-      const menuItems = Object.values(
+      const menuItems = this.sideMenuConfig.primaryMenu;
-        getSidebarItems(this.accountId).common.menuItems
+      return menuItems.filter(menuItem =>
+        menuItem.roles.includes(this.currentRole)
       );
+    },
+    activeSecondaryMenu() {
+      const { secondaryMenu } = this.sideMenuConfig;
+      const { name: currentRoute } = this.$route;
 
-      return menuItems;
+      const activeSecondaryMenu =
+        secondaryMenu.find(menuItem =>
+          menuItem.routes.includes(currentRoute)
+        ) || {};
+      return activeSecondaryMenu;
     },
-    currentRoute() {
+    activePrimaryMenu() {
-      return this.$store.state.route.name;
+      const activePrimaryMenu =
-    },
+        this.primaryMenuItems.find(
-    shouldShowNotificationsSideMenu() {
+          menuItem => menuItem.key === this.activeSecondaryMenu.parentNav
-      return this.sideMenuItems.notifications.routes.includes(
+        ) || {};
-        this.currentRoute
+      return activePrimaryMenu;
-      );
-    },
-    shouldShowProfileSideMenu() {
-      return (
-        this.currentRoute === 'profile_settings_index' ||
-        this.currentRoute === 'profile_settings'
-      );
-    },
-    showSecondaryMenu() {
-      if (this.shouldShowNotificationsSideMenu) return false;
-      if (this.shouldShowProfileSideMenu) return false;
-      return true;
     },
   },
   mounted() {
@@ -169,23 +161,11 @@ export default {
       }
     },
     isCurrentRouteSameAsNavigation(routeName) {
-      return router.currentRoute && router.currentRoute.name === routeName;
+      return this.$route.name === routeName;
     },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
-    filterMenuItemsByRole(menuItems) {
-      if (!this.currentRole) {
-        return [];
-      }
-      return menuItems.filter(
-        menuItem =>
-          window.roleWiseRoutes[this.currentRole].indexOf(
-            menuItem.toStateName
-          ) > -1
-      );
-    },
-
     toggleAccountModal() {
       this.showAccountModal = !this.showAccountModal;
     },
@@ -208,12 +188,8 @@ export default {
 
 <style lang="scss" scoped>
 .woot-sidebar {
-  background: white;
+  background: var(--white);
   display: flex;
-
-  &.only-primary {
-    width: auto;
-  }
 }
 
 .secondary-menu {

app/javascript/dashboard/components/layout/config/default-sidebar.js

@@ -0,0 +1,19 @@
+import conversations from './sidebarItems/conversations';
+import contacts from './sidebarItems/contacts';
+import reports from './sidebarItems/reports';
+import campaigns from './sidebarItems/campaigns';
+import settings from './sidebarItems/settings';
+import notifications from './sidebarItems/notifications';
+import primaryMenu from './sidebarItems/primaryMenu';
+
+export const getSidebarItems = accountId => ({
+  primaryMenu: primaryMenu(accountId),
+  secondaryMenu: [
+    conversations(accountId),
+    contacts(accountId),
+    reports(accountId),
+    campaigns(accountId),
+    settings(accountId),
+    notifications(accountId),
+  ],
+});

app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js

@@ -1,6 +1,7 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const campaigns = accountId => ({
+  parentNav: 'campaigns',
   routes: ['settings_account_campaigns', 'one_off'],
   menuItems: [
     {

app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js

@@ -1,27 +1,21 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const contacts = accountId => ({
+  parentNav: 'contacts',
   routes: [
     'contacts_dashboard',
     'contact_profile_dashboard',
     'contacts_labels_dashboard',
   ],
-  menuItems: {
+  menuItems: [
-    back: {
+    {
-      icon: 'chevron-left',
-      label: 'HOME',
-      hasSubMenu: false,
-      toStateName: 'home',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-    },
-    contacts: {
       icon: 'contact-card-group',
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
       toStateName: 'contacts_dashboard',
     },
-  },
+  ],
 });
 
 export default contacts;

app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js

@@ -0,0 +1,28 @@
+import { frontendURL } from '../../../../helper/URLHelper';
+
+const conversations = accountId => ({
+  parentNav: 'conversations',
+  routes: [
+    'home',
+    'inbox_dashboard',
+    'inbox_conversation',
+    'conversation_through_inbox',
+    'notifications_dashboard',
+    'label_conversations',
+    'conversations_through_label',
+    'team_conversations',
+    'conversations_through_team',
+  ],
+  menuItems: [
+    {
+      icon: 'chat',
+      label: 'ALL_CONVERSATIONS',
+      key: 'conversations',
+      toState: frontendURL(`accounts/${accountId}/dashboard`),
+      toolTip: 'Conversation from all subscribed inboxes',
+      toStateName: 'home',
+    },
+  ],
+});
+
+export default conversations;

app/javascript/dashboard/components/layout/config/sidebarItems/notifications.js

@@ -1,6 +1,7 @@
 const notifications = () => ({
+  parentNav: 'notifications',
   routes: ['notifications_index'],
-  menuItems: {},
+  menuItems: [],
 });
 
 export default notifications;

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -0,0 +1,46 @@
+import { frontendURL } from '../../../../helper/URLHelper';
+
+const primaryMenuItems = accountId => [
+  {
+    icon: 'chat',
+    key: 'conversations',
+    label: 'CONVERSATIONS',
+    toState: frontendURL(`accounts/${accountId}/dashboard`),
+    toStateName: 'home',
+    roles: ['administrator', 'agent'],
+  },
+  {
+    icon: 'book-contacts',
+    key: 'contacts',
+    label: 'CONTACTS',
+    toState: frontendURL(`accounts/${accountId}/contacts`),
+    toStateName: 'contacts_dashboard',
+    roles: ['administrator', 'agent'],
+  },
+  {
+    icon: 'arrow-trending-lines',
+    key: 'reports',
+    label: 'REPORTS',
+    toState: frontendURL(`accounts/${accountId}/reports`),
+    toStateName: 'settings_account_reports',
+    roles: ['administrator'],
+  },
+  {
+    icon: 'megaphone',
+    key: 'campaigns',
+    label: 'CAMPAIGNS',
+    toState: frontendURL(`accounts/${accountId}/campaigns`),
+    toStateName: 'settings_account_campaigns',
+    roles: ['administrator'],
+  },
+  {
+    icon: 'settings',
+    key: 'settings',
+    label: 'SETTINGS',
+    toState: frontendURL(`accounts/${accountId}/settings`),
+    toStateName: 'settings_home',
+    roles: ['administrator', 'agent'],
+  },
+];
+
+export default primaryMenuItems;

app/javascript/dashboard/components/layout/config/sidebarItems/profileSettings.js

@@ -0,0 +1,7 @@
+const profileSettings = () => ({
+  parentNav: 'profileSettings',
+  routes: ['profile_settings_index'],
+  menuItems: [],
+});
+
+export default profileSettings;

app/javascript/dashboard/components/layout/config/sidebarItems/reports.js

@@ -1,6 +1,7 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const reports = accountId => ({
+  parentNav: 'reports',
   routes: [
     'settings_account_reports',
     'csat_reports',

app/javascript/dashboard/components/layout/config/sidebarItems/settings.js

@@ -1,6 +1,7 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const settings = accountId => ({
+  parentNav: 'settings',
   routes: [
     'agent_list',
     'canned_list',
@@ -30,43 +31,36 @@ const settings = accountId => ({
     'settings_teams_edit_finish',
     'automation_list',
   ],
-  menuItems: {
+  menuItems: [
-    back: {
+    {
-      icon: 'chevron-left',
-      label: 'HOME',
-      hasSubMenu: false,
-      toStateName: 'home',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-    },
-    agents: {
       icon: 'people',
       label: 'AGENTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
       toStateName: 'agent_list',
     },
-    teams: {
+    {
       icon: 'people-team',
       label: 'TEAMS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
       toStateName: 'settings_teams_list',
     },
-    inboxes: {
+    {
       icon: 'mail-inbox-all',
       label: 'INBOXES',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
       toStateName: 'settings_inbox_list',
     },
-    labels: {
+    {
       icon: 'tag',
       label: 'LABELS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
       toStateName: 'labels_list',
     },
-    attributes: {
+    {
       icon: 'code',
       label: 'CUSTOM_ATTRIBUTES',
       hasSubMenu: false,
@@ -75,14 +69,14 @@ const settings = accountId => ({
       ),
       toStateName: 'attributes_list',
     },
-    automation: {
+    {
       icon: 'autocorrect',
       label: 'AUTOMATION',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
     },
-    cannedResponses: {
+    {
       icon: 'chat-multiple',
       label: 'CANNED_RESPONSES',
       hasSubMenu: false,
@@ -91,28 +85,28 @@ const settings = accountId => ({
       ),
       toStateName: 'canned_list',
     },
-    settings_integrations: {
+    {
       icon: 'flash-on',
       label: 'INTEGRATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
       toStateName: 'settings_integrations',
     },
-    settings_applications: {
+    {
       icon: 'star-emphasis',
       label: 'APPLICATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
     },
-    general_settings_index: {
+    {
       icon: 'settings',
       label: 'ACCOUNT_SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/general`),
       toStateName: 'general_settings_index',
     },
-  },
+  ],
 });
 
 export default settings;

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

@@ -10,7 +10,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import PrimaryNavItem from 'dashboard/modules/sidebar/components/PrimaryNavItem';
+import PrimaryNavItem from './PrimaryNavItem';
 
 export default {
   components: { PrimaryNavItem },
@@ -21,7 +21,7 @@ export default {
     }),
     unreadCount() {
       if (!this.notificationMetadata.unreadCount) {
-        return '0';
+        return '';
       }
 
       return this.notificationMetadata.unreadCount < 100

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

@@ -25,7 +25,7 @@
             variant="clear"
             color-scheme="secondary"
             size="small"
-            icon="ion-help-buoy"
+            icon="chat-help"
             @click="$emit('show-support-chat-window')"
           >
             {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}

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

@@ -12,7 +12,7 @@
         :icon="menuItem.icon"
         :name="menuItem.label"
         :to="menuItem.toState"
-        :is-child-menu-active="isMenuActive(menuItem, $route.name)"
+        :is-child-menu-active="menuItem.key === activeMenuItem"
       />
     </nav>
     <div class="menu vertical user-menu">
@@ -31,9 +31,9 @@
 <script>
 import Logo from './Logo';
 import PrimaryNavItem from './PrimaryNavItem';
-import OptionsMenu from 'dashboard/components/layout/sidebarComponents/OptionsMenu';
+import OptionsMenu from './OptionsMenu';
-import AgentDetails from 'dashboard/components/layout/sidebarComponents/AgentDetails';
+import AgentDetails from './AgentDetails';
-import NotificationBell from 'dashboard/components/layout/sidebarComponents/NotificationBell';
+import NotificationBell from './NotificationBell';
 
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
@@ -62,6 +62,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    activeMenuItem: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -79,18 +83,6 @@ export default {
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
-    isMenuActive(menuItem, currentRouteName) {
-      const { key = '' } = menuItem;
-
-      if (currentRouteName === key) return true;
-      // Conversations route is defaulted as home
-      // TODO: Needs to ewfactor old statenames to follow a structure while key naming.
-      if (currentRouteName.includes('inbox') && key === 'conversations')
-        return true;
-      if (currentRouteName.includes('conversations') && key === 'conversations')
-        return true;
-      return false;
-    },
   },
 };
 </script>

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

@@ -1,67 +1,34 @@
 <template>
-  <div class="main-nav secondary-menu">
+  <div v-if="menuConfig.menuItems.length" class="main-nav secondary-menu">
     <transition-group name="menu-list" tag="ul" class="menu vertical">
-      <sidebar-item
+      <secondary-nav-item
-        v-if="shouldShowConversationsSideMenu"
+        v-for="menuItem in accessibleMenuItems"
-        :key="inboxSection.toState"
+        :key="menuItem.toState"
-        :menu-item="inboxSection"
+        :menu-item="menuItem"
       />
-      <sidebar-item
+      <secondary-nav-item
-        v-if="shouldShowTeamsSideMenu"
+        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
-        :key="teamSection.toState"
+        :key="menuItem.key"
-        :menu-item="teamSection"
+        :menu-item="menuItem"
-      />
-      <sidebar-item
-        v-if="shouldShowConversationsSideMenu"
-        :key="labelSection.toState"
-        :menu-item="labelSection"
         @add-label="showAddLabelPopup"
       />
-      <sidebar-item
-        v-if="shouldShowContactSideMenu"
-        :key="contactLabelSection.key"
-        :menu-item="contactLabelSection"
-        @add-label="showAddLabelPopup"
-      />
-      <sidebar-item
-        v-if="shouldShowCampaignSideMenu"
-        :key="campaignSubSection.key"
-        :menu-item="campaignSubSection"
-      />
-      <sidebar-item
-        v-if="shouldShowReportsSideMenu"
-        :key="reportsSubSection.key"
-        :menu-item="reportsSubSection"
-      />
-      <sidebar-item
-        v-if="shouldShowSettingsSideMenu"
-        :key="settingsSubMenu.key"
-        :menu-item="settingsSubMenu"
-      />
-      <sidebar-item
-        v-if="shouldShowNotificationsSideMenu"
-        :key="notificationsSubMenu.key"
-        :menu-item="notificationsSubMenu"
-      />
     </transition-group>
   </div>
 </template>
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
-import SidebarItem from 'dashboard/components/layout/SidebarItem';
+import SecondaryNavItem from './SecondaryNavItem.vue';
-import routesMixin from 'dashboard/modules/sidebar/mixins/routes.mixin';
 
 export default {
   components: {
-    SidebarItem,
+    SecondaryNavItem,
   },
-  mixins: [routesMixin],
   props: {
     accountId: {
       type: Number,
       default: 0,
     },
-    accountLabels: {
+    labels: {
       type: Array,
       default: () => [],
     },
@@ -73,12 +40,27 @@ export default {
       type: Array,
       default: () => [],
     },
-    menuItems: {
+    menuConfig: {
-      type: Array,
+      type: Object,
-      default: () => [],
+      default: () => {},
+    },
+    currentRole: {
+      type: String,
+      default: '',
     },
   },
   computed: {
+    accessibleMenuItems() {
+      if (!this.currentRole) {
+        return [];
+      }
+      return this.menuConfig.menuItems.filter(
+        menuItem =>
+          window.roleWiseRoutes[this.currentRole].indexOf(
+            menuItem.toStateName
+          ) > -1
+      );
+    },
     inboxSection() {
       return {
         icon: 'folder',
@@ -87,7 +69,6 @@ export default {
         newLink: true,
         newLinkTag: 'NEW_INBOX',
         key: 'inbox',
-        cssClass: 'menu-title align-justify',
         toState: frontendURL(`accounts/${this.accountId}/settings/inboxes/new`),
         toStateName: 'settings_inbox_new',
         newLinkRouteName: 'settings_inbox_new',
@@ -109,12 +90,11 @@ export default {
         newLink: true,
         newLinkTag: 'NEW_LABEL',
         key: 'label',
-        cssClass: 'menu-title align-justify',
         toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
         toStateName: 'labels_list',
         showModalForNewItem: true,
         modalName: 'AddLabel',
-        children: this.accountLabels.map(label => ({
+        children: this.labels.map(label => ({
           id: label.id,
           label: label.title,
           color: label.color,
@@ -133,12 +113,11 @@ export default {
         key: 'label',
         newLink: true,
         newLinkTag: 'NEW_LABEL',
-        cssClass: 'menu-title align-justify',
         toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
         toStateName: 'labels_list',
         showModalForNewItem: true,
         modalName: 'AddLabel',
-        children: this.accountLabels.map(label => ({
+        children: this.labels.map(label => ({
           id: label.id,
           label: label.title,
           color: label.color,
@@ -149,9 +128,6 @@ export default {
         })),
       };
     },
-    campaignSubSection() {
-      return this.getSubSectionByKey('campaigns');
-    },
     teamSection() {
       return {
         icon: 'people-team',
@@ -160,7 +136,6 @@ export default {
         newLink: true,
         newLinkTag: 'NEW_TEAM',
         key: 'team',
-        cssClass: 'menu-title align-justify teams-sidebar-menu',
         toState: frontendURL(`accounts/${this.accountId}/settings/teams/new`),
         toStateName: 'settings_teams_new',
         newLinkRouteName: 'settings_teams_new',
@@ -172,41 +147,18 @@ export default {
         })),
       };
     },
-
+    additionalSecondaryMenuItems() {
-    notificationsSubMenu() {
+      let conversationMenuItems = [this.inboxSection, this.labelSection];
+      if (this.teams.length) {
+        conversationMenuItems = [this.teamSection, ...conversationMenuItems];
+      }
       return {
-        icon: 'alert',
+        conversations: conversationMenuItems,
-        label: 'NOTIFICATIONS',
+        contacts: [this.contactLabelSection],
-        hasSubMenu: false,
-        cssClass: 'menu-title align-justify',
-        key: 'notifications',
-        children: [],
       };
     },
-    settingsSubMenu() {
-      return this.getSubSectionByKey('settings');
-    },
-    reportsSubSection() {
-      return this.getSubSectionByKey('reports');
-    },
   },
   methods: {
-    getSubSectionByKey(subSectionKey) {
-      const menuItems = Object.values(
-        this.sideMenuItems[subSectionKey].menuItems
-      );
-      const campaignItem = this.menuItems.find(
-        ({ key }) => key === subSectionKey
-      );
-
-      return {
-        ...campaignItem,
-        children: menuItems.map(item => ({
-          ...item,
-          label: this.$t(`SIDEBAR.${item.label}`),
-        })),
-      };
-    },
     showAddLabelPopup() {
       this.$emit('add-label');
     },

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

@@ -13,7 +13,7 @@
         @click="navigate"
       >
         <span v-if="icon" class="badge--icon">
-          <fluent-icon class="inbox-icon" :icon="icon" size="10" />
+          <fluent-icon class="inbox-icon" :icon="icon" size="12" />
         </span>
         <span
           v-if="labelColor"
@@ -73,7 +73,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$badge-size: var(--space-slab);
+$badge-size: var(--space-normal);
+$label-badge-size: var(--space-slab);
 
 .button {
   margin: var(--space-small) 0;
@@ -117,8 +118,6 @@ $badge-size: var(--space-slab);
 .badge--label,
 .badge--icon {
   display: inline-flex;
-  min-width: $badge-size;
-  height: $badge-size;
   border-radius: var(--border-radius-small);
   margin-right: var(--space-smaller);
   background: var(--s-100);
@@ -126,7 +125,15 @@ $badge-size: var(--space-slab);
 
 .badge--icon {
   align-items: center;
+  height: $badge-size;
   justify-content: center;
+  min-width: $badge-size;
+}
+
+.badge--label {
+  height: $label-badge-size;
+  min-width: $label-badge-size;
+  margin-left: var(--space-smaller);
 }
 
 .badge.secondary {

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

@@ -1,16 +1,24 @@
 <template>
-  <li :class="computedClass" class="sidebar-item">
+  <li class="sidebar-item">
-    <a
+    <span v-if="hasSubMenu" class="secondary-menu--title fs-small">
-      class="sub-menu-title"
-      :class="getMenuItemClass"
-      data-tooltip
-      aria-haspopup="true"
-      :title="menuItem.toolTip"
-    >
       {{ $t(`SIDEBAR.${menuItem.label}`) }}
-    </a>
+    </span>
-    <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
+    <router-link
-      <secondary-nav-item
+      v-else
+      class="secondary-menu--title secondary-menu--link fs-small"
+      :class="computedClass"
+      :to="menuItem.toState"
+    >
+      <fluent-icon
+        :icon="menuItem.icon"
+        class="secondary-menu--icon"
+        size="14"
+      />
+      {{ $t(`SIDEBAR.${menuItem.label}`) }}
+    </router-link>
+
+    <ul v-if="hasSubMenu" class="nested vertical menu">
+      <secondary-child-nav-item
         v-for="child in menuItem.children"
         :key="child.id"
         :to="child.toState"
@@ -20,7 +28,7 @@
         :icon="computedInboxClass(child)"
       />
       <router-link
-        v-if="menuItem.newLink"
+        v-if="showItem(menuItem)"
         v-slot="{ href, isActive, navigate }"
         :to="menuItem.toState"
         custom
@@ -46,13 +54,13 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import adminMixin from '../../mixins/isAdmin';
+import adminMixin from '../../../mixins/isAdmin';
 import { getInboxClassByType } from 'dashboard/helper/inbox';
 
-import SecondaryNavItem from 'dashboard/modules/sidebar/components/SecondaryNavItem';
+import SecondaryChildNavItem from './SecondaryChildNavItem';
 
 export default {
-  components: { SecondaryNavItem },
+  components: { SecondaryChildNavItem },
   mixins: [adminMixin],
   props: {
     menuItem: {
@@ -62,10 +70,8 @@ export default {
   },
   computed: {
     ...mapGetters({ activeInbox: 'getSelectedInbox' }),
-    getMenuItemClass() {
+    hasSubMenu() {
-      return this.menuItem.cssClass
+      return !!this.menuItem.children;
-        ? `side-menu ${this.menuItem.cssClass}`
-        : 'side-menu';
     },
     computedClass() {
       // If active Inbox is present
@@ -76,7 +82,7 @@ export default {
         this.$store.state.route.name === 'inbox_conversation' &&
         this.menuItem.toStateName === 'home'
       ) {
-        return 'active';
+        return 'is-active';
       }
       return ' ';
     },
@@ -88,14 +94,6 @@ export default {
       const classByType = getInboxClassByType(type, phoneNumber);
       return classByType;
     },
-    computedChildClass(child) {
-      if (!child.truncateLabel) return '';
-      return 'text-truncate';
-    },
-    computedChildTitle(child) {
-      if (!child.truncateLabel) return false;
-      return child.label;
-    },
     newLinkClick(e, navigate) {
       if (this.menuItem.newLinkRouteName) {
         navigate(e);
@@ -114,17 +112,46 @@ export default {
 </script>
 <style lang="scss" scoped>
 .sidebar-item {
-  margin: var(--space-small) 0;
+  margin: var(--space-smaller) 0 0;
 }
-.sub-menu-title {
+
-  display: flex;
+.secondary-menu--title {
-  justify-content: space-between;
-  padding: 0 var(--space-small);
-  margin-bottom: var(--space-smaller);
   color: var(--s-600);
+  display: flex;
   font-weight: var(--font-weight-bold);
   line-height: var(--space-two);
-  text-transform: uppercase;
+  margin: var(--space-small) 0;
+  padding: 0 var(--space-small);
+}
+
+.secondary-menu--link {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: var(--space-small);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--border-radius-normal);
+
+  &:hover {
+    background: var(--s-25);
+    color: var(--s-600);
+  }
+
+  &:focus {
+    border-color: var(--w-300);
+  }
+
+  &.router-link-exact-active,
+  &.is-active {
+    background: var(--w-25);
+    color: var(--w-500);
+    border-color: var(--w-25);
+  }
+}
+
+.secondary-menu--icon {
+  margin-right: var(--space-smaller);
+  min-width: var(--space-normal);
 }
 
 .sub-menu-link {

app/javascript/dashboard/i18n/default-sidebar.js

@@ -1,17 +0,0 @@
-import common from './sidebarItems/common';
-import contacts from './sidebarItems/contacts';
-import reports from './sidebarItems/reports';
-import campaigns from './sidebarItems/campaigns';
-import settings from './sidebarItems/settings';
-import notifications from './sidebarItems/notifications';
-
-// TODO - find hasSubMenu usage - July/2021
-
-export const getSidebarItems = accountId => ({
-  common: common(accountId),
-  contacts: contacts(accountId),
-  reports: reports(accountId),
-  campaigns: campaigns(accountId),
-  settings: settings(accountId),
-  notifications: notifications(accountId),
-});

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -135,6 +135,7 @@
   },
   "SIDEBAR": {
     "CONVERSATIONS": "Conversations",
+    "ALL_CONVERSATIONS": "All Conversations",
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",

app/javascript/dashboard/i18n/sidebarItems/common.js

@@ -1,63 +0,0 @@
-import { frontendURL } from '../../helper/URLHelper';
-
-const common = accountId => ({
-  routes: [
-    'home',
-    'inbox_dashboard',
-    'inbox_conversation',
-    'conversation_through_inbox',
-    'notifications_dashboard',
-    'profile_settings',
-    'profile_settings_index',
-    'label_conversations',
-    'conversations_through_label',
-    'team_conversations',
-    'conversations_through_team',
-    'notifications_index',
-  ],
-  menuItems: {
-    assignedToMe: {
-      icon: 'chat',
-      label: 'CONVERSATIONS',
-      hasSubMenu: true,
-      key: 'conversations',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-      toolTip: 'Conversation from all subscribed inboxes',
-      toStateName: 'home',
-    },
-    contacts: {
-      key: 'contacts',
-      icon: 'book-contacts',
-      label: 'CONTACTS',
-      hasSubMenu: true,
-      toState: frontendURL(`accounts/${accountId}/contacts`),
-      toStateName: 'contacts_dashboard',
-    },
-    reports: {
-      key: 'reports',
-      icon: 'arrow-trending-lines',
-      label: 'REPORTS',
-      hasSubMenu: true,
-      toState: frontendURL(`accounts/${accountId}/reports`),
-      toStateName: 'settings_account_reports',
-    },
-    campaigns: {
-      key: 'campaigns',
-      icon: 'megaphone',
-      label: 'CAMPAIGNS',
-      hasSubMenu: true,
-      toState: frontendURL(`accounts/${accountId}/campaigns`),
-      toStateName: 'settings_account_campaigns',
-    },
-    settings: {
-      key: 'settings',
-      icon: 'settings',
-      label: 'SETTINGS',
-      hasSubMenu: true,
-      toState: frontendURL(`accounts/${accountId}/settings`),
-      toStateName: 'settings_home',
-    },
-  },
-});
-
-export default common;

app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js

@@ -1,35 +0,0 @@
-import { getSidebarItems } from 'dashboard/i18n/default-sidebar';
-
-export default {
-  computed: {
-    currentRoute() {
-      return this.$store.state.route.name;
-    },
-    sideMenuItems() {
-      return getSidebarItems(this.accountId);
-    },
-    shouldShowConversationsSideMenu() {
-      return this.sideMenuItems.common.routes.includes(this.currentRoute);
-    },
-    shouldShowContactSideMenu() {
-      return this.sideMenuItems.contacts.routes.includes(this.currentRoute);
-    },
-    shouldShowCampaignSideMenu() {
-      return this.sideMenuItems.campaigns.routes.includes(this.currentRoute);
-    },
-    shouldShowSettingsSideMenu() {
-      return this.sideMenuItems.settings.routes.includes(this.currentRoute);
-    },
-    shouldShowReportsSideMenu() {
-      return this.sideMenuItems.reports.routes.includes(this.currentRoute);
-    },
-    shouldShowNotificationsSideMenu() {
-      return this.sideMenuItems.notifications.routes.includes(
-        this.currentRoute
-      );
-    },
-    shouldShowTeamsSideMenu() {
-      return this.shouldShowConversationsSideMenu && this.teams.length;
-    },
-  },
-};

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -14,6 +14,7 @@
   "book-contacts-outline": "M15.5 12.25a.75.75 0 0 0-.75-.75h-5a.75.75 0 0 0-.75.75v.5c0 1 1.383 1.75 3.25 1.75s3.25-.75 3.25-1.75v-.5ZM14 8.745C14 7.78 13.217 7 12.25 7s-1.75.779-1.75 1.745a1.75 1.75 0 1 0 3.5 0ZM4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15Zm1.5 0V18H19V4.5a1 1 0 0 0-1-1H6.5a1 1 0 0 0-1 1Z",
   "building-bank-outline": "M13.032 2.325a1.75 1.75 0 0 0-2.064 0L3.547 7.74c-.978.713-.473 2.26.736 2.26H4.5v5.8A2.75 2.75 0 0 0 3 18.25v1.5c0 .413.336.75.75.75h16.5a.75.75 0 0 0 .75-.75v-1.5a2.75 2.75 0 0 0-1.5-2.45V10h.217c1.21 0 1.713-1.547.736-2.26l-7.421-5.416Zm-1.18 1.211a.25.25 0 0 1 .295 0L18.95 8.5H5.05l6.803-4.964ZM18 10v5.5h-2V10h2Zm-3.5 0v5.5h-1.75V10h1.75Zm-3.25 0v5.5H9.5V10h1.75Zm-5.5 7h12.5c.69 0 1.25.56 1.25 1.25V19h-15v-.75c0-.69.56-1.25 1.25-1.25ZM6 15.5V10h2v5.5H6Z",
   "call-outline": "m7.056 2.418 1.167-.351a2.75 2.75 0 0 1 3.302 1.505l.902 2.006a2.75 2.75 0 0 1-.633 3.139L10.3 10.11a.25.25 0 0 0-.078.155c-.044.397.225 1.17.845 2.245.451.781.86 1.33 1.207 1.637.242.215.375.261.432.245l2.01-.615a2.75 2.75 0 0 1 3.034 1.02l1.281 1.776a2.75 2.75 0 0 1-.339 3.605l-.886.84a3.75 3.75 0 0 1-3.587.889c-2.754-.769-5.223-3.093-7.435-6.924-2.215-3.836-2.992-7.14-2.276-9.913a3.75 3.75 0 0 1 2.548-2.652Zm.433 1.437a2.25 2.25 0 0 0-1.529 1.59c-.602 2.332.087 5.261 2.123 8.788 2.033 3.522 4.222 5.582 6.54 6.23a2.25 2.25 0 0 0 2.151-.534l.887-.84a1.25 1.25 0 0 0 .154-1.639l-1.28-1.775a1.25 1.25 0 0 0-1.38-.464l-2.015.617c-1.17.348-2.232-.593-3.372-2.568C9 11.93 8.642 10.9 8.731 10.099c.047-.416.24-.8.546-1.086l1.494-1.393a1.25 1.25 0 0 0 .288-1.427l-.902-2.006a1.25 1.25 0 0 0-1.5-.684l-1.168.352Z",
+  "chat-help-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5Zm0 12a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.297 1.574-1.051 2.359l-.169.171c-.622.622-.78.886-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.297-1.574 1.051-2.359l.169-.171c.622-.622.78-.886.78-1.47a1.25 1.25 0 0 0-2.493-.128l-.007.128a.75.75 0 0 1-1.5 0A2.75 2.75 0 0 1 12 6.75Z",
   "chat-multiple-outline": "M9.562 3a7.5 7.5 0 0 0-6.798 10.673l-.724 2.842a1.25 1.25 0 0 0 1.504 1.524c.75-.18 1.903-.457 2.93-.702A7.5 7.5 0 1 0 9.561 3Zm-6 7.5a6 6 0 1 1 3.33 5.375l-.244-.121-.264.063c-.923.22-1.99.475-2.788.667l.69-2.708.07-.276-.13-.253a5.971 5.971 0 0 1-.664-2.747Zm11 10.5c-1.97 0-3.762-.759-5.1-2h.1c.718 0 1.415-.089 2.08-.257.865.482 1.86.757 2.92.757.96 0 1.866-.225 2.67-.625l.243-.121.264.063c.922.22 1.966.445 2.74.61-.175-.751-.414-1.756-.642-2.651l-.07-.276.13-.253a5.971 5.971 0 0 0 .665-2.747 5.995 5.995 0 0 0-2.747-5.042 8.44 8.44 0 0 0-.8-2.047 7.503 7.503 0 0 1 4.344 10.263c.253 1.008.509 2.1.671 2.803a1.244 1.244 0 0 1-1.467 1.5 132.62 132.62 0 0 1-2.913-.64 7.476 7.476 0 0 1-3.088.663Z",
   "chat-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5ZM8.75 13h4.498a.75.75 0 0 1 .102 1.493l-.102.007H8.75a.75.75 0 0 1-.102-1.493L8.75 13h4.498H8.75Zm0-3.5h6.505a.75.75 0 0 1 .101 1.493l-.101.007H8.75a.75.75 0 0 1-.102-1.493L8.75 9.5h6.505H8.75Z",
   "checkmark-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-1.25 9.94 4.47-4.47a.75.75 0 0 1 1.133.976l-.073.084-5 5a.75.75 0 0 1-.976.073l-.084-.073-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073 1.97 1.97 4.47-4.47-4.47 4.47Z",
@@ -73,6 +74,7 @@
   "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
   "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
 
+
   "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
   "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
   "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",