<nav class="top-nav pos-fixed full-width top-0">
  <ul class="top-nav__menu flex flex--verticalCenter">
    <li class="flex__item top-nav__logo">
      {{#link-to "index" class="inline-block"}}
        {{svg-icon path="svg/logo-twitch"}}
      {{/link-to}}
    </li>
    <li class="top-nav__nav-items-container">
      <ul class="flex top-nav__nav-items-list" role="tablist">
        {{#if session.isAuthenticated}}
          <li class="flex__item" role="presentation">
            {{#link-to "directory.following" class="top-nav__nav-link block" role="tab"}}
              {{t "frontPage.headerBar.following"}}
            {{/link-to}}
          </li>
        {{/if}}

        <li class="flex__item" role="presentation">
          {{#link-to "directory.games" class="top-nav__nav-link block" role="tab"}}
            {{t "frontPage.headerBar.browse"}}
          {{/link-to}}
        </li>

        {{top-nav/upsell tagName="li" class="flex__item" ariaRole="presentation"}}

        {{#common/balloon-menu tagName="li" class="top-nav__overflow flex__item" as |menu|}}
          {{#menu.button iconOnly=true isDropMenu=false}}
            {{svg-icon path="svg/nav-more"}}
          {{/menu.button}}
          {{#menu.balloon direction="down" isDropMenu=false class="mg-l-2"}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "/p/about")}}
              {{t "frontPage.footer.links.about"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "http://twitchadvertising.tv/")}}
              {{t "frontPage.footer.links.advertisers"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "https://blog.twitch.tv")}}
              {{t "frontPage.footer.links.blog"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(route-action "handleCreativeFilterClick")}}
              {{t "frontPage.footer.links.creative"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "/p/cookie-policy")}}
              {{t "frontPage.footer.links.cookiePolicy"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "https://dev.twitch.tv")}}
              {{t "frontPage.footer.links.developers"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "http://help.twitch.tv")}}
              {{t "frontPage.footer.links.help"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "/jobs")}}
              {{t "frontPage.footer.links.jobs"}}
            {{/menu.balloonItem}}
            <li>
              {{language-select balloonClass="balloon--right mg-l-2" linkClass="balloon__link"}}
            </li>
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "http://music.twitch.tv")}}
              {{t "frontPage.footer.links.music"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "/p/partners")}}
              {{t "frontPage.footer.links.partners"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "/p/press")}}
              {{t "frontPage.footer.links.press"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "/store")}}
              {{t "frontPage.footer.links.store"}}
            {{/menu.balloonItem}}
            {{#menu.balloonItem onClick=(action "onBalloonItemClick" "/p/terms-of-service")}}
              {{t "frontPage.footer.links.terms"}}
            {{/menu.balloonItem}}
          {{/menu.balloon}}
        {{/common/balloon-menu}}

        <li class="top-nav__search flex__item flex__item--grow">
          <div class="form__input-group form__input-group--icon-left">
            {{navigation-search
              isInHeader=true
              isActivated=layout.userDidActivateSearch
              onActivate=(action (mut layout.userDidActivateSearch) true)
              onDeactivate=(action (mut layout.userDidActivateSearch) false)
              classNames="flex__item--grow"}}
          </div>
        </li>

        {{#if session.isAuthenticated}}
          <li class="top-nav__notification-anchor pd-r-3 flex__item">
            {{#if layout.isOnsiteNotificationsEnabled}}
              <div class="notification-center__icon-container notification-center__icon-container--top">
                {{twitch-onsite-notifications/manager
                  isTop=true
                }}
              </div>
            {{/if}}
          </li>
          {{top-nav/user-menu tagName="li" class="flex__item"}}
        {{else}}
          <li class="top-nav__login-links flex__item">
            <a {{action (route-action "handleLoginButtonClick")}} class="button" href="/login">{{t "general.account.logIn"}}</a>

            <a {{action (route-action "handleSignupButtonClick")}} class="button" href="/login">{{t "general.account.signUp"}}</a>
          </li>
        {{/if}}
      </ul>
    </li>
  </ul>
</nav>
