Atlas

Unify the navigation story via universal navigation bar throughout it all.

Nav

<atlas-navbar [demo]="demo"                            // Whether or not to use the demo environment
              [token]="session$ | async"               // The Session Token required to get information about the user
              [serviceProviderId]="serviceProviderId"  // The current project's service provider ID
              [partnerId]="partnerId"                  // Partner ID context
              [marketId]="marketId"                    // Market ID
              [accountId]="accountId"                  // Account Group ID
              [groupPath]="groupPath"                  // Brand Path
              [dropdownItems]="menuItems"              // Custom User Dropdown Items
              [hideCenters]="hideCenters">             // Show/Hide the center selector
</atlas-navbar>

At least one of PartnerID or AccountID must be specified.

Item Component

Atlas Item is a helper component provided by Atlas to aid in the styling of actions being placed inside of the navbar:

Generic Mat Icon Item

<atlas-item [icon]="'MatIconName'" interactable>
</atlas-item>

User Specified Item

<atlas-item interactable>
    <div>...</div>
</atlas-item>

Browser Support

If your application supports older browsers, make sure you turn on the Angular Polyfills and add the required libraries to your project.

To support custom theming an extra polyfill needs to be added to support css variables: npm install --save css-vars-ponyfill

// polyfills.ts

// CSS Vars

import cssVars from 'css-vars-ponyfill';

cssVars({
  watch: true,
  shadowDOM: true,
});