<!--
  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 {{@root.prefix}}--side-nav--fixed" data-side-nav>
  <nav class="{{@root.prefix}}--side-nav__navigation" role="navigation" aria-label="Side navigation">
    <ul class="{{@root.prefix}}--side-nav__items">
      <li class="{{@root.prefix}}--side-nav__item">
        <button class="{{@root.prefix}}--side-nav__submenu" role="button" aria-haspopup="true" aria-expanded="false">
          <span class="{{@root.prefix}}--side-nav__submenu-title">
            L0 Menu
          </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" hidden="">
          <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">L0 menu item</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">L0 menu item</span>
            </a>
          </li>
          <li class="{{@root.prefix}}--side-nav__menu-item">
            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
              <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="{{@root.prefix}}--side-nav__item">
        <button class=" {{@root.prefix}}--side-nav__submenu" role="button" aria-haspopup="true" aria-expanded="true">
          <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">
                L0 menu item
              </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">
                L0 menu item
              </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">L0 menu item</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">L0 menu item</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="{{@root.prefix}}--side-nav__item">
        <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__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">
          <span class="{{@root.prefix}}--side-nav__link-text">
            Link with really long text that should wrap - active
          </span>
        </a>
      </li>
    </ul>
  </nav>
</aside>
