Side Nav Component

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

Publishing

1. Make sure you are logged in to npm by running the command npm login in your terminal. This will prompt you to enter your npm username and password.

2. Once you are logged in, you can use the package manager pnpm to push your code. Run the command pnpm push in your terminal. This will publish your package to the npm registry.

Note: The push 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