Сохраняйте боковую панель открытой при перезагрузке страницы в django

У меня есть несколько приложений с шаблонами в моем проекте django. Все шаблоны расширяют мой файл base.html, который включает боковую панель страницы. Когда я нажимаю на одно из меню на боковой панели, вся страница обновляется. Как я могу оставить открытой боковую панель и обновить только содержимое страницы? Я думал использовать ajax, но не уверен, что это правильный способ.

Вот основная часть моего base.html.

<body>
    <div class="wrapper">
        <!-- SIDEBAR -->
        {% include 'sidebar.html' %}

        <!-- PAGE CONTENT --> 
        <!--<div class="container-fluid">-->

            {% block content %}

            {% endblock %}

        <!--</div>-->
    </div>
</body>

А вот мой sidebar.html

<div class="sidenav">
  <ul class="sidebar-nav">  
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
  </ul>
</div>

Если вы находитесь в начале проекта, я могу предложить использовать htmx(https://htmx.org/). тогда только начальный индекс будет полностью загружен базовым шаблоном. Вам нужно добавить div для заполнения ответа от htmx вызова

base.html:

<body>
    <div class="wrapper">
        <!-- SIDEBAR -->
        {% include 'sidebar.html' %}

        <!-- PAGE CONTENT --> 
        <!--<div class="container-fluid">-->
<div id="main_htmx">
            {% block content %}

            {% endblock %}
</div>
        <!--</div>-->
    </div>
</body>

затем в навигационной панели: 

<div class="sidenav">
  <ul class="sidebar-nav">  
    <li hx-get="/menu1/" hx-target="main_htmx">Menu1</li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
  </ul>
</div>

Ваше представление, которое будет возвращать /menu1/, должно отображать шаблон, который не расширяет base.html и не использует блоки из него. Все, что вам нужно, это тело html, например:

<h1>Hello it's htmx get</h1>
<table></table>

Htmx вставьте это внутрь div 'main_htmx'. Есть еще много чего, о чем следует помнить, например, если вы хотите изменить url в строке браузера после получения htmx, вам нужно помнить, что кто-то нажмет refresh, и вам нужно вернуть полное тело с base.html. Вы можете проверить в view, что запрос был сделан htmx с помощью:

if request.META.get('HTTP_HX_CURRENT_URL') is not None:

или использовать стороннюю библиотеку для django https://pypi.org/project/django-htmx/

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