<div class="dropdown ms-1">
    <button class="btn btn-link p-0 position-relative" type="button" id="profileDropdown"
      data-bs-toggle="dropdown" aria-expanded="false">
      <picture>
        <img class="f-w-10 rounded-circle" src="{{webRoot}}/assets/images/profile-small.jpeg"
          alt="{{ config.defaultImgAlt }}">
      </picture>
      <span
        class="position-absolute bottom-0 start-75 p-1 bg-success border border-3 border-white rounded-circle">
        <span class="visually-hidden">New alerts</span>
      </span>
    </button>
    <ul class="dropdown-menu dropdown-md dropdown-menu-end" aria-labelledby="profileDropdown">
      <li><a class="dropdown-item d-flex align-items-center" href="#">Set Visibility</a></li>
      <li><a class="dropdown-item d-flex align-items-center" href="#">Edit Profile</a></li>
      <li><a class="dropdown-item d-flex align-items-center" href="#">Edit Settings</a></li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li class="d-flex py-2 align-items-start">
        <button class="btn-icon bg-primary-faded text-primary fw-bolder me-3">J</button>
        <div class="d-flex align-items-start justify-content-between flex-grow-1">
          <div>
            <p class="lh-1 mb-2 fw-semibold text-body">John Daniels</p>
            <p class="text-muted lh-1 mb-2 small">john@email.com</p>
          </div>
          <small class="badge bg-success-faded text-success rounded-pill">Pro</small>
        </div>
      </li>     
      <li>
        <hr class="dropdown-divider">
      </li>
      <li><a class="dropdown-item d-flex align-items-center" href="#">Account Settings</a></li>
      <li><a class="dropdown-item d-flex align-items-center" href="#">Logout</a></li>
    </ul>
  </div>