Top Bar

<ahi-top-bar class="top-bar">
  <p class="ahi-text-heading ahi-text-medium">Application Title</p>

  <ahi-tooltip slot="end" content="Notifications">
    <ahi-icon-button name="bell" label="Notifications">
      <ahi-badge status="info">99+</ahi-badge>
    </ahi-icon-button>
  </ahi-tooltip>

  <ahi-tooltip slot="end" content="Applications">
    <ahi-icon-button name="grid-dots" label="Applications"></ahi-icon-button>
  </ahi-tooltip>

  <ahi-user-menu slot="end" build="2023 Azalea Health - v4.0 Build # 28286">
    <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>
</ahi-top-bar>

<script type="module">
  const topBar = document.querySelector('.top-bar');
  const userMenu = topBar.querySelector('ahi-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>