Imagine Sidebar Navigation Module

To implement the sidebar navigation module into an Angular project, you will need to:

1. Run npm i @k3imagine/sidebar-navigation, the package can be found here: https://www.npmjs.com/package/@k3imagine/sidebar-navigation

2. import { NavigationLibModule } from '@k3imagine/sidebar-navigation'; in the app.module.ts and the imports of the NgModule.

3. import 'CUSTOM_ELEMENTS_SCHEMA'; into the app.module.ts if it isn't already there. schemas: [CUSTOM_ELEMENTS_SCHEMA],

4. Call the component's HTML tag in the app.component.html file, with your <router-outlet> in between the <sidebar-navigation> tags and pass in values from your UI's environment variables, this allows the navigation library to make module calls to the correct gateway. As each UI's environment variables are set-up differently, the sidebar expects the apiRequestUrl and the portalUrl from the env. For the portalUrl I'd suggest only setting it if in a production environment. This ensures that the sidebar will remain on localhost and not route you to the module via the portal.

this.sidebarEnvironment = {
portalUrl: env.portalUrl,
apiRequestUrl: `${env.apiRequestUrl}api/v${env.apiVersion}`
};

<sidebar-navigation  [environment]="sidebarEnvironment" (selectedRoute)="routeToItem($event)">
<router-outlet></router-outlet>
</sidebar-navigation>

You will also need to include a routing function in the consuming module UI, this enables us to use each project's internal routers and router guards by passing back the selectedItem when the current module matches the selectedItem's parent module.

public routeToItem(selectedItem) {
  this.zone.run(() => this.router.navigate([selectedItem.url]));
}

5. Optionally, you can include useCustomPage="true" which will remove the existing page-container and page-body wrappers which set margins and padding.

6. In your angular.json, you need to configure the input of the library's assets as so:

{ "glob": "**/*", "input": "./node_modules/@k3imagine/sidebar-navigation/lib/assets", "output": "/assets/" }

When passing in the environment variables, you can set the apiVersion to TEST in order to have a sidebar populated with mock data for immediate testing purposes.

Local Development

When adding new sidebar sidebarEntries/children, you will still need to configure the module UI's internal routing and components as normal, but also be sure to add the destination into your mock node server's date - this will allow you to see it on the sidebar and navigate to/from the new route.

Adding this new item to the module call will require a migration.

This project was generated with Angular CLI version 11.2.4.