<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<aside class="{{@root.prefix}}--side-nav" data-side-nav>
  <nav class="{{@root.prefix}}--side-nav__navigation" role="navigation" aria-label="Side navigation">
    {{> side-nav-header sidenav=sidenav }}
    <ul class="{{@root.prefix}}--side-nav__items">
      <li class="{{@root.prefix}}--side-nav__item">
        <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
              <path
                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
            </svg>
          </div>
          <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
        </a>
      </li>
      <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
        <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
              <path
                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
            </svg>
          </div>
          <span class="{{@root.prefix}}--side-nav__link-text">Link - active</span>
        </a>
      </li>
      <li class="{{@root.prefix}}--side-nav__item">
        <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
              <path
                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
            </svg>
          </div>
          <span class="{{@root.prefix}}--side-nav__link-text">
            Link with really long text that should wrap
          </span>
        </a>
      </li>
      <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
        <a class="{{@root.prefix}}--side-nav__link {{@root.prefix}}--side-nav__link--current" href="javascript:void(0)"
          aria-current="page">
          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
              <path
                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
            </svg>
          </div>
          <span class="{{@root.prefix}}--side-nav__link-text">
            Link with really long text that should wrap - active
          </span>
        </a>
      </li>
      <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
        <button class="{{@root.prefix}}--side-nav__submenu" type="button" aria-haspopup="true" aria-expanded="true">
          <div class="{{@root.prefix}}--side-nav__icon">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
              <path
                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
            </svg>
          </div>
          <span class="{{@root.prefix}}--side-nav__submenu-title">
            Category title that is really long and probably should overflow
          </span>
          <div
            class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
            </svg>
          </div>
        </button>
        <ul class="{{@root.prefix}}--side-nav__menu">
          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
              <span class="{{@root.prefix}}--side-nav__link-text">
                Link with really long text that probably should be truncated
              </span>
            </a>
          </li>
          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
              <span class="{{@root.prefix}}--side-nav__link-text">
                Link with really long text that probably should be truncated
              </span>
            </a>
          </li>
          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
              <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
            </a>
          </li>
          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
              <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
    {{> side-nav-footer expanded=sidenav.state.expanded }}
  </nav>
</aside>
