Сохраняйте боковую панель открытой при перезагрузке страницы в 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/