<div class=“wc-sidebar-block”>

<a class="wc-brand" href="{{ '/' | relative_url }}">{{ site.title }}</a>
<button class="btn btn-link wc-search-docs-toggle float-right d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#wc-docs-nav" aria-controls="wc-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
{%- include menu.svg width="30" height="30" -%}

</button> </div> {%- if site.docsearch -%} <div class=“wc-docsearch”>

<form role="search" class="d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
</form>

</div> {%- endif -%} <nav class=“collapse wc-links” id=“wc-docs-nav” aria-label=“Main navigation”>

{%- assign page_slug = page.url | split: '/' | last -%}
{%- for group in site.data.nav -%}
{%- assign link = group.pages | first -%}
{%- assign link_slug = link.title | slugify -%}
{%- assign group_slug = group.title | slugify -%}
{%- assign active = nil -%}
{%- if page.group == group_slug -%}
  {%- assign active = 'active' -%}
{%- endif -%}
<div class="wc-sidebar-item{% unless active == nil %} {{ active }}{% endunless %}">
    <a class="wc-sidebar-link" href="{{ site.baseurl }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
      {{ group.title }}
    </a>
    <ul class="nav wc-sidenav">
      {%- for doc in group.pages -%}
        {%- assign doc_slug = doc.title | slugify -%}
        {%- assign active = nil -%}
        {%- if page.group == group_slug and page_slug == doc_slug -%}
          {%- assign active = 'active wc-sidenav-active' -%}
        {%- endif -%}
        <li{% unless active == nil %} class="{{ active }}"{% endunless %}>
          <a href="{{ site.baseurl }}/{{ group_slug }}/{{ doc_slug }}/">
            {{ doc.title }}
          </a>
        </li>
      {%- endfor -%}
    </ul>
  </div>
{%- endfor -%}

</nav>