kanbante/app/templates/_header.html

{# ── Cadre applicatif partagé (issue #16, refonte 0.16.0) ─────────
   Barre latérale unique pour TOUTES les pages applicatives :
   desktop = barre fixe repliable en rail d'icônes (état mémorisé),
   mobile = tiroir hors-canvas ouvert par le burger de la topbar.
   NE PAS dupliquer ce markup dans les pages.
   Page active : `active_nav` (déduite du gabarit dans render()).
   Fil d'Ariane : `owner`+`repo` (board) ou `full_name` (projet).
   Le wallboard (TV) n'inclut pas ce partiel, volontairement. #}
{% set nav_groups = [
    ("principal", "Principal", [
        ("home", "/", "🏠", "Projets"),
        ("focus", "/focus", "🎯", "Focus"),
        ("today", "/today", "🌅", "Aujourd'hui"),
        ("my", "/my", "👤", "Mes issues"),
    ]),
    ("rituels", "Rituels", [
        ("briefing", "/briefing", "📊", "Briefing"),
        ("standup", "/standup", "🗣️", "Standup"),
        ("digest", "/digest", "🧠", "Digest"),
    ]),
    ("pilotage", "Pilotage", [
        ("forecast", "/forecast", "🔮", "Prévisions"),
        ("health", "/health", "🩺", "Santé"),
        ("rules", "/rules", "⚙️", "Règles"),
        ("activity", "/activity", "📰", "Activité"),
    ]),
    ("outils", "Outils", [
        ("search", "/search", "🔍", "Recherche"),
        ("capture", "/capture", "⚡", "Capture"),
        ("wall", "/wall", "🖥️", "Wallboard"),
    ]),
] %}
{% set active_group = namespace(key="principal") %}
{% for gkey, group, links in nav_groups %}
    {% for key, href, icon, label in links %}
        {% if active_nav == key %}{% set active_group.key = gkey %}{% endif %}
    {% endfor %}
{% endfor %}
<script>
    document.body.classList.add('with-sidebar');
    try {
        if (localStorage.getItem('kanbante-sidebar') === 'collapsed') {
            document.body.classList.add('sidebar-collapsed');
        }
        /* Accordéon exclusif (0.22.0) : une seule section ouverte.
           La section de la page courante prime, sinon celle
           mémorisée, sinon « principal ». */
        localStorage.removeItem('kanbante-nav-closed');
        var openGroup = {{ active_group.key | tojson }};
        var stored = localStorage.getItem('kanbante-nav-open');
        var groups = ['principal', 'rituels', 'pilotage', 'outils'];
        if ({{ (active_nav != "") | tojson }}) {
            localStorage.setItem('kanbante-nav-open', openGroup);
        } else if (stored === '') {
            openGroup = '';
        } else if (stored !== null && groups.indexOf(stored) >= 0) {
            openGroup = stored;
        }
        groups.forEach(function (k) {
            if (k !== openGroup) document.body.classList.add('nav-closed-' + k);
        });
    } catch (e) { /* stockage indisponible : état par défaut */ }
</script>
<aside class="sidebar" id="sidebar" aria-label="Navigation principale">
    <div class="side-head">
        <a href="/" class="side-logo" aria-label="Kanbante — accueil">
            <span class="logo-mark">📋</span>
            <span class="side-label gradient-text">Kanbante</span>
        </a>
        <button type="button" class="side-search palette-trigger" title="Recherche & commandes (Ctrl+K)" aria-label="Recherche et commandes (Ctrl+K)">🔍</button>
        <button type="button" class="side-collapse" id="side-collapse" title="Replier ou déplier le menu" aria-label="Replier ou déplier le menu"><span class="side-collapse-ico">«</span></button>
    </div>
    <nav class="side-nav">
        {% for gkey, group, links in nav_groups %}
        <div class="side-section" data-group="{{ gkey }}">
            <button type="button" class="side-group-btn" data-group-btn="{{ gkey }}" aria-expanded="true">
                <span>{{ group }}</span>
                <span class="side-chevron" aria-hidden="true">▾</span>
            </button>
            <div class="side-acc">
                <div class="side-acc-inner">
                    {% for key, href, icon, label in links %}
                    <a href="{{ href }}" class="side-link{% if active_nav == key %} active{% endif %}" title="{{ label }}">
                        <span class="side-ico">{{ icon }}</span>
                        <span class="side-label">{{ label }}</span>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endfor %}
    </nav>
    <div class="side-foot">
        {% if data_freshness %}
        <span class="side-fresh side-label" title="Dernière actualisation des données Gitea (instantanés d'arrière-plan)">🕐 {{ data_freshness }}</span>
        {% endif %}
        <span class="side-version side-label">v{{ version }}</span>
        {% if auth_enabled %}
        <a href="/logout" class="side-logout" title="Se déconnecter">⏻<span class="side-label"> Sortir</span></a>
        {% endif %}
    </div>
</aside>
<div class="side-backdrop" id="side-backdrop" hidden></div>
<header class="app-header topbar">
    <button type="button" class="nav-burger" id="nav-burger" aria-expanded="false" aria-controls="sidebar" aria-label="Ouvrir le menu">☰</button>
    {% if owner is defined and repo is defined %}
    <span class="crumb"><a href="/board/{{ owner }}/{{ repo }}">{{ owner }} / <strong>{{ repo }}</strong></a></span>
    {% elif full_name is defined %}
    <span class="crumb"><a href="/board/{{ full_name }}">{{ full_name }}</a></span>
    {% endif %}
    <div class="header-actions">
        {% if repo_info is defined and repo_info and repo_info.html_url %}
        <a href="{{ repo_info.html_url }}" target="_blank" rel="noopener" class="nav-pill" title="Ouvrir ce dépôt dans Gitea">🔗 Gitea ↗</a>
        {% endif %}
        <button type="button" class="nav-pill palette-trigger topbar-search" title="Recherche et commandes (Ctrl+K)">🔍</button>
    </div>
    <script src="/static/js/nav.js" defer></script>
</header>