---
layout: default
---

<nav class="c-breadcrumbs">
    <div class="o-wrapper">
        <a href="{{ site.baseurl }}/docs" class="c-breadcrumbs__crumb">Docs</a>
    </div>
</nav>

<section class="c-page-content">
    <div class="o-wrapper">
        <div class="o-layout o-layout--large">
            <div class="o-layout__item u-1/4@tablet c-tree-stick">
                <ul id="site-tree" class="c-tree o-list-bare" role="tree">
                    {% for tree in site.data.tree %}
                    <li class="c-tree__item o-list-bare__item">
                        <div class="c-tree__toggle js-tree-toggle">
                            {{ tree[0] }}
                        </div>

                        <ul class="c-tree__submenu">
                            {% for branch in tree[1] %}

                            {% assign page_url = page.url %}
                            {% assign page_num = page_url | size | minus: 1 %}
                            {% assign page_last_char = page_url | slice: page_num, page_num %}
                            {% if page_last_char == "/" %}
                                {% assign page_url = page_url | slice: 0, page_num %}
                            {% endif %}

                            {% assign branch_url = branch.url %}
                            {% assign branch_num = branch_url | size | minus: 1 %}
                            {% assign branch_last_char = branch_url | slice: branch_num, branch_num %}
                            {% if branch_last_char == "/" %}
                                {% assign branch_url = branch_url | slice: 0, branch_num %}
                            {% endif %}
                            {% if branch.url contains "https://" %}
                                {% assign branch_link = branch_url %}
                            {% else %}
                                {% capture branch_link %}{{ site.baseurl }}{{branch_url}}{% endcapture %}
                            {% endif %}

                            <li class="c-tree__item {% if page_url == tree_url %} is-active{% endif %}">
                                <a href="{{ branch_link }}" {% if page_url == branch_url %}class="is-active"{% endif %}>
                                    {{ branch.tree }}
                                </a>
                            </li>
                            {% endfor %}
                        </ul>

                    </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="o-layout__item u-3/4@tablet">

                {{ content }}

            </div>
        </div>
    </div>
</section>