Side Nav Component

This document provides instructions on how to publish and use the Side Nav component.

Publishing

1. Create a PR
2. Pipeline will update the version and commit on the trunk and then push
3. Pipeline will publish to unpkg
4. After the pipeline gets completed trunk will have the latest version so make sure to get a pull

Running

1. pnpm build - build the project
2. pnpm preview - opens the project in a browser
3. to view side nav in system a. pnpm preview will create a js file b. redirect local config cat side nav url eg: config cat https://unpkg.com/@campminder/side-nav -> http://localhost:5173/dist/nav.js

Note: The publishToNpm command pushes the package to the npm registry. The exact timing of when unpkg grabs from the npm registry is not known.

Usage

To use the Side Nav component in your project, you need to include the following scripts in your HTML file:

<script
  type="module"
  crossorigin
  src="https://unpkg.com/@campminder/side-nav"></script>
<script
  crossorigin
  src="https://unpkg.com/@campminder/side-nav/dist/SideNav.handler.js"></script>

Then, you can use the side-nav custom HTML element in your HTML document. This element will be replaced by the Side Nav component:

<side-nav></side-nav>

Explanation

The scripts import JavaScript files from a Content Delivery Network (CDN) into a webpage. The type="module" attribute specifies that the script should be treated as an ECMAScript module. The crossorigin attribute is used to allow the script to be fetched from a third-party site with the appropriate CORS headers.

The side-nav custom HTML element is defined in one of the imported JavaScript files. When used in an HTML document, it will be replaced by the content or functionality defined for the side-nav custom element in the JavaScript code.

Links

Links live in src/data . Please refer to the README contained at that level.

Testing

Tests live in src/test.

Run the test with the following:

pnpm run test