{#https://mdbootstrap.com/docs/standard/extended/mega-menu/#}
<nav class="navbar navbar-expand-lg bg-body-tertiary" style="padding: 0;">
    <!-- Container wrapper -->
    <div class="container-fluid">
        <!-- Toggle button -->
        <button data-mdb-button-init class="navbar-toggler px-0" type="button" data-mdb-collapse-init
                data-mdb-target="#navbarExampleOnHover" aria-controls="navbarExampleOnHover" aria-expanded="false"
                aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>

        <!-- Collapsible wrapper -->
        <div class="collapse navbar-collapse" id="navbarExampleOnHover">
            <!-- Left links -->
            <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
                <li class="nav-item">
                  <a class="nav-link" href="{{ path('library_index') }}">Tous les thèmes</a>
                </li>
                {% for Menu, menuValues in menu.values %}
                    <!-- Navbar dropdown -->
                    <li class="nav-item dropdown dropdown-hover position-static">
                        <a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                           role="button"
                           data-mdb-toggle="dropdown" aria-expanded="false">
                            {{ Menu }}
                        </a>
                        <!-- Dropdown menu -->
                        <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown"
                             style="border-top-left-radius: 0; border-top-right-radius: 0;">
                            <div class="container">
                                <div class="row my-4">
                                    <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                                        <div class="list-group list-group-flush">
                                            {% for menuValue in menuValues.children %}
                                                <a href="?category[]={{ menuValue.fullName }}"
                                                   class="list-group-item list-group-item-action">{{ menuValue.name }}</a>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
            <!-- Left links -->
        </div>
        <!-- Collapsible wrapper -->
    </div>
    <!-- Container wrapper -->
</nav>