Extending the navigation bar

The navigation bar in the IBM® Sterling Store Engagement application currently has the global search and alerts menu options. You can extend the navigation bar to display other menu options according to your business requirements.

About this task

To develop the menu for the navigation bar, you must configure the menu and create a service to implement the menu actions.

Procedure

Configure the navigation bar menu.
The INavbarMenusConfig interface is implemented by menu configuration. Place the INavbarMenusConfig configuration in the store-customization-impl.ts file to configure the navigation bar. You can place the service class in a shared module and configure it in shared-extension.module.ts.
Note: Changes in shared-extension.module.ts must be made only for adding new components or services.
Configure the following fields to extend the navigation bar.
- menuSequenceNumber
  The menuSequenceNumber field specifies the order in which menu options are displayed. The menu options are displayed in ascending order. It is recommended that you give sequence number with a difference of five. You can add out-of-the-box icons without any overlaps.
- menuService
  The menuService service implements the action that is to be performed when you click the menu. It must be of type InjectionToken<INavbarMenu>.
- menuTID
  The menuTID is a unique identifier for a menu. You can add it to an HTML tag to automate test cases.
- menuTitleBundleKey
  The menuTitleBundleKey is a bundle key of the text that is displayed along with the icon of the menu.
- resourceId
  The resourceId field is a resource permission that is checked before the menu is displayed.
- menuIconClass
  The menuIconClass field is the name of the menu icon class.
The following example shows how you can configure the fields.
```
export class StoreCustomizationImpl extends StoreCustomizationBase {
    static extensionNavbarMenusConfigList: INavbarMenusConfig[] = [
        {
            menuSequenceNumber: 20,
            menuService: GLOBAL_SEARCH_MENU_SERVICE,
            menuTID: 'NavBarGlobalSearchAction',
            menuIconClass: 'app-icon-alert_16',
            menuTitleBundleKey: 'topNavBar.TITLE_AlertMenu',
            resourceId: 'ISF000001'
        }
    ];
}
```

Create a service to implement service actions.

The service class implements the INavbarMenu interface that has only one function, handleMenuAction. This service implements the actions that are to be performed when you click the menu. The service must be of type InjectionToken<INavbarMenu>.

The following example shows how you can implement service action.

@Injectable()
export class GlobalSearchMenuService implements INavbarMenu {


    constructor(private modalService: NgbModal,
        private router: Router,
        private activeRoute: ActivatedRoute
    ) { }


    handleMenuAction(route) {
        console.log('global search menu called');
    }


}
export const GLOBAL_SEARCH_MENU_SERVICE = new InjectionToken<INavbarMenu>('GlobalSearchMenuService');

You can configure the token in Multidimensional in the following manner.

@NgModule({
  imports: [],
  entryComponents: [],
  declarations: [],
  exports: [],
  providers: [
    {
      provide: GLOBAL_SEARCH_MENU_SERVICE,  // Previously defined token
      useClass: GlobalSearchMenuService,  // The actual service
    }
  ]
})
export class SharedExtensionModule { }