<div class="sidebar">
    <h3 class="brand">
        <a class="navbar-brand" href="#">API Star</a>
        <!-- <a href="#">{{ document.title|default('API Star', True) }}</a> -->
    </h3>

    <select class="menu-context-mobile">
        <option value="" selected="selected">Go to...</option>
        {% if document.get_sections() %}
            {% for section in document.get_sections() %}
                <optgroup label="{{ section.title|default(section.name, True) }}">
                    {% if section.get_links() %}
                        {% for link in section.get_links() %}
                            <option value="#{{ section.name }}-{{ link.name }}">
                                {{ link.title|default(link.name, True) }}
                            </option>
                        {% endfor %}
                    {% endif %}
                </optgroup>
            {% endfor %}
        {% endif %}
        {% if document.get_links() %}
            <optgroup label="Links">
                {% for link in document.get_links() %}
                    <option value="#{{ link.name }}">{{ link.title|default(link.name, True) }}</option>
                {% endfor %}
            </optgroup>
        {% endif %}
    </select>
    <div class="menu-list">
        {% if document.get_sections() %}
            <ul class="menu-content">
                {% for section in document.get_sections() %}
                    <li>
                        <a> {{ section.title|default(section.name, True) }} <span class="arrow"></span></a>
                        <ul id="{{ section.name }}-dropdown">
                            {% if section.get_links() %}
                                {% for link in section.get_links() %}
                                    <li><a href="#{{ section.name }}-{{ link.name }}">{{ link.title|default(link.name, True) }}</a></li>
                                {% endfor %}
                            {% endif %}
                        </ul>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
         {% if document.get_links() %}
            <ul class="menu-content">
                {% for link in document.get_links() %}
                <li>
                    <a href="#{{ link.name }}">{{ link.title|default(link.name, True) }}</a>
                </li>
                {% endfor %}
            </ul>
         {% endif %}
    </div>
</div>
