[QUESTION] Sidebar Nav Creation

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.

<details>
<summary>Code</summary>

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

</details>

But I want to change to this.

<details>
<summary>Code</summary>

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

</details>