<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNotifications"
  aria-labelledby="offcanvasNotificationsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasNotificationsLabel">Notifications</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">

    <!-- Notification-->
    <div class="d-flex justify-content-start align-items-start p-3 rounded bg-light mb-3">
      <div class="position-relative mt-1 ">
        <picture class="avatar avatar-sm">
          <img src="{{webRoot}}/assets/images/profile-small-2.jpeg"
            alt="{{ config.defaultImgAlt }}">
        </picture>
        <span
        class="dot bg-success avatar-dot border-light dot-sm"></span>
      </div>
      <div class="ms-4">
        <p class="fw-bolder mb-1">John Jackson</p>
        <p class="text-muted small mb-0">Just sent over regional sales. If you can let me know by the end...</p>
        <span class="fs-xs fw-bolder text-muted text-uppercase">5 mins ago</span>
      </div>
    </div>
    <!-- / Notification-->

    <!-- Notification-->
    <div class="d-flex justify-content-start align-items-start p-3 rounded bg-light mb-3">
      <div class="position-relative mt-1 ">
        <picture class="avatar avatar-sm">
          <img src="{{webRoot}}/assets/images/profile-small-3.jpeg"
            alt="{{ config.defaultImgAlt }}">
        </picture>
        <span
        class="dot bg-success avatar-dot border-light dot-sm"></span>
      </div>
      <div class="ms-4">
        <p class="fw-bolder mb-1">Peter Smith</p>
        <p class="text-muted small mb-0">Hi Rob, can we setup a meeting for tomorrow around 2pm...</p>
        <span class="fs-xs fw-bolder text-muted text-uppercase">30 mins ago</span>
      </div>
    </div>
    <!-- / Notification-->

    <!-- Notification-->
    <div class="d-flex justify-content-start align-items-start p-3 rounded bg-light mb-3">
      <div class="position-relative mt-1 ">
        <picture class="avatar avatar-sm">
          <img src="{{webRoot}}/assets/images/profile-small-4.jpeg"
            alt="{{ config.defaultImgAlt }}">
        </picture>
        <span
        class="dot bg-danger avatar-dot border-light dot-sm"></span>
      </div>
      <div class="ms-4">
        <p class="fw-bolder mb-1">Helen Lewis</p>
        <p class="text-muted small mb-0">Need to arrange for this year's Office lisences. Have to add two team licenses...</p>
        <span class="fs-xs fw-bolder text-muted text-uppercase">43 mins ago</span>
      </div>
    </div>
    <!-- / Notification-->

    <!-- View all Btn-->
    <a href="#" class="btn btn-outline-secondary w-100 mt-4" role="button">View all notifications</a>
    <!-- / View all btn-->

  </div>
</div>