<nav role="navigation" class="warp" id="js-warp">

  {{! Main Scrollable Nav }}
  <section class="warp__scroll {{if layout.isOnsiteNotificationsEnabled 'warp__scroll--beta'}} scroll">
    <div class="tse-scroll-content">
      <div class="tse-content">

        <dl class="warp__list">

          {{! Logo Twitch }}
          <dt class="warp__item mg-t-1 mg-b-1 is-drawer-closed--hide">
            {{#link-to 'index' data-href="/" class="warp__logo"}}
              {{partial 'svg/logo-twitch'}}
            {{/link-to}}
          </dt>

          {{! Logo Glitch }}
          <span class="is-drawer-closed--show">
            <dt class="warp__item">
              {{#link-to 'index' data-href="/" class="warp__glitch"}}
                {{partial 'svg/logo-glitch'}}
              {{/link-to}}
            </dt>

            <dd class="warp__item"><span class="sep sep--tiny"></span></dd>
          </span>

          {{! Search }}

          <dd class="warp__item" id="small_search">
            <button type="button"
              onclick={{action (mut layout.userDidActivateSearch) true}}
              title={{i18n 'Search'}}
              class="is-drawer-closed--show">
              <figure class="warp__avatar">{{partial 'svg/nav-search'}}</figure>
            </button>

            <span class="is-drawer-closed--hide mg-b-1">
              {{navigation-search
                isActivated=layout.userDidActivateSearch
                onActivate=(action (mut layout.userDidActivateSearch) true)
                onDeactivate=(action (mut layout.userDidActivateSearch) false)
                classNames='flex__item--grow'}}
            </span>
          </dd>

          {{! Main Links }}

          {{#if session.isAuthenticated}}
            {{#if isBrowseExperimentEnabled}}
              {{browse-experiment/following/nav-item}}
            {{else}}
              <dd class="warp__item {{if navigation.isFollowingSelected 'warp__item--toggled'}}">
                <a title={{i18n 'Browse Following'}} {{action (route-action "handleFollowingFilterClick")}} data-href="following" href="/directory/following" data-tt_medium="twitch_leftnav" data-tt_content="directory_following">
                  <figure class="warp__avatar">{{partial 'svg/nav-following'}}</figure>
                  <span class="is-drawer-closed--hide">{{i18n 'Following'}}</span>
                </a>
              </dd>
            {{/if}}
          {{/if}}

          {{#if isBrowseExperimentEnabled}}
            {{browse-experiment/browse/nav-item}}
          {{else}}
            <dd class="warp__item {{if navigation.isGamesSelected 'warp__item--toggled'}}">
              <a title={{i18n 'Browse Games'}} {{action (route-action "handleGamesFilterClick")}} data-href="." href="/directory" data-tt_medium="twitch_leftnav" data-tt_content="directory_games">
                <figure class="warp__avatar">{{partial 'svg/nav-games'}}</figure>
                <span class="is-drawer-closed--hide">{{i18n 'Games'}}</span>
              </a>
            </dd>

            <dd class="warp__item {{if navigation.isCommunitiesSelected 'warp__item--toggled'}}">
              <a title={{i18n 'Browse Communities'}} {{action (route-action "handleCommunitiesFilterClick")}} data-href="." href="/directory/communities" data-tt_medium="twitch_leftnav" data-tt_content="directory_communities">
                <figure class="warp__avatar">{{partial 'svg/communities'}}</figure>
                <span class="is-drawer-closed--hide">{{i18n "Communities"}}</span>
              </a>
            </dd>

            {{#if (and session.isAuthenticated similarChannels.showDiscoveryTab recsHoldout.shouldShowRecs)}}
              <dd class="warp__item {{if navigation.isDiscoverySelected 'warp__item--toggled'}}">
                {{#link-to 'directory.discover' title=(i18n 'Browse Suggestions') data-href="discover" data-tt_content="directory_discover" data-tt_medium="twitch_leftnav"}}
                  <figure class="warp__avatar" id={{concat elementId "-discovery-icon"}}>{{partial 'svg/nav-discover'}}</figure>
                  <span class="is-drawer-closed--hide" id={{concat elementId "-discovery-browse"}}>{{i18n 'Discover'}} &nbsp;</span>
                {{/link-to}}
              </dd>
            {{/if}}

            <dd class="warp__item {{if navigation.isChannelsSelected 'warp__item--toggled'}}">
              <a title={{i18n 'Browse Channels'}} {{action (route-action "handleChannelsFilterClick")}} data-href="all" href="/directory/all" data-tt_medium="twitch_leftnav" data-tt_content="directory_channels">
                <figure class="warp__avatar">{{partial 'svg/nav-channels'}}</figure>
                <span class="is-drawer-closed--hide">{{i18n 'Channels'}}</span>
              </a>
            </dd>

            <dd class="warp__item {{if navigation.isVideosSelected 'warp__item--toggled'}}">
              <a title={{i18n 'Browse Videos'}} {{action (route-action "handleVideosFilterClick")}} data-href="all" href="/directory/videos/week" data-tt_medium="twitch_leftnav" data-tt_content="directory_videos">
                <figure class="warp__avatar">{{partial 'svg/nav-videos'}}</figure>
                <span class="is-drawer-closed--hide">{{t 'general.Twitch.videos'}}</span>
              </a>
            </dd>

            {{#if isCreativeLinkEnabled}}
              <dd class="warp__item {{if navigation.isCreativeSelected 'warp__item--toggled'}}">
                <a title={{i18n 'Browse Creative'}} {{action (route-action "handleCreativeFilterClick")}} data-href="all" href="/directory/game/Creative" data-tt_medium="twitch_leftnav" data-tt_content="directory_creative">
                  <figure class="warp__avatar">{{partial 'svg/nav-creative'}}</figure>
                  <span class="is-drawer-closed--hide">{{i18n 'Creative'}}</span>
                </a>
              </dd>
            {{/if}}
          {{/if}}

          <dd id="small_more" class="warp__item is-drawer-closed--show">
            <button type="button" title={{i18n 'Other Things'}}>
              <figure class="warp__avatar">{{partial 'svg/nav-more'}}</figure>
            </button>
          </dd>

          {{twitch-prime/offers isLeftColumnClosed=layout.isLeftColumnClosed}}

          {{! Promoted Games }}
          {{#if (and sidePanelGames (not layout.isLeftColumnClosed))}}
            <dd class="promotedGames">
              <dt class="warp__item warp__item--header"><span>{{i18n "Promoted Games"}}</span></dt>

              {{#each sidePanelGames as |sidePanelGame index|}}
                <dd class="warp__item">
                  {{#if sidePanelGame.featuredOnSidePanel}}
                    <a {{action (route-action "handlePromotedGameClick" sidePanelGame "side_panel")}}
                       href="{{sidePanelGame.trackingUrls.clickthroughUrl}}"
                       data-tt_medium="twitch_leftnav"
                       data-game="game.name"
                       data-tt_content="promoted_games"
                       data-tt_content_index={{plus-one index}}>

                      <figure class="warp__avatar">
                        <img src="{{sidePanelGame.box.small}}" class="image">
                        <img src="{{sidePanelGame.trackingUrls.trackingPixelUrl}}" class="hide">
                      </figure>

                      {{sidePanelGame.name}}

                      <div class="small-promoted-game-marker">
                        {{partial 'svg/star'}}
                      </div>
                    </a>
                  {{else}}
                    <a href="{{sidePanelGame.url}}" {{action (route-action "handleGameClick" sidePanelGame)}}>
                      <figure class="warp__avatar">
                        <img src="{{sidePanelGame.box.small}}" class="image">
                      </figure>

                      {{sidePanelGame.name}}
                    </a>
                  {{/if}}
                </dd>
              {{/each}}
            </dd>
          {{/if}}

          {{!-- Promoted Games --}}
          <dd id="nav_advertisement" class="is-drawer-closed--hide">
            <div id="dfp-channel-adlight"></div>
          </dd>
        </dl>

        <dl class="warp__list">
          {{twitch-friends-list/twitch-friend-footer}}

          {{#if (and session.isAuthenticated (not layout.isSocialColumnEnabled))}}
            {{! Friends }}
            {{twitch-friends-list/twitch-friend-list onClick=(action 'onClick') isCollapsed=layout.isLeftColumnClosed}}

            {{! Recommended Friends}}
            {{twitch-friends-list/twitch-friend-recommended-list}}
          {{/if}}

          {{#if isRecommendedChannelsEnabled}}
            {{recommended-channels handleStreamClick=(action (route-action 'handleStreamClick'))}}
          {{/if}}
        </dl>

        {{! Footer }}
        <dl class="warp__list warp__list--sm is-drawer-closed--hide">
          <dt class="warp__item warp__item--header"><span>{{i18n "More at Twitch"}}</span></dt>
          <dd class="warp__item"><a href='/p/about'>{{i18n "About"}}</a></dd>
          <dd class="warp__item"><a href='http://twitchadvertising.tv/'>{{i18n "Advertisers"}}</a></dd>
          <dd class="warp__item"><a href='https://blog.twitch.tv'>{{i18n "Blog"}}</a></dd>
          <dd class="warp__item">{{#link-to 'directory.creative'}}{{i18n 'Creative'}}{{/link-to}}</dd>
          <dd class="warp__item"><a href='/p/cookie-policy'>{{i18n "Cookie Policy"}}</a></dd>
          <dd class="warp__item"><a href='https://dev.twitch.tv'>{{i18n "Developers"}}</a></dd>
          <dd class="warp__item"><a href='http://help.twitch.tv'>{{t 'general.forms.help'}}</a></dd>
          <dd class="warp__item"><a href='/jobs'>{{i18n "Jobs"}}</a></dd>
          <dd class="warp__item">{{language-select balloonClass='balloon--up mg-l-2'}}</dd>
          <dd class="warp__item"><a href='http://music.twitch.tv'>{{i18n "Music"}}</a></dd>
          <dd class="warp__item"><a href='/p/partners'>{{i18n "Partners"}}</a></dd>
          <dd class="warp__item"><a href='/p/press'>{{i18n "Press"}}</a></dd>
          <dd class="warp__item"><a href='/store'>{{i18n "Store"}}</a></dd>
          <dd class="warp__item"><a href='/p/terms-of-service'>{{i18n "Terms"}}</a></dd>
        </dl>
      </div>
    </div>
  </section>{{! End warp__scroll and tse scroll tags }}

  {{! User Profile Settings Anchored Menu }}

  <dl class="warp__anchor {{if layout.isOnsiteNotificationsEnabled 'warp__anchor--beta'}} warp__list">
    {{#if session.isAuthenticated}}
      <dt class="warp__item {{if layout.isOnsiteNotificationsEnabled 'warp__item--anchor-beta' 'warp__item--anchor'}} {{if navigation.isDrawerOpen 'toggled'}}">
        <span class="{{if layout.isOnsiteNotificationsEnabled 'warp__item--anchor-collapsed-beta'}}">
          <figure class="warp__avatar {{if layout.isOnsiteNotificationsEnabled 'warp__avatar--beta'}}"><img src="{{session.userModel.logo}}" alt=""></figure>
          <span class="warp__text">
            <span class="js-username warp__text warp__title is-drawer-closed--hide ellipsis">{{format-display-name session.userData.login session.userModel.displayName}}</span>
            <span class="warp__status">
              {{twitch-presence/selector}}
            </span>
          </span>

          <div class="warp__toggle {{if layout.isOnsiteNotificationsEnabled 'warp__toggle--beta'}} {{if navigation.isDrawerOpen 'toggled'}}" {{action "toggleDrawer"}}>
            <div class="arrow arrow--t"></div>
          </div>

          {{#if layout.isOnsiteNotificationsEnabled}}
            <div class="notification-center__icon-container notification-center__icon-container--left">
              {{twitch-onsite-notifications/manager}}
            </div>
          {{/if}}
        </span>
      </dt>

      <dd class="warp__drawer {{unless navigation.isDrawerOpen 'toggled'}}">
        {{!-- User Links --}}
        <ul class="warp__list warp__list--md">
          <li class="{{if navigation.isChannelSelected "selected"}} game_filter warp__item pd-t-1">
            <a data-href="{{userChannelUrl}}" href="{{userChannelUrl}}" {{action (route-action "handleStreamClick") }} data-tt_medium='twitch_leftnav' data-tt_content="self_channel" title={{i18n 'Channel'}}>
              <figure class="warp__avatar">{{partial 'svg/nav-mychannel'}}</figure>

              <span class="is-drawer-closed--hide">
                {{i18n "Channel"}}
              </span>
            </a>
          </li>

          <li class="{{if navigation.isManagerSelected "selected"}} game_filter warp__item" data-name='manager'>
            <a data-href="{{managerUrl}}" href="{{managerUrl}}" {{action (route-action "handleVideoManagerClick")}} data-tt_medium='twitch_leftnav' data-tt_content="video_manager" title={{i18n 'Video Manager'}}>
              <figure class="warp__avatar">{{partial 'svg/nav-manager'}}</figure>

              <span class="is-drawer-closed--hide">
                {{i18n "Video Manager"}}
              </span>
            </a>
          </li>

          <li class="{{if navigation.isDashboardSelected "selected"}} game_filter warp__item" data-name='dashboard'>
            <a data-href="{{dashboardsUrl}}" href="{{dashboardsUrl}}" {{action (route-action "handleDashboardsClick") }} data-tt_medium='twitch_leftnav' data-tt_content="dashboard" title={{i18n 'Dashboard'}}>
              <figure class="warp__avatar">{{partial 'svg/nav-dashboard'}}</figure>

              <span class="is-drawer-closed--hide">
                {{i18n "Dashboard"}}
              </span>
            </a>
          </li>

          <li class="warp__item">
            <a href="/messages/inbox" data-tt_medium="twitch_leftnav" data-tt_content="messages" title={{i18n 'Messages'}}>
              <figure class="warp__avatar">{{partial 'svg/nav-messages'}}</figure>

              <span class="is-drawer-closed--hide">
                {{i18n "Messages"}}
              </span>
            </a>
          </li>

          <li class="{{if navigation.isBackpackSelected "selected"}} game_filter warp__item" {{action (route-action "handleBackpackClick") }} data-name='backpack' data-tt_medium='twitch_leftnav' data-tt_content="subscriptions">
            <a data-href='backpack' href='/subscriptions' title={{t 'general.Twitch.subscriptions'}}>
              <figure class="warp__avatar">{{partial 'svg/nav-backpack'}}</figure>

              <span class="is-drawer-closed--hide">
                {{t 'general.Twitch.subscriptions'}}
              </span>
            </a>
          </li>

          <li class="warp__item">
            {{#link-to 'settings.profile' title=(t 'general.common.settings')}}
              <figure class="warp__avatar">{{partial 'svg/nav-settings'}}</figure>

              <span class="is-drawer-closed--hide">
                {{t 'general.common.settings'}}
              </span>
            {{/link-to}}
          </li>

          <li class="warp__item" data-name="logout">
            <a href="/logout" {{action (route-action "handleLogoutButtonClick")}} title={{i18n 'Logout'}}>
              <form id="logout_form" method="post" action="/logout"></form>

              <figure class="warp__avatar">{{partial 'svg/nav-logout'}}</figure>

              <span class="is-drawer-closed--hide">
                {{i18n "Logout"}}
              </span>
            </a>
          </li>
        </ul>
      </dd>
    {{else}}
      <dd class="warp__item">
        <span class="warp__split is-drawer-closed--hide">
          <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>
        </span>

        <span class="is-drawer-closed--show">
          <a {{action (route-action "handleLoginButtonClick")}} class="button" href="/login">
            <svg width="10" height="10" viewBox="0 0 12 12"><path fill="#fff" d="M9 12h-9v-1l3-3h2l-2-2v-6h6v6l-2 2h2l3 3v1h-3z"/></svg>
          </a>
        </span>
      </dd>
    {{/if}}
  </dl>
</nav>

<div id="flyout">
  <div class="point"></div>
  <div class="content"></div>
</div>
