\

This webcomponent follows the open-wc recommendation.

Installation

``bash
npm i tt-navbar
`

Usage

`html



`

$3

| Property | Type | Description |
| ---------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| client-key | string | The client key identifier |
| platform-url | string | Base URL for the platform |
| campaign-manager-url | string | Campaign manager URL |
| active-route | string | The currently active route |
| clients | Array<{clientKey: string, displayName: string}> | Array of client objects for multi-client selector |
| navigate | Function | Custom navigation handler function |
| onClientChange | Function | Callback function that receives the selected client key as a string when the client selection changes |

$3

When multiple clients are provided, the navbar will display a combobox selector:

`javascript
const navbar = document.querySelector('tt-navbar');

// Pass clients as a property
navbar.clients = [
{ clientKey: 'client1', displayName: 'Client One' },
{ clientKey: 'client2', displayName: 'Client Two' },
];

// Handle client change - typically you would redirect the user to the new client
navbar.onClientChange = (selectedClientKey) => {
// Update the URL to reflect the new client
window.location.href = /home/${selectedClientKey};

// Or use your router's navigation method
// router.navigate(/home/${selectedClientKey});
};
`

Note: When a user changes the selected client, you typically want to redirect them to the same page/route but for the new client context.

Alternatively, you can pass clients as a JSON string attribute:

`html
client-key="client1"
clients='[{"clientKey":"client1","displayName":"Client One"},{"clientKey":"client2","displayName":"Client Two"}]'
>
`

Linting and formatting

To scan the project for linting and formatting errors, run

`bash
npm run lint
`

To automatically fix linting and formatting errors, run

`bash
npm run format
`

Testing with Web Test Runner

To execute a single test run:

`bash
npm run test
`

To run the tests in interactive watch mode run:

`bash
npm run test:watch
`

Demoing with Storybook

To run a local instance of Storybook for your component, run

`bash
npm run storybook
`

To build a production version of Storybook, run

`bash
npm run storybook:build
`

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

`bash
npm start
`

To run a local development server that serves the basic demo located in demo/index.html`