<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>