# Dynamic Sign-In Menu - Sample Implementation

## Sample Code for Reference

This demo shows how you could implement a dynamic, API-driven sign-in menu in your project. Click the "Sign in" button above to see the example in action. The menu items are populated from JavaScript, not hard-coded HTML.

## Note

This is a reference implementation provided as an example. It is not part of the core Ontario Design System package. Teams should adapt these patterns to fit their specific requirements.

## 1. Adapting for Your Project

How to use this sample: This is a reference pattern, not a plug-and-play component. Use it to guide how your project fetches, renders, and manages a dynamic sign-in menu.

### Quick Start

This is a sample implementation you can adapt for your project. The code demonstrates patterns for:

- Fetching menu data from an API
- Dynamically generating accessible menu markup
- Handling errors gracefully

Demo note: This demo currently calls a sample API configuration to show how the flow works end-to-end.

Quick Start code:

    OntarioSignInMenu.initialize({
        useApi: true,
    });

### Running the demo locally

Opening the HTML file directly will break asset paths (fonts, logos, scripts). Run a local dev server instead.

    pnpm run dev

Then open:

    http://localhost:3000/demos/sign-in-menu-dynamic/index.html

### Next steps

1. Review the sample code at `ontario-sign-in-menu-dynamic.js`.
2. Adapt the patterns to fit your project requirements.

### API response format

The actual API returns a simple structure with basic fields:

Note: This demo does not include default sign-in items. If the API returns no items, nothing will appear unless you provide your own data.

    {
      "items": [
        {
          "id": "service-ontario-account",
          "label": "ServiceOntario account",
          "description": "Health cards, driver's licences, licence plates",
          "url": "https://www.ontario.ca/page/serviceontario-account"
        },
        {
          "id": "ontario-business-account",
          "label": "ONBusiness",
          "description": "Business Registry, Licenses and Permits, Business Information",
          "url": "https://www.app.ics.gov.on.ca/onbis/"
        }
      ]
    }

Reference Documentation: View Implementation Guide

Sample Code: Review `ontario-sign-in-menu-dynamic.js` to see the implementation patterns.