\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages to be installed](#packages-to-be-installed)\n - [Modules that need to be included in your application](#modules-that-need-to-be-included-in-your-application)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Platform switcher](#platform-switcher)\n - [Triggers](#triggers)\n - [Section breaks](#section-breaks)\n - [Panels](#panels)\n - [Panel type](#panel-type)\n - [Panel contents](#panel-contents)\n - [Styles](#styles)\n - [Do not disturb](#do-not-disturb)\n - [User panel](#user-panel)\n - [Defaults](#defaults)\n\n\n\n## Installation\n\n### Packages to be installed\n\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-link`\n- `@terminus/ui-logo`\n- `@terminus/ui-sidenav`\n- `@terminus/ui-styles`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-sidenav\n```\n\n### Modules that need to be included in your application\n\n- `BrowserAnimationsModule`\n- `RouterModule.forRoot(MY_ROUTES)`\n- `TsSidenavModule`\n \n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families and icon fonts by adding this link to the `` of your application:\n\n```css\n\n\n\n\n```\n\n## Usage\n\nThe most minimal usage:\n\n```html\n\n```\n\nThis will create a sidenav with a platform switcher and a user menu, but no other navigation items.\n\n### Platform switcher\n\nThe switcher needs the current platform title and the array of links to display in the panel:\n\n```typescript\ncurrentTitle = 'My Platform';\nswitcherContent: TS_SIDENAV_PLATFORM_SWITCHER_CONTENT = [\n {\n title: 'Account Engagement Hub',\n children: [\n {\n title: 'Data Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-shapes',\n },\n {\n title: 'Measurement Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-chart-pie',\n },\n ],\n },\n ...\n];\n```\n\n```html\n\n```\n\n### Triggers\n\nTo add an individual navigation trigger, wrap a link or button in ``:\n\n```html\n\n \n \n ABM Scorecard\n \n \n\n```\n\n1. Each item should have a tooltip since the navigation item is only an icon.\n2. The link or button should have appropriate text wrapped with the `.sr-only` class so that the text is available for\n screen readers.\n3. The tooltip position should be set to `after`.\n\n### Section breaks\n\nTo create a break between collections of navigation links, insert the `` component:\n\n```html\n\n \n \n ABM Scorecard\n \n \n \n \n\n \n \n Configuration\n \n \n\n\n```\n\n### Panels\n\nBy default, each trigger is a simple trigger that will allow the user to click on the link or button contained within.\nTriggers also can be used to open panels with content.\n\n#### Panel type\n\nThe panel type can be defined by the `panelType` input and supports `popout` and `drawer`:\n\n```html\n...\n...\n```\n\n#### Panel contents\n\nThe panel contents should be passed in to the trigger component wrapped with the directive\n`tsTriggerComponentPanelContent`:\n\n```html\n\n \n \n \n\n
\n\n```\n\n#### Styles\n\nSeveral classes exist to allow the consumer to style panel contents appropriately:\n\n| Class | Purpose |\n|------------------------------|-----------------------------|\n| `.ts-sidenav-panel-title` | The primary panel title |\n| `.ts-sidenav-panel-subtitle` | A smaller subtitle heading |\n| `.ts-sidenav-panel-action` | The actual link or button |\n\nTo create a break within lists, add an `` as the only content within a list item:\n\n```html\n
\n```\n\n> NOTE: `` can also be used outside of lists.\n\n#### Do not disturb\n\nTo support the 'Do Not Disturb' menu, the trigger component accepts a FormGroup of `` form controls that will\ndefine the status dot for the trigger:\n\n```typescript\ntoggleForm: new FormGroup({\n acme: new FormControl(true),\n ajax: new FormControl(false),\n}),\n```\n\n```html\n\n \n \n \n\n
\n
Do Not Disturb
\n
Preferences
\n \n \n
\n\n```\n\nThe notification dot will be colored amber if at least one but not all controls are true. If all controls become true,\nthe dot will be colored red. If all controls are false, the dot will disappear.\n\n### User panel\n\nThe user panel needs an object that defines the current user:\n\n```typescript\nuserObject: TS_SIDENAV_USER = {\n name: 'Eliza Doolittle',\n email: 'eliza.doolittle@terminus.com',\n // This is optional. If not included, the user's first initial will be displayed in place of the image.\n imageUrl: 'https://picsum.photos/id/1025/150/150/',\n};\n```\n\n```html\n\n```\n\n#### Defaults\n\nThe user menu has sensible defaults for routes and URLs, but these can be overridden as needed:\n\n```typescript\n// Define the new options:\nconst newDefaults: TsSidenavDefaultOptions {\n profileRoute: 'http://google.com',\n signOutRoute: 'http://google.com',\n academyUrl: 'http://google.com',\n knowledgeBaseUrl: 'http://google.com',\n};\n\n...\n\n// Then pass it in as a provider:\nproviders: [\n {\n provide: TS_SIDENAV_DEFAULT_OPTIONS,\n useValue: newDefaults,\n },\n],\n```\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-sidenav.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-sidenav\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-sidenav/bundles/terminus-ui-sidenav.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-checkbox/bundles/terminus-ui-sidenav.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages to be installed](#packages-to-be-installed)\n - [Modules that need to be included in your application](#modules-that-need-to-be-included-in-your-application)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Platform switcher](#platform-switcher)\n - [Triggers](#triggers)\n - [Section breaks](#section-breaks)\n - [Panels](#panels)\n - [Panel type](#panel-type)\n - [Panel contents](#panel-contents)\n - [Styles](#styles)\n - [Do not disturb](#do-not-disturb)\n - [User panel](#user-panel)\n - [Defaults](#defaults)\n\n\n\n## Installation\n\n### Packages to be installed\n\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-link`\n- `@terminus/ui-logo`\n- `@terminus/ui-sidenav`\n- `@terminus/ui-styles`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-sidenav\n```\n\n### Modules that need to be included in your application\n\n- `BrowserAnimationsModule`\n- `RouterModule.forRoot(MY_ROUTES)`\n- `TsSidenavModule`\n \n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families and icon fonts by adding this link to the `` of your application:\n\n```css\n\n\n\n\n```\n\n## Usage\n\nThe most minimal usage:\n\n```html\n\n```\n\nThis will create a sidenav with a platform switcher and a user menu, but no other navigation items.\n\n### Platform switcher\n\nThe switcher needs the current platform title and the array of links to display in the panel:\n\n```typescript\ncurrentTitle = 'My Platform';\nswitcherContent: TS_SIDENAV_PLATFORM_SWITCHER_CONTENT = [\n {\n title: 'Account Engagement Hub',\n children: [\n {\n title: 'Data Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-shapes',\n },\n {\n title: 'Measurement Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-chart-pie',\n },\n ],\n },\n ...\n];\n```\n\n```html\n\n```\n\n### Triggers\n\nTo add an individual navigation trigger, wrap a link or button in ``:\n\n```html\n\n \n \n ABM Scorecard\n \n \n\n```\n\n1. Each item should have a tooltip since the navigation item is only an icon.\n2. The link or button should have appropriate text wrapped with the `.sr-only` class so that the text is available for\n screen readers.\n3. The tooltip position should be set to `after`.\n\n### Section breaks\n\nTo create a break between collections of navigation links, insert the `` component:\n\n```html\n\n \n \n ABM Scorecard\n \n \n \n \n\n \n \n Configuration\n \n \n\n\n```\n\n### Panels\n\nBy default, each trigger is a simple trigger that will allow the user to click on the link or button contained within.\nTriggers also can be used to open panels with content.\n\n#### Panel type\n\nThe panel type can be defined by the `panelType` input and supports `popout` and `drawer`:\n\n```html\n...\n...\n```\n\n#### Panel contents\n\nThe panel contents should be passed in to the trigger component wrapped with the directive\n`tsTriggerComponentPanelContent`:\n\n```html\n\n \n \n \n\n
\n\n```\n\n#### Styles\n\nSeveral classes exist to allow the consumer to style panel contents appropriately:\n\n| Class | Purpose |\n|------------------------------|-----------------------------|\n| `.ts-sidenav-panel-title` | The primary panel title |\n| `.ts-sidenav-panel-subtitle` | A smaller subtitle heading |\n| `.ts-sidenav-panel-action` | The actual link or button |\n\nTo create a break within lists, add an `` as the only content within a list item:\n\n```html\n
\n```\n\n> NOTE: `` can also be used outside of lists.\n\n#### Do not disturb\n\nTo support the 'Do Not Disturb' menu, the trigger component accepts a FormGroup of `` form controls that will\ndefine the status dot for the trigger:\n\n```typescript\ntoggleForm: new FormGroup({\n acme: new FormControl(true),\n ajax: new FormControl(false),\n}),\n```\n\n```html\n\n \n \n \n\n
\n
Do Not Disturb
\n
Preferences
\n \n \n
\n\n```\n\nThe notification dot will be colored amber if at least one but not all controls are true. If all controls become true,\nthe dot will be colored red. If all controls are false, the dot will disappear.\n\n### User panel\n\nThe user panel needs an object that defines the current user:\n\n```typescript\nuserObject: TS_SIDENAV_USER = {\n name: 'Eliza Doolittle',\n email: 'eliza.doolittle@terminus.com',\n // This is optional. If not included, the user's first initial will be displayed in place of the image.\n imageUrl: 'https://picsum.photos/id/1025/150/150/',\n};\n```\n\n```html\n\n```\n\n#### Defaults\n\nThe user menu has sensible defaults for routes and URLs, but these can be overridden as needed:\n\n```typescript\n// Define the new options:\nconst newDefaults: TsSidenavDefaultOptions {\n profileRoute: 'http://google.com',\n signOutRoute: 'http://google.com',\n academyUrl: 'http://google.com',\n knowledgeBaseUrl: 'http://google.com',\n};\n\n...\n\n// Then pass it in as a provider:\nproviders: [\n {\n provide: TS_SIDENAV_DEFAULT_OPTIONS,\n useValue: newDefaults,\n },\n],\n```\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-sidenav.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-sidenav\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-sidenav/bundles/terminus-ui-sidenav.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-checkbox/bundles/terminus-ui-sidenav.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Platform switcher](#platform-switcher)\n - [Triggers](#triggers)\n - [Section breaks](#section-breaks)\n - [Panels](#panels)\n - [Panel type](#panel-type)\n - [Panel contents](#panel-contents)\n - [Styles](#styles)\n - [Do not disturb](#do-not-disturb)\n - [User panel](#user-panel)\n - [Defaults](#defaults)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-sidenav\n```\n \n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families and icon fonts by adding this link to the `` of your application:\n\n```css\n\n\n\n\n```\n\n## Usage\n\nThe most minimal usage:\n\n```html\n\n```\n\nThis will create a sidenav with a platform switcher and a user menu, but no other navigation items.\n\n### Platform switcher\n\nThe switcher needs the current platform title and the array of links to display in the panel:\n\n```typescript\ncurrentTitle = 'My Platform';\nswitcherContent: TS_SIDENAV_PLATFORM_SWITCHER_CONTENT = [\n {\n title: 'Account Engagement Hub',\n children: [\n {\n title: 'Data Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-shapes',\n },\n {\n title: 'Measurement Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-chart-pie',\n },\n ],\n },\n ...\n];\n```\n\n```html\n\n```\n\n### Triggers\n\nTo add an individual navigation trigger, wrap a link or button in ``:\n\n```html\n\n \n \n ABM Scorecard\n \n \n\n```\n\n1. Each item should have a tooltip since the navigation item is only an icon.\n2. The link or button should have appropriate text wrapped with the `.sr-only` class so that the text is available for\n screen readers.\n3. The tooltip position should be set to `after`.\n\n### Section breaks\n\nTo create a break between collections of navigation links, insert the `` component:\n\n```html\n\n \n \n ABM Scorecard\n \n \n \n \n\n \n \n Configuration\n \n \n\n\n```\n\n### Panels\n\nBy default, each trigger is a simple trigger that will allow the user to click on the link or button contained within.\nTriggers also can be used to open panels with content.\n\n#### Panel type\n\nThe panel type can be defined by the `panelType` input and supports `popout` and `drawer`:\n\n```html\n...\n...\n```\n\n#### Panel contents\n\nThe panel contents should be passed in to the trigger component wrapped with the directive\n`tsTriggerComponentPanelContent`:\n\n```html\n\n \n \n \n\n
\n\n```\n\n#### Styles\n\nSeveral classes exist to allow the consumer to style panel contents appropriately:\n\n| Class | Purpose |\n|------------------------------|-----------------------------|\n| `.ts-sidenav-panel-title` | The primary panel title |\n| `.ts-sidenav-panel-subtitle` | A smaller subtitle heading |\n| `.ts-sidenav-panel-action` | The actual link or button |\n\nTo create a break within lists, add an `` as the only content within a list item:\n\n```html\n
\n```\n\n> NOTE: `` can also be used outside of lists.\n\n#### Do not disturb\n\nTo support the 'Do Not Disturb' menu, the trigger component accepts a FormGroup of `` form controls that will\ndefine the status dot for the trigger:\n\n```typescript\ntoggleForm: new FormGroup({\n acme: new FormControl(true),\n ajax: new FormControl(false),\n}),\n```\n\n```html\n\n \n \n \n\n
\n
Do Not Disturb
\n
Preferences
\n \n \n
\n\n```\n\nThe notification dot will be colored amber if at least one but not all controls are true. If all controls become true,\nthe dot will be colored red. If all controls are false, the dot will disappear.\n\n### User panel\n\nThe user panel needs an object that defines the current user:\n\n```typescript\nuserObject: TS_SIDENAV_USER = {\n name: 'Eliza Doolittle',\n email: 'eliza.doolittle@terminus.com',\n // This is optional. If not included, the user's first initial will be displayed in place of the image.\n imageUrl: 'https://picsum.photos/id/1025/150/150/',\n};\n```\n\n```html\n\n```\n\n#### Defaults\n\nThe user menu has sensible defaults for routes and URLs, but these can be overridden as needed:\n\n```typescript\n// Define the new options:\nconst newDefaults: TsSidenavDefaultOptions {\n profileRoute: 'http://google.com',\n signOutRoute: 'http://google.com',\n academyUrl: 'http://google.com',\n knowledgeBaseUrl: 'http://google.com',\n};\n\n...\n\n// Then pass it in as a provider:\nproviders: [\n {\n provide: TS_SIDENAV_DEFAULT_OPTIONS,\n useValue: newDefaults,\n },\n],\n```\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-sidenav.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-sidenav\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-sidenav/bundles/terminus-ui-sidenav.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-checkbox/bundles/terminus-ui-sidenav.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Platform switcher](#platform-switcher)\n - [Triggers](#triggers)\n - [Section breaks](#section-breaks)\n - [Panels](#panels)\n - [Panel type](#panel-type)\n - [Panel contents](#panel-contents)\n - [Styles](#styles)\n - [Do not disturb](#do-not-disturb)\n - [User panel](#user-panel)\n - [Defaults](#defaults)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-sidenav\n```\n \n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families and icon fonts by adding this link to the `` of your application:\n\n```css\n\n\n\n\n```\n\n## Usage\n\nThe most minimal usage:\n\n```html\n\n```\n\nThis will create a sidenav with a platform switcher and a user menu, but no other navigation items.\n\n### Platform switcher\n\nThe switcher needs the current platform title and the array of links to display in the panel:\n\n```typescript\ncurrentTitle = 'My Platform';\nswitcherContent: TS_SIDENAV_PLATFORM_SWITCHER_CONTENT = [\n {\n title: 'Account Engagement Hub',\n children: [\n {\n title: 'Data Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-shapes',\n },\n {\n title: 'Measurement Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-chart-pie',\n },\n ],\n },\n ...\n];\n```\n\n```html\n\n```\n\n### Triggers\n\nTo add an individual navigation trigger, wrap a link or button in ``:\n\n```html\n\n \n \n ABM Scorecard\n \n \n\n```\n\n1. Each item should have a tooltip since the navigation item is only an icon.\n2. The link or button should have appropriate text wrapped with the `.sr-only` class so that the text is available for\n screen readers.\n3. The tooltip position should be set to `after`.\n\n### Section breaks\n\nTo create a break between collections of navigation links, insert the `` component:\n\n```html\n\n \n \n ABM Scorecard\n \n \n \n \n\n \n \n Configuration\n \n \n\n\n```\n\n### Panels\n\nBy default, each trigger is a simple trigger that will allow the user to click on the link or button contained within.\nTriggers also can be used to open panels with content.\n\n#### Panel type\n\nThe panel type can be defined by the `panelType` input and supports `popout` and `drawer`:\n\n```html\n...\n...\n```\n\n#### Panel contents\n\nThe panel contents should be passed in to the trigger component wrapped with the directive\n`tsTriggerComponentPanelContent`:\n\n```html\n\n \n \n \n\n
\n\n```\n\n#### Styles\n\nSeveral classes exist to allow the consumer to style panel contents appropriately:\n\n| Class | Purpose |\n|------------------------------|-----------------------------|\n| `.ts-sidenav-panel-title` | The primary panel title |\n| `.ts-sidenav-panel-subtitle` | A smaller subtitle heading |\n| `.ts-sidenav-panel-action` | The actual link or button |\n\nTo create a break within lists, add an `` as the only content within a list item:\n\n```html\n
\n```\n\n> NOTE: `` can also be used outside of lists.\n\n#### Do not disturb\n\nTo support the 'Do Not Disturb' menu, the trigger component accepts a FormGroup of `` form controls that will\ndefine the status dot for the trigger:\n\n```typescript\ntoggleForm: new FormGroup({\n acme: new FormControl(true),\n ajax: new FormControl(false),\n}),\n```\n\n```html\n\n \n \n \n\n
\n
Do Not Disturb
\n
Preferences
\n \n \n
\n\n```\n\nThe notification dot will be colored amber if at least one but not all controls are true. If all controls become true,\nthe dot will be colored red. If all controls are false, the dot will disappear.\n\n### User panel\n\nThe user panel needs an object that defines the current user:\n\n```typescript\nuserObject: TS_SIDENAV_USER = {\n name: 'Eliza Doolittle',\n email: 'eliza.doolittle@terminus.com',\n // This is optional. If not included, the user's first initial will be displayed in place of the image.\n imageUrl: 'https://picsum.photos/id/1025/150/150/',\n};\n```\n\n```html\n\n```\n\n#### Defaults\n\nThe user menu has sensible defaults for routes and URLs, but these can be overridden as needed:\n\n```typescript\n// Define the new options:\nconst newDefaults: TsSidenavDefaultOptions {\n profileRoute: 'http://google.com',\n signOutRoute: 'http://google.com',\n academyUrl: 'http://google.com',\n knowledgeBaseUrl: 'http://google.com',\n};\n\n...\n\n// Then pass it in as a provider:\nproviders: [\n {\n provide: TS_SIDENAV_DEFAULT_OPTIONS,\n useValue: newDefaults,\n },\n],\n```\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-sidenav.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-sidenav\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-sidenav/bundles/terminus-ui-sidenav.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-checkbox/bundles/terminus-ui-sidenav.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Platform switcher](#platform-switcher)\n - [Triggers](#triggers)\n - [Section breaks](#section-breaks)\n - [Panels](#panels)\n - [Panel type](#panel-type)\n - [Panel contents](#panel-contents)\n - [Styles](#styles)\n - [Do not disturb](#do-not-disturb)\n - [User panel](#user-panel)\n - [Defaults](#defaults)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-sidenav\n```\n \n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families and icon fonts by adding this link to the `` of your application:\n\n```css\n\n\n\n\n```\n\n## Usage\n\nThe most minimal usage:\n\n```html\n\n```\n\nThis will create a sidenav with a platform switcher and a user menu, but no other navigation items.\n\n### Platform switcher\n\nThe switcher needs the current platform title and the array of links to display in the panel:\n\n```typescript\ncurrentTitle = 'My Platform';\nswitcherContent: TS_SIDENAV_PLATFORM_SWITCHER_CONTENT = [\n {\n title: 'Account Engagement Hub',\n children: [\n {\n title: 'Data Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-shapes',\n },\n {\n title: 'Measurement Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-chart-pie',\n },\n ],\n },\n ...\n];\n```\n\n```html\n\n```\n\n### Triggers\n\nTo add an individual navigation trigger, wrap a link or button in ``:\n\n```html\n\n \n \n ABM Scorecard\n \n \n\n```\n\n1. Each item should have a tooltip since the navigation item is only an icon.\n2. The link or button should have appropriate text wrapped with the `.sr-only` class so that the text is available for\n screen readers.\n3. The tooltip position should be set to `after`.\n\n### Section breaks\n\nTo create a break between collections of navigation links, insert the `` component:\n\n```html\n\n \n \n ABM Scorecard\n \n \n \n \n\n \n \n Configuration\n \n \n\n\n```\n\n### Panels\n\nBy default, each trigger is a simple trigger that will allow the user to click on the link or button contained within.\nTriggers also can be used to open panels with content.\n\n#### Panel type\n\nThe panel type can be defined by the `panelType` input and supports `popout` and `drawer`:\n\n```html\n...\n...\n```\n\n#### Panel contents\n\nThe panel contents should be passed in to the trigger component wrapped with the directive\n`tsTriggerComponentPanelContent`:\n\n```html\n\n \n \n \n\n
\n\n```\n\n#### Styles\n\nSeveral classes exist to allow the consumer to style panel contents appropriately:\n\n| Class | Purpose |\n|------------------------------|-----------------------------|\n| `.ts-sidenav-panel-title` | The primary panel title |\n| `.ts-sidenav-panel-subtitle` | A smaller subtitle heading |\n| `.ts-sidenav-panel-action` | The actual link or button |\n\nTo create a break within lists, add an `` as the only content within a list item:\n\n```html\n
\n```\n\n> NOTE: `` can also be used outside of lists.\n\n#### Do not disturb\n\nTo support the 'Do Not Disturb' menu, the trigger component accepts a FormGroup of `` form controls that will\ndefine the status dot for the trigger:\n\n```typescript\ntoggleForm: new FormGroup({\n acme: new FormControl(true),\n ajax: new FormControl(false),\n}),\n```\n\n```html\n\n \n \n \n\n
\n
Do Not Disturb
\n
Preferences
\n \n \n
\n\n```\n\nThe notification dot will be colored amber if at least one but not all controls are true. If all controls become true,\nthe dot will be colored red. If all controls are false, the dot will disappear.\n\n### User panel\n\nThe user panel needs an object that defines the current user:\n\n```typescript\nuserObject: TS_SIDENAV_USER = {\n name: 'Eliza Doolittle',\n email: 'eliza.doolittle@terminus.com',\n // This is optional. If not included, the user's first initial will be displayed in place of the image.\n imageUrl: 'https://picsum.photos/id/1025/150/150/',\n};\n```\n\n```html\n\n```\n\n#### Defaults\n\nThe user menu has sensible defaults for routes and URLs, but these can be overridden as needed:\n\n```typescript\n// Define the new options:\nconst newDefaults: TsSidenavDefaultOptions {\n profileRoute: 'http://google.com',\n signOutRoute: 'http://google.com',\n academyUrl: 'http://google.com',\n knowledgeBaseUrl: 'http://google.com',\n};\n\n...\n\n// Then pass it in as a provider:\nproviders: [\n {\n provide: TS_SIDENAV_DEFAULT_OPTIONS,\n useValue: newDefaults,\n },\n],\n```\n\nFor Profile and SignOut, you can alternatively handle the click event directly\nwithin your app by binding to the proper EventEmitter output:\n\n```html\n\n```\n\nEach link will only show if either a Route/URL is passed in or a listener\nis bound to the output emitter.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-sidenav.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-sidenav\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-sidenav/bundles/terminus-ui-sidenav.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-checkbox/bundles/terminus-ui-sidenav.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Platform switcher](#platform-switcher)\n - [Triggers](#triggers)\n - [Section breaks](#section-breaks)\n - [Panels](#panels)\n - [Panel type](#panel-type)\n - [Panel contents](#panel-contents)\n - [Styles](#styles)\n - [Do not disturb](#do-not-disturb)\n - [User panel](#user-panel)\n - [Defaults](#defaults)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-sidenav\n```\n \n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families and icon fonts by adding this link to the `` of your application:\n\n```css\n\n\n\n\n```\n\n## Usage\n\nThe most minimal usage:\n\n```html\n\n```\n\nThis will create a sidenav with a platform switcher and a user menu, but no other navigation items.\n\n### Platform switcher\n\nThe switcher needs the current platform title and the array of links to display in the panel:\n\n```typescript\ncurrentTitle = 'My Platform';\nswitcherContent: TS_SIDENAV_PLATFORM_SWITCHER_CONTENT = [\n {\n title: 'Account Engagement Hub',\n children: [\n {\n title: 'Data Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-shapes',\n },\n {\n title: 'Measurement Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-chart-pie',\n },\n ],\n },\n ...\n];\n```\n\n```html\n\n```\n\n### Triggers\n\nTo add an individual navigation trigger, wrap a link or button in ``:\n\n```html\n\n \n \n ABM Scorecard\n \n \n\n```\n\n1. Each item should have a tooltip since the navigation item is only an icon.\n2. The link or button should have appropriate text wrapped with the `.sr-only` class so that the text is available for\n screen readers.\n3. The tooltip position should be set to `after`.\n\n### Section breaks\n\nTo create a break between collections of navigation links, insert the `` component:\n\n```html\n\n \n \n ABM Scorecard\n \n \n \n \n\n \n \n Configuration\n \n \n\n\n```\n\n### Panels\n\nBy default, each trigger is a simple trigger that will allow the user to click on the link or button contained within.\nTriggers also can be used to open panels with content.\n\n#### Panel type\n\nThe panel type can be defined by the `panelType` input and supports `popout` and `drawer`:\n\n```html\n...\n...\n```\n\n#### Panel contents\n\nThe panel contents should be passed in to the trigger component wrapped with the directive\n`tsTriggerComponentPanelContent`:\n\n```html\n\n \n \n \n\n
\n\n```\n\n#### Styles\n\nSeveral classes exist to allow the consumer to style panel contents appropriately:\n\n| Class | Purpose |\n|------------------------------|-----------------------------|\n| `.ts-sidenav-panel-title` | The primary panel title |\n| `.ts-sidenav-panel-subtitle` | A smaller subtitle heading |\n| `.ts-sidenav-panel-action` | The actual link or button |\n\nTo create a break within lists, add an `` as the only content within a list item:\n\n```html\n
\n```\n\n> NOTE: `` can also be used outside of lists.\n\n#### Do not disturb\n\nTo support the 'Do Not Disturb' menu, the trigger component accepts a FormGroup of `` form controls that will\ndefine the status dot for the trigger:\n\n```typescript\ntoggleForm: new FormGroup({\n acme: new FormControl(true),\n ajax: new FormControl(false),\n}),\n```\n\n```html\n\n \n \n \n\n
\n
Do Not Disturb
\n
Preferences
\n \n \n
\n\n```\n\nThe notification dot will be colored amber if at least one but not all controls are true. If all controls become true,\nthe dot will be colored red. If all controls are false, the dot will disappear.\n\n### User panel\n\nThe user panel needs an object that defines the current user:\n\n```typescript\nuserObject: TS_SIDENAV_USER = {\n name: 'Eliza Doolittle',\n email: 'eliza.doolittle@terminus.com',\n // This is optional. If not included, the user's first initial will be displayed in place of the image.\n imageUrl: 'https://picsum.photos/id/1025/150/150/',\n};\n```\n\n```html\n\n```\n\n#### Defaults\n\nThe user menu has sensible defaults for routes and URLs, but these can be overridden as needed:\n\n```typescript\n// Define the new options:\nconst newDefaults: TsSidenavDefaultOptions {\n profileRoute: 'http://google.com',\n signOutRoute: 'http://google.com',\n academyUrl: 'http://google.com',\n knowledgeBaseUrl: 'http://google.com',\n};\n\n...\n\n// Then pass it in as a provider:\nproviders: [\n {\n provide: TS_SIDENAV_DEFAULT_OPTIONS,\n useValue: newDefaults,\n },\n],\n```\n\nFor Profile, you can alternatively pass in ProfileUrl which will be interpreted\nas an absolute URL rather than an internal application route.\n\nFor Profile and SignOut, you can alternatively handle the click event directly\nwithin your app by binding to the proper EventEmitter output:\n\n```html\n\n```\n\nEach link will only show if either a Route/URL is passed in or a listener\nis bound to the output emitter.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-sidenav.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-sidenav\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-sidenav/bundles/terminus-ui-sidenav.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-checkbox/bundles/terminus-ui-sidenav.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Platform switcher](#platform-switcher)\n - [Triggers](#triggers)\n - [Section breaks](#section-breaks)\n - [Panels](#panels)\n - [Panel type](#panel-type)\n - [Panel contents](#panel-contents)\n - [Styles](#styles)\n - [Do not disturb](#do-not-disturb)\n - [User panel](#user-panel)\n - [Defaults](#defaults)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-sidenav\n```\n \n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families and icon fonts by adding this link to the `` of your application:\n\n```css\n\n\n\n\n```\n\n## Usage\n\nThe most minimal usage:\n\n```html\n\n```\n\nThis will create a sidenav with a platform switcher and a user menu, but no other navigation items.\n\n### Platform switcher\n\nThe switcher needs the current platform title and the array of links to display in the panel:\n\n```typescript\ncurrentTitle = 'My Platform';\nswitcherContent: TS_SIDENAV_PLATFORM_SWITCHER_CONTENT = [\n {\n title: 'Account Engagement Hub',\n children: [\n {\n title: 'Data Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-shapes',\n },\n {\n title: 'Measurement Studio',\n url: 'https://google.com',\n iconClasses: 'fas fa-chart-pie',\n },\n ],\n },\n ...\n];\n```\n\n```html\n\n```\n\n### Triggers\n\nTo add an individual navigation trigger, wrap a link or button in ``:\n\n```html\n\n \n \n ABM Scorecard\n \n \n\n```\n\n1. Each item should have a tooltip since the navigation item is only an icon.\n2. The link or button should have appropriate text wrapped with the `.sr-only` class so that the text is available for\n screen readers.\n3. The tooltip position should be set to `after`.\n\n### Section breaks\n\nTo create a break between collections of navigation links, insert the `` component:\n\n```html\n\n \n \n ABM Scorecard\n \n \n \n \n\n \n \n Configuration\n \n \n\n\n```\n\n### Panels\n\nBy default, each trigger is a simple trigger that will allow the user to click on the link or button contained within.\nTriggers also can be used to open panels with content.\n\n#### Panel type\n\nThe panel type can be defined by the `panelType` input and supports `popout` and `drawer`:\n\n```html\n...\n...\n```\n\n#### Panel contents\n\nThe panel contents should be passed in to the trigger component wrapped with the directive\n`tsTriggerComponentPanelContent`:\n\n```html\n\n \n \n \n\n
\n\n```\n\n#### Styles\n\nSeveral classes exist to allow the consumer to style panel contents appropriately:\n\n| Class | Purpose |\n|------------------------------|-----------------------------|\n| `.ts-sidenav-panel-title` | The primary panel title |\n| `.ts-sidenav-panel-subtitle` | A smaller subtitle heading |\n| `.ts-sidenav-panel-action` | The actual link or button |\n\nTo create a break within lists, add an `` as the only content within a list item:\n\n```html\n
\n```\n\n> NOTE: `` can also be used outside of lists.\n\n#### Do not disturb\n\nTo support the 'Do Not Disturb' menu, the trigger component accepts a FormGroup of `` form controls that will\ndefine the status dot for the trigger:\n\n```typescript\ntoggleForm: new FormGroup({\n acme: new FormControl(true),\n ajax: new FormControl(false),\n}),\n```\n\n```html\n\n \n \n \n\n
\n
Do Not Disturb
\n
Preferences
\n \n \n
\n\n```\n\nThe notification dot will be colored amber if at least one but not all controls are true. If all controls become true,\nthe dot will be colored red. If all controls are false, the dot will disappear.\n\n### User panel\n\nThe user panel needs an object that defines the current user:\n\n```typescript\nuserObject: TS_SIDENAV_USER = {\n name: 'Eliza Doolittle',\n email: 'eliza.doolittle@terminus.com',\n // This is optional. If not included, the user's first initial will be displayed in place of the image.\n imageUrl: 'https://picsum.photos/id/1025/150/150/',\n};\n```\n\n```html\n\n```\n\n#### Defaults\n\nThe user menu has sensible defaults for routes and URLs, but these can be overridden as needed:\n\n```typescript\n// Define the new options:\nconst newDefaults: TsSidenavDefaultOptions {\n profileRoute: 'http://google.com',\n signOutRoute: 'http://google.com',\n academyUrl: 'http://google.com',\n knowledgeBaseUrl: 'http://google.com',\n};\n\n...\n\n// Then pass it in as a provider:\nproviders: [\n {\n provide: TS_SIDENAV_DEFAULT_OPTIONS,\n useValue: newDefaults,\n },\n],\n```\n\nFor Profile, you can alternatively pass in ProfileUrl which will be interpreted\nas an absolute URL rather than an internal application route.\n\nFor Profile and SignOut, you can alternatively handle the click event directly\nwithin your app by binding to the proper EventEmitter output:\n\n```html\n\n```\n\nEach link will only show if either a Route/URL is passed in or a listener\nis bound to the output emitter.\n\n\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-sidenav.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-sidenav\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-sidenav/bundles/terminus-ui-sidenav.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-checkbox/bundles/terminus-ui-sidenav.umd.js\n","readmeFilename":"README.md","description":"