88 lines
4.5 KiB
HTML
88 lines
4.5 KiB
HTML
{% extends 'base.html' %}{% load static %}{% load simple_menu %}
|
|
{% block body %}{% generate_menu %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col">
|
|
<a class="d-flex align-items-center mt-2 pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom" href="{% url 'admin_benevolat:index' %}">
|
|
<img src="{% get_media_prefix %}{{ config.LOGO_ASSO }}" height="100px" class="me-3">
|
|
<span class="fs-4 fw-semibold">{{ config.NOM_ASSO }}</span>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-3 p-3 border-end" role="navigation">
|
|
<!--<div class="flex-shrink-0 p-3">-->
|
|
<ul class="list-unstyled ps-0">
|
|
{% for item in menus.admin %}
|
|
<li class="mb-1">
|
|
<button
|
|
class="btn btn-toggle d-inline-flex align-items-center rounded border-0"
|
|
data-bs-toggle="collapse" data-bs-target="#{{ item.title|slugify }}-collapse" aria-expanded="false">
|
|
<i class="bi bi-chevron-right me-1" id="{{ item.title|slugify }}-icon"></i>
|
|
{% if item.icon != "" %}<i class="bi bi-{{ item.icon }} me-1"></i>{% endif %}{{ item.title }}
|
|
</button>
|
|
<div id="{{ item.title|slugify}}-collapse" class="collapse">
|
|
<ul class="btn-toggle-nav list-unstyled fw-normal ms-3 small">
|
|
{% for subitem in item.children %}
|
|
<li>
|
|
|
|
<a hx-get="{{ subitem.url }}" hx-target="#admin_body" hx-push-url="true" class="link-body-emphasis d-inline-flex text-decoration-none rounded">
|
|
{% if subitem.icon %}<i class="bi bi-{{ subitem.icon }} me-1"></i>{% endif %}{{ subitem.title }}
|
|
</a>
|
|
{% if subitem.children %}
|
|
<ul class="nav nav-pills flex-column mb-auto ms-4 smaller">
|
|
{% for child in subitem.children %}
|
|
<li class="nav-item">
|
|
<a class="nav-link{% if child.selected %} active{% endif %}" hx-get="{{ child.url }}" hx-target="#admin_body" hx-push-url="true">
|
|
{% if child.icon %}<i class="bi bi-{{ child.icon }} me-1"></i>{% endif %}{{ child.title }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<!--</div>-->
|
|
</div>
|
|
<div class="col-9" id="admin_body">
|
|
{% block admin_body %}
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block javascripts_footer %}
|
|
{{ block.super }}
|
|
<script type="text/javascript">
|
|
document.querySelectorAll('[id$=-collapse]').forEach(elt => {
|
|
elt.addEventListener('show.bs.collapse', event => {
|
|
var title = '#'+event.target.id.split('-collapse')[0] + '-icon';
|
|
console.log(title);
|
|
document.querySelector(title).classList.remove('bi-chevron-right');
|
|
document.querySelector(title).classList.add('bi-chevron-down');
|
|
});
|
|
});
|
|
document.querySelectorAll('[id$=-collapse]').forEach(elt => {
|
|
elt.addEventListener('hide.bs.collapse', event => {
|
|
var title = '#'+event.target.id.split('-collapse')[0] + '-icon';
|
|
console.log(title);
|
|
document.querySelector(title).classList.remove('bi-chevron-down');
|
|
document.querySelector(title).classList.add('bi-chevron-right');
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll("div[role=navigation] a").forEach( elt => {
|
|
elt.addEventListener('htmx:afterRequest', event => {
|
|
console.log("so triggered")
|
|
document.querySelectorAll("div[role=navigation] a").forEach(subelt => { subelt.classList.remove("active"); });
|
|
event.target.classList.add("active");
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |