[QUESTION] Sidebar Nav Creation

Support Themes & Styling
1

Hello, I’m creating a new theme, but I cant figured nav.html.twig working principle.
I’m using this codes in my theme nav part.

Code 
{% macro loop(page, parent_loop) %}
    {% if parent_loop|length > 0 %}
        {% set data_level = parent_loop %}
        {% set parent_loop = parent_loop ~ '.' %}
    {% else %}
        {% set data_level = 0 %}
    {% endif %}
    {% for p in page.children %}
        {% if p.visible %}
        {% set parent_page = p.activeChild ? ' parent' : '' %}
        {% set current_page = p.active ? ' active' : '' %}
        <li class="dd-item{{ parent_page }}{{ current_page }}" data-nav-level='{{ data_level }}' data-nav-id="{{ p.route }}">
            <a href="{{ p.url }}" {% if p.header.class %}class="{{ p.header.class }}"{% endif %}>
                <span>
                    <b>{{ parent_loop}}{{ loop.index }}.</b> {{ p.menu }}
                </span>
            </a>
            {% if p.children.count > 0 %}
            <ul data-phases-nav>
                {{ _self.loop(p, parent_loop~loop.index) }}
            </ul>
            {% endif %}
        </li>
        {% endif %}
    {% endfor %}
{% endmacro %}

<ul id="{{ slug }}" class="topics">
    {{ _self.loop(pages, '') }}
</ul>

But I want to change to this.

Code 
<nav class="collapse my-links" id="my-docs-nav">
  <div class="my-toc-item active">
      <a class="my-toc-link" href="/my/path/">
        First Active Topic
      </a>

      <ul class="nav my-sidenav">
        <li class="active my-sidenav-active">
            <a href="/my/path/">
              Active Item
            </a>
        </li>
        <li>
            <a href="/my/path/">
              Passive Item
            </a>
        </li>
      </ul>
  </div>

  <div class="my-toc-item">
      <a class="my-toc-link" href="/my/path/">
        Second Passive Topic
      </a>

      <ul class="nav my-sidenav">
        <li>
            <a href="/my/path/">
              Passive Item
            </a>
        </li>
        <li>
            <a href="/my/path/">
              Passive Item
            </a>
        </li>
      </ul>
  </div>
</nav>