User Menu

<div style="background: var(--ahi-color-accent-secondary); padding: var(--ahi-space-2) var(--ahi-space-4); border-radius: var(--ahi-border-radius-medium); display: flex; justify-content: flex-end;">
<ahi-user-menu
  slot="secondary-nav"
  build="2023 Azalea Health - v4.0 Build # 28286"
  class="user-menu"
>
  <ahi-menu-item value="my-account">
    <ahi-icon slot="prefix" name="user"></ahi-icon>
    My account
  </ahi-menu-item>
  <ahi-menu-item value="settings">
    <ahi-icon slot="prefix" name="settings"></ahi-icon>
    Settings
  </ahi-menu-item>
  <ahi-menu-item value="help">
    <ahi-icon slot="prefix" name="help"></ahi-icon>
    Help & support
  </ahi-menu-item>
  <ahi-menu-label>Debug & Testing Tools</ahi-menu-label>
  <ahi-menu-item value="emr">
    <ahi-icon slot="prefix" name="first-aid-kit"></ahi-icon>
    EMR build
  </ahi-menu-item>
  <ahi-menu-item value="pm">
    <ahi-icon slot="prefix" name="report-money"></ahi-icon>
    PM build
  </ahi-menu-item>
  <ahi-menu-item value="session-browser">
    <ahi-icon slot="prefix" name="browser"></ahi-icon>
    Session browser
  </ahi-menu-item>
</ahi-user-menu>
</div>

<script type="module">
  const userMenu = document.querySelector(".user-menu");

  userMenu.user = {
    /** The name displayed for the user. This is usually the combination of the user's first name, middle initial and last name. */
    name: "John Doe",

    /** The user's email address */
    email: "john.doe@azaleahealth.com",

    /** The user's first and last initial */
    initials: "JD",

    /** The user's job title */
    title: "Software Developer",

    /** URL source to the user's profile image/avatar */
    // image: "..."
  };

  userMenu.tenant = {
    /** The tenant/client's name i.e. "TESTING CLIENT EHR" */
    name: "TESTING CLIENT EHR",

    /** The tenant/client's IANA time zone ID i.e. "America/New_York", "America/Chicago" etc. */
    timeZone: "America/Chicago",
  };

  userMenu.addEventListener("ahi-select", (event) => {
    const value = event.detail.item.value;

    switch (value) {
      case "my-account":
        console.log("Navigate to My account...");
        // location.href = '...';
        break;
      // ...
      case "sign-out":
        console.log("Sign out...");
        // location.href = '...';
        break;
    }
  });

  const tick = () => {
    userMenu.timestamp = new Date().toISOString();
  };

  const interval = setInterval(tick, 1000);
</script>