@terminus/ui-sidenav NPM

Installation

Packages to be installed

@terminus/design-tokens
@terminus/fe-utilities
@terminus/ui-button
@terminus/ui-link
@terminus/ui-logo
@terminus/ui-sidenav
@terminus/ui-styles

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-sidenav

Modules that need to be included in your application

BrowserAnimationsModule
RouterModule.forRoot(MY_ROUTES)
TsSidenavModule

CSS imports

In your top-level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families and icon fonts by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<!-- Don't forget to update the integrity SHA -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/solid.css" integrity="SHA-HERE" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/fontawesome.css" integrity="SHA-HERE" crossorigin="anonymous">

Usage

The most minimal usage:

<ts-sidenav
  [user]="userObject"
  [switcherCurrentTitle]="currentTitle"
  [switcherContent]="switcherContent"
></ts-sidenav>

This will create a sidenav with a platform switcher and a user menu, but no other navigation items.

Platform switcher

The switcher needs the current platform title and the array of links to display in the panel:

currentTitle = 'My Platform';
switcherContent: TS_SIDENAV_PLATFORM_SWITCHER_CONTENT = [
  {
    title: 'Account Engagement Hub',
    children: [
      {
        title: 'Data Studio',
        url: 'https://google.com',
        iconClasses: 'fas fa-shapes',
      },
      {
        title: 'Measurement Studio',
        url: 'https://google.com',
        iconClasses: 'fas fa-chart-pie',
      },
    ],
  },
  ...
];

<ts-sidenav
  [switcherCurrentTitle]="currentTitle"
  [switcherContent]="switcherContent"
></ts-sidenav>

Triggers

To add an individual navigation trigger, wrap a link or button in <ts-sidenav-trigger>:

<ts-sidenav>
  <ts-sidenav-trigger>
    <ts-tooltip tooltipValue="ABM Scorecard" tooltipPosition="after">
      <a routerLink="/scorecard"><span class="fas fa-analytics"></span><span class="sr-only">ABM Scorecard</span></a>
    </ts-tooltip>
  </ts-sidenav-trigger>
</ts-sidenav>

Each item should have a tooltip since the navigation item is only an icon.
The link or button should have appropriate text wrapped with the .sr-only class so that the text is available for screen readers.
The tooltip position should be set to after.

Section breaks

To create a break between collections of navigation links, insert the <ts-sidenav-section-break> component:

<ts-sidenav>
  <ts-sidenav-trigger>
    <ts-tooltip tooltipValue="ABM Scorecard" tooltipPosition="after">
      <a routerLink="/scorecard"><span class="fas fa-analytics"></span><span class="sr-only">ABM Scorecard</span></a>
    </ts-tooltip>
  </ts-sidenav-trigger>
  
  <ts-sidenav-section-break></ts-sidenav-section-break>

  <ts-sidenav-trigger>
    <ts-tooltip tooltipValue="Configuration" tooltipPosition="after">
      <a routerLink="/configuration"><span class="fas fa-tools"></span><span class="sr-only">Configuration</span></a>
    </ts-tooltip>
  </ts-sidenav-trigger>
</ts-sidenav>

Panels

By default, each trigger is a simple trigger that will allow the user to click on the link or button contained within. Triggers also can be used to open panels with content.

Panel type

The panel type can be defined by the panelType input and supports popout and drawer:

<ts-sidenav-trigger panelType="popout">...</ts-sidenav-trigger>
<ts-sidenav-trigger panelType="drawer">...</ts-sidenav-trigger>

Panel contents

The panel contents should be passed in to the trigger component wrapped with the directive tsTriggerComponentPanelContent:

<ts-sidenav-trigger panelType="popout">
  <ts-tooltip tooltipValue="Switch User" tooltipPosition="after">
    <button><span class="fas fa-people-arrows"></span><span class="sr-only">Switch User</span></button>
  </ts-tooltip>

  <div tsTriggerComponentPanelContent>
    <div class="ts-sidenav-panel-title">Switch User Menu</div>
    <ul>
      <li>
        <a href="#" class="ts-sidenav-panel-action">Link 1</a>
      </li>
      <li>
        <a href="#" class="ts-sidenav-panel-action">Link 2</a>
      </li>
    </ul>
  </div>
</ts-sidenav-trigger>

Styles

Several classes exist to allow the consumer to style panel contents appropriately:

Class	Purpose
`.ts-sidenav-panel-title`	The primary panel title
`.ts-sidenav-panel-subtitle`	A smaller subtitle heading
`.ts-sidenav-panel-action`	The actual link or button

To create a break within lists, add an <hr> as the only content within a list item:

<div tsTriggerComponentPanelContent>
  <div class="ts-sidenav-panel-title">Settings</div>
  <ul>
    <li><a routerLink="/configuration" class="ts-sidenav-panel-action">Configuration</a></li>
    <li><hr></li>
    <li><a routerLink="/permissions" class="ts-sidenav-panel-action">Permissions</a></li>
    <li><a routerLink="/stages" class="ts-sidenav-panel-action">Stages</a></li>
  </ul>
</div>

NOTE: <hr> can also be used outside of lists.

Do not disturb

To support the 'Do Not Disturb' menu, the trigger component accepts a FormGroup of <ts-toggle> form controls that will define the status dot for the trigger:

toggleForm: new FormGroup({
  acme: new FormControl(true),
  ajax: new FormControl(false),
}),

<ts-sidenav-trigger panelType="popout" [statusFormGroup]="toggleForm">
  <ts-tooltip tooltipValue="Do Not Disturb" tooltipPosition="after">
    <button><span class="fas fa-moon"></span><span class="sr-only">Do Not Disturb</span></button>
  </ts-tooltip>

  <div tsTriggerComponentPanelContent>
    <div class="ts-sidenav-panel-section-title">Do Not Disturb</div>
    <div class="ts-sidenav-panel-section-subtitle">Preferences</div>
    <hr>
    <form [formGroup]="toggleForm">
      <ul>
        <li><ts-toggle class="ts-sidenav-panel-action" formControlName="acme" labelPosition="before">ACME Co.</ts-toggle></li>
        <li><ts-toggle class="ts-sidenav-panel-action" formControlName="ajax" labelPosition="before">AJAX Corporation</ts-toggle></li>
      </ul>
    </form>
  </div>
</ts-sidenav-trigger>

The notification dot will be colored amber if at least one but not all controls are true. If all controls become true, the dot will be colored red. If all controls are false, the dot will disappear.

User panel

The user panel needs an object that defines the current user:

userObject: TS_SIDENAV_USER = {
  name: 'Eliza Doolittle',
  email: 'eliza.doolittle@terminus.com',
  // This is optional. If not included, the user's first initial will be displayed in place of the image.
  imageUrl: 'https://picsum.photos/id/1025/150/150/',
};

<ts-sidenav [user]="userObject"></ts-sidenav>

Defaults

The user menu has sensible defaults for routes and URLs, but these can be overridden as needed:

// Define the new options:
const newDefaults: TsSidenavDefaultOptions {
  profileRoute: 'http://google.com',
  signOutRoute: 'http://google.com',
  academyUrl: 'http://google.com',
  knowledgeBaseUrl: 'http://google.com',
};

...

// Then pass it in as a provider:
providers: [
  {
    provide: TS_SIDENAV_DEFAULT_OPTIONS,
    useValue: newDefaults,
  },
],

tslib @angular-devkit/schematics @schematics/angular

@everything-registry/sub-chunk-905 @zalastax/nolb-_ter @infinitebrahmanuniverse/nolb-_ter

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago