Investec Platform Plugins

Appearance

Left nav builder ​

@investec/plugins-left-nav-builder turns menu and client context into the shell's left-navigation list.

Package ​

sh
npm install --save @investec/plugins-left-nav-builder

What it owns ​

  • left-nav config for private-client, business-banking, and ix
  • environment-aware menu templates
  • state subjects for menu config, auth context, client type, and derived nav lists
  • duplicate handling for menu items that should open a routing modal

Public contract ​

The package exports:

  • leftNavBuilder
  • getLoggedInMenuState()
  • getLoggedInMenuStateByClientType()
  • left-nav types such as ILeftNavMenuItem

Integration pattern ​

The standard flow is:

  1. set leftNavBuilder.activeEnvironment
  2. push authResponse
  3. push clientType
  4. push the menu state from Menu builder
  5. call getLoggedInMenuState() or read the cached list through getLoggedInMenuStateByClientType()
ts
import {
  getLoggedInMenuState,
  leftNavBuilder,
} from '@investec/plugins-left-nav-builder';

leftNavBuilder.activeEnvironment = 'staging';
leftNavBuilder.authResponse.next(authResponse);
leftNavBuilder.clientType.next('private-client');
leftNavBuilder.currentMenuState.next(menuConfig);

const leftNavState = getLoggedInMenuState();

Behaviour by client type ​

Private client ​

Maps menu items from the aggregated menu config. Duplicate labels such as "Portfolio" or "Trade" can be merged into a routing modal when the configuration includes routing metadata.

Business banking ​

Matches configured nav labels against businessBankingLeftNavData.featureModules.

IX ​

Matches configured nav IDs against ixLeftNavData.menuList.

Extension hooks ​

The state object also exposes:

  • addGenericMenuList
  • addMenuSpecifcList
  • businessBankingLeftNavData
  • ixLeftNavData
  • leftNavMenuList
  • clearState

Use these when the shell needs to inject additional lists or cache client-type specific left-nav output.

How consumers extend it ​

This package is intentionally extended through its state object.

Common consumer patterns are:

  • inject business-banking or IX lists through the dedicated subjects;
  • use addGenericMenuList to layer additional client-type menu items into the cached left-nav state;
  • subscribe to the built output and persist an app-specific copy with active state or UI metadata.

Change the package when the shared base templates, duplicate-routing behaviour, or client-type model itself needs to change.

ts
import {
  getLoggedInMenuStateByClientType,
  leftNavBuilder,
  type ILeftNavMenuListObject,
} from '@investec/plugins-left-nav-builder';

const extraPrivateClientLinks: ILeftNavMenuListObject = {
  clientType: 'private-client',
  menuList: [
    {
      id: 9001,
      priorityOrder: 2000,
      label: 'My feature tools',
      icon: 'finance-tools',
      url: '/usrroot-wpaas/my-feature-tools',
      active: false,
    },
  ],
};

leftNavBuilder.addGenericMenuList.next(extraPrivateClientLinks);

const cachedMenuItems = getLoggedInMenuStateByClientType();

Consumer notes ​

  • The plugin depends on the consumer setting clientType correctly before building.
  • The private-client flow expects a menu config that already came from Menu builder.
  • clearState.next() resets the cached menu config, auth state, client type, and built lists.