hummingbird-me/kitsu-web

<nav id="kitsu-navbar" class="navbar navbar-fixed-top navbar-light primary-nav" role="navigation">
  <div class="container">
    <div class="row">
      <button class="navbar-toggler pull-xs-left" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
        &#9776;
      </button>
      <div class="nav-item pull-xs-left">
        <a href={{href-to "dashboard"}} class="navbar-brand nav-link" {{action "transitionToDashboard"}}>
          <span class="logo">
            {{svg-jar "kitsu-full"}}
          </span>
        </a>
      </div>

      <ul class="nav navbar-nav pull-xs-right navbar-buttons">
        {{! Search }}
        <li class="nav-item">
          {{application/nav-search class="site-search"}}
        </li>

        {{#if session.hasUser}}
          {{! Notifications }}
          {{application/user-notifications tagName="li" class="nav-item"}}

          {{! User Menu }}
          <li class="nav-item">
            <a href="#" class="nav-link avatar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img src={{image session.account.avatar "small"}} class="avatar-image avatar-image--small">
            </a>
            <div class="dropdown-menu user-menu-drop">
              <a href={{href-to "users.index" session.account}} class="dropdown-item">
                {{t "header.user.profile"}}
              </a>
              <a href={{href-to "settings"}} class="dropdown-item">
                {{t "header.user.settings"}}
              </a>
              {{#if (can "view admin")}}
                <a href={{href-to "admin.index"}} class="dropdown-item">
                  {{t "header.user.admin"}}
                </a>
              {{/if}}
              <a href="#" {{action "invalidateSession"}} class="dropdown-item">
                {{t "header.user.logout"}}
              </a>
            </div>
          </li>
        {{else}}
          <li class="nav-item">
            <a href="#" id="sign-up-button" class="nav-link" data-test-sign-up-header
              {{action (queue
                (action (mut authComponent) "social-auth")
                (toggle "authOpened" this)
              )}}>
              {{t "header.auth.sign-up"}}
            </a>
          </li>
          <li class="nav-item">
            <a href="#" id="sign-in-button" class="nav-link" data-test-sign-in-header
              {{action (queue
                (action (mut authComponent) "sign-in")
                (toggle "authOpened" this)
              )}}>
              {{t "header.auth.sign-in"}}
            </a>
          </li>
        {{/if}}
      </ul>
      <div class="collapse navbar-toggleable-xs pull-sm-left primary-nav--drop" id="exCollapsingNavbar2">
        <ul class="nav navbar-nav">
          {{! Library }}
          {{#if session.hasUser}}
            <li class="nav-item">
              {{link-to (t "header.library") "users.library" session.account class="nav-link"}}
            </li>
          {{/if}}
          {{! Browse }}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle {{if isBrowseRoute "active"}}" href="#" data-toggle="dropdown" data-href-to-ignore=true>
              {{t "header.browse"}}
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href={{href-to "explore.index" "anime"}}>{{t "header.anime"}}</a>
              <a class="dropdown-item" href={{href-to "explore.index" "manga"}}>{{t "header.manga"}}</a>
            </div>
          </li>
          {{! Groups }}
          <li class="nav-item">
            {{link-to (t "header.groups") "groups.index" class="nav-link"}}
          </li>
          {{! Feedback}}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle {{if isFeedbackRoute "active"}}" href="#" data-toggle="dropdown" data-href-to-ignore=true>
              {{t "header.feedback"}}
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href={{href-to "feedback.bugs"}}>{{t "feedback.bugs"}}</a>
              <a class="dropdown-item" href={{href-to "feedback.feature-requests"}}>{{t "feedback.features"}}</a>
              <a class="dropdown-item" href="https://kitsu-stuff.com" target="_blank" rel="noopener">{{t "feedback.database"}}</a>
              <a class="dropdown-item" href={{href-to "feedback.mobile-bugs"}}>{{t "feedback.mobile-bugs"}}</a>
              <a class="dropdown-item" href={{href-to "feedback.mobile-features"}}>{{t "feedback.mobile-features"}}</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

{{! Authentication Modal }}
{{#if authOpened}}
  {{to-elsewhere named="modal" send=(component "application/auth-onboarding"
    modalId="auth-modal"
    component=authComponent
    onClose=(toggle-action "authOpened" this))}}
{{/if}}