Реализовать коллапсирующую панель навигации с помощью django mptt и bootstrap

Я начал внедрять Django-mptt для использования в динамическом меню, управляемом базой данных. У меня возникла проблема с тем, как работают теги шаблонов, и я почти разобрался с ней. Предыдущий сайт хорошо работал с использованием свертывающихся меню: хотя они были громоздкими в обслуживании, они работали. Теперь требования таковы, что я должен использовать меню, управляемые данными.

На текущем сайте используется bootstrap для управления классом collapse - ограничение заключается в том, что при изменении меню все меню нуждается в корректировке. Текущий сайт имеет следующее:

<div class="sidenav-menu-heading">{% translate 'settings' %}</div>
<!-- Sidenav Accordion (Settings)-->
<!-- Settings->General-->
<a class="nav-link collapsed"
   href="javascript:void(0);"
   data-toggle="collapse"
   data-target="#SettingsGeneralviewcollapse"
   aria-expanded="false"
   aria-controls="SettingsGeneralviewcollapse">
    <div class="nav-link-icon">{% icon "grid" %}</div>
    {% translate 'General' %}
    <div class="sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="SettingsGeneralviewcollapse" data-parent="#accordionSidenav">
    <nav class="sidenav-menu-nested nav accordion" id="accordionSidenavTaskMenu">
        <!-- Nested Sidenav Accordion (Settings -> Organisation)-->
        <a class="nav-link collapsed"
           href="javascript:void(0);"
           data-toggle="collapse"
           data-target="#SettingsOrgviewcollapse"
           aria-expanded="false"
           aria-controls="SettingsOrgviewcollapse">
            {% translate 'Organisation' %}
            <div class="sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
        </a>
        <div class="collapse" id="SettingsOrgviewcollapse"
             data-parent="#SettingsGeneralviewcollapse">
            <nav class="sidenav-menu-nested nav">
                <a class="nav-link"
                   href="{% url 'organisation_create' %}">{% translate 'Create' %}</a>
                <a class="nav-link" href="{% url 'organisation_list' %}">{% translate 'List' %}</a>

            </nav>
        </div>
        <a class="nav-link collapsed" href="javascript:void(0);"
           data-toggle="collapse"
           data-target="#SettingsDeptviewcollapse"
           aria-expanded="false"
           aria-controls="SettingsDeptviewcollapse">
            {% translate 'Departments' %}
            <div class="sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
        </a>
        <div class="collapse" id="SettingsDeptviewcollapse"
             data-parent="#SettingsGeneralviewcollapse">
            <nav class="sidenav-menu-nested nav">
                <a class="nav-link"
                   href="{% url 'department_create' %}">{% translate 'Create' %}</a>
                <a class="nav-link" href="{% url 'department_list' %}">{% translate 'List' %}</a>
                <a class="nav-link"
                   href="{% url 'department_select' %}">{% translate 'Select' %}</a>

            </nav>
        </div>
    </nav>
</div>

Используя django mptt - основная структура, которую я разработал, выглядит так:

{% load mptt_tags %}
<ul class="navbar-nav mr-auto">
    {% recursetree menu %}
        {% if node.level == 0 %}
            {% if not node.is_leaf_node %}
                <div class="sidenav-menu-heading">{{ node.name|capfirst }}</div>
            {% endif %}
        {% else %}
            {% if not node.is_leaf_node %}
                <div class="nav-link-icon">{% if node.icon == "none" %}{% else %}
                    <i class="fas {{ node.icon }}"> </i>{% endif %} {{ node.name|capfirst }}</div>
            {% else %}
                <a class="nav-link" href="{% if node.url == "none" %}{% else %}
                {% url node.url %} {% endif %}">{{ node.name|capfirst }}</a>
            {% endif %}
        {% endif %}
        {% if not node.is_leaf_node %}
            <ul class="sidenav-menu-nested nav">
                <a>{{ children }}</a>
            </ul>
        {% endif %}
    {% endrecursetree %}
</ul>

Проблема заключается в том, как реализовать новую систему (mptt), чтобы она выглядела как старое меню.

1. The easy bit is the level == 0 - that works ok.
2. How to implement the class="nav-link collapsed" for an unknown level

По сути: Если есть меню верхнего уровня, я могу с этим разобраться. Это nav-link collapsed -->nav-link collapsed. Я пробовал вставлять эти секции в node.if_leaf_node и if not, но не могу нажать и развернуть.

Вернуться на верх