hummingbird-me/kitsu-web

<a href="#" class="nav-link notifications {{if (gt count 0) "notifications--present"}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  {{#if getNotifications.isRunning}}
    <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M37,16 L33,16 C33,17.1 33.9,18 35,18 C36.1,18 37,17.1 37,16 Z M41.125,13.3076923 L40.6875,13.3076923 C40.075,12.7153846 39.375,11.8692308 39.375,10.7692308 L39.375,8.23076923 C39.375,5.86153846 37.45,4 35,4 C32.55,4 30.625,5.86153846 30.625,8.23076923 L30.625,10.7692308 C30.625,11.8692308 29.925,12.7153846 29.3125,13.3076923 L28.875,13.3076923 C28.35,13.3076923 28,13.6461538 28,14.1538462 C28,14.6615385 28.35,15 28.875,15 L41.125,15 C41.65,15 42,14.6615385 42,14.1538462 C42,13.6461538 41.65,13.3076923 41.125,13.3076923 Z" transform="translate(-28 -4)" fill="#999" fill-rule="evenodd"></path></svg>
  {{else}}
    {{#if (gt count 0)}}
      <span>{{count}}</span>
    {{else}}
      <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M37,16 L33,16 C33,17.1 33.9,18 35,18 C36.1,18 37,17.1 37,16 Z M41.125,13.3076923 L40.6875,13.3076923 C40.075,12.7153846 39.375,11.8692308 39.375,10.7692308 L39.375,8.23076923 C39.375,5.86153846 37.45,4 35,4 C32.55,4 30.625,5.86153846 30.625,8.23076923 L30.625,10.7692308 C30.625,11.8692308 29.925,12.7153846 29.3125,13.3076923 L28.875,13.3076923 C28.35,13.3076923 28,13.6461538 28,14.1538462 C28,14.6615385 28.35,15 28.875,15 L41.125,15 C41.65,15 42,14.6615385 42,14.1538462 C42,13.6461538 41.65,13.3076923 41.125,13.3076923 Z" transform="translate(-28 -4)" fill="#999" fill-rule="evenodd"></path></svg>
    {{/if}}
  {{/if}}
</a>

<div class="dropdown-menu notification-drop">
  <header>
    <a href={{href-to "notifications"}} class="see-all-notifications">{{t "user-notifications.menu.all"}}</a>
    {{#if hasUnread}}
      <a href="#" class="mark-as-read" {{action "markRead"}}>{{t "user-notifications.menu.mark-read"}}</a>
    {{/if}}
  </header>
  {{#if getNotifications.isRunning}}
    <p class="notifications-empty">
      {{loading-spinner size="small"}}
    </p>
  {{else}}
    {{#if (eq notifications.length 0)}}
      <p class="notifications-empty">
        {{t "user-notifications.menu.none"}}
      </p>
    {{else}}
      <ul class="notification-list">
        {{#infinite-pagination rootMargin=(hash bottom=100) onPagination=(action "onPagination")}}
          {{#each notifications as |group|}}
            {{application/user-notifications/item
              tagName="li"
              class="notification-item"
              group=group}}
          {{/each}}
        {{/infinite-pagination}}
      </ul>
    {{/if}}
  {{/if}}
</div>