feat(nav): refonte du layout — barre latérale repliable, topbar mince (issue #16)
Retour de Bruno sur la 0.15.0 (disposition pas conviviale, trop de place, mobile inchangé): la barre horizontale disparaît. Barre latérale groupée (Principal/Rituels/Pilotage/Outils), repliable en rail d'icônes mémorisé sur desktop, tiroir hors-canvas sur mobile; topbar de 52px (fil d'Ariane + actions).
This commit is contained in:
Spark
+76
-54
@@ -1,63 +1,85 @@
|
||||
{# ── Header global partagé (issue #16) ─────────────────────────────
|
||||
NE PAS dupliquer ce markup dans les pages : c'est l'unique source.
|
||||
Page active : variable `active_nav` (déduite du gabarit dans
|
||||
render(), app/main.py). Fil d'Ariane projet : `owner`+`repo`
|
||||
(board) ou `full_name` (pages projet). Lien Gitea externe si
|
||||
`repo_info.html_url` est présent (board).
|
||||
Desktop : primaires + menu « Plus ▾ ». Mobile : burger + panneau.
|
||||
{# ── 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. #}
|
||||
<header class="app-header">
|
||||
<div class="brand">
|
||||
<a href="/" class="logo" aria-label="Kanbante — accueil"><span class="logo-mark">📋</span><span class="gradient-text">Kanbante</span></a>
|
||||
{% if owner is defined and repo is defined %}
|
||||
<span class="crumb"><span class="sep">/</span> <a href="/board/{{ owner }}/{{ repo }}">{{ owner }} / <strong>{{ repo }}</strong></a></span>
|
||||
{% elif full_name is defined %}
|
||||
<span class="crumb"><span class="sep">/</span> <a href="/board/{{ full_name }}">{{ full_name }}</a></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<nav class="nav-pills main-nav" aria-label="Navigation principale">
|
||||
<a href="/" class="nav-pill{% if active_nav == 'home' %} active{% endif %}">🏠 Projets</a>
|
||||
<a href="/focus" class="nav-pill{% if active_nav == 'focus' %} active{% endif %}">🎯 Focus</a>
|
||||
<a href="/today" class="nav-pill{% if active_nav == 'today' %} active{% endif %}">🌅 Aujourd'hui</a>
|
||||
<a href="/search" class="nav-pill{% if active_nav == 'search' %} active{% endif %}">🔍 Recherche</a>
|
||||
<a href="/capture" class="nav-pill{% if active_nav == 'capture' %} active{% endif %}">⚡ Capture</a>
|
||||
<div class="nav-more">
|
||||
<button type="button" class="nav-pill nav-more-btn{% if active_nav in ['my', 'activity', 'briefing', 'standup', 'digest', 'forecast', 'rules', 'health'] %} active-soft{% endif %}" id="nav-more-btn" aria-expanded="false" aria-controls="nav-more-menu">Plus <span aria-hidden="true">▾</span></button>
|
||||
<div class="nav-more-menu" id="nav-more-menu" role="menu" hidden>
|
||||
<a href="/my" class="nav-pill{% if active_nav == 'my' %} active{% endif %}" role="menuitem">👤 Mes issues</a>
|
||||
<a href="/activity" class="nav-pill{% if active_nav == 'activity' %} active{% endif %}" role="menuitem">📰 Activité</a>
|
||||
<a href="/briefing" class="nav-pill{% if active_nav == 'briefing' %} active{% endif %}" role="menuitem">📊 Briefing</a>
|
||||
<a href="/standup" class="nav-pill{% if active_nav == 'standup' %} active{% endif %}" role="menuitem">🗣️ Standup</a>
|
||||
<a href="/digest" class="nav-pill{% if active_nav == 'digest' %} active{% endif %}" role="menuitem">🧠 Digest</a>
|
||||
<a href="/forecast" class="nav-pill{% if active_nav == 'forecast' %} active{% endif %}" role="menuitem">🔮 Prévisions</a>
|
||||
<a href="/rules" class="nav-pill{% if active_nav == 'rules' %} active{% endif %}" role="menuitem">⚙️ Règles</a>
|
||||
<a href="/health" class="nav-pill{% if active_nav == 'health' %} active{% endif %}" role="menuitem">🩺 Santé</a>
|
||||
<a href="/wall" class="nav-pill" role="menuitem">🖥️ Wallboard</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.classList.add('with-sidebar');
|
||||
try {
|
||||
if (localStorage.getItem('kanbante-sidebar') === 'collapsed') {
|
||||
document.body.classList.add('sidebar-collapsed');
|
||||
}
|
||||
} catch (e) { /* stockage indisponible : état par défaut */ }
|
||||
</script>
|
||||
{% set nav_groups = [
|
||||
("Principal", [
|
||||
("home", "/", "🏠", "Projets"),
|
||||
("focus", "/focus", "🎯", "Focus"),
|
||||
("today", "/today", "🌅", "Aujourd'hui"),
|
||||
("my", "/my", "👤", "Mes issues"),
|
||||
]),
|
||||
("Rituels", [
|
||||
("briefing", "/briefing", "📊", "Briefing"),
|
||||
("standup", "/standup", "🗣️", "Standup"),
|
||||
("digest", "/digest", "🧠", "Digest"),
|
||||
]),
|
||||
("Pilotage", [
|
||||
("forecast", "/forecast", "🔮", "Prévisions"),
|
||||
("health", "/health", "🩺", "Santé"),
|
||||
("rules", "/rules", "⚙️", "Règles"),
|
||||
("activity", "/activity", "📰", "Activité"),
|
||||
]),
|
||||
("Outils", [
|
||||
("search", "/search", "🔍", "Recherche"),
|
||||
("capture", "/capture", "⚡", "Capture"),
|
||||
("wall", "/wall", "🖥️", "Wallboard"),
|
||||
]),
|
||||
] %}
|
||||
<aside class="sidebar" id="sidebar" aria-label="Navigation principale">
|
||||
<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="Palette de commandes (Ctrl+K)">
|
||||
<span class="side-ico">⌨️</span>
|
||||
<span class="side-label">Recherche & commandes</span>
|
||||
<kbd class="side-label">Ctrl K</kbd>
|
||||
</button>
|
||||
<nav class="side-nav">
|
||||
{% for group, links in nav_groups %}
|
||||
<div class="side-group">{{ group }}</div>
|
||||
{% 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 %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
<div class="side-foot">
|
||||
<button type="button" class="side-collapse" id="side-collapse" aria-label="Replier ou déplier le menu">
|
||||
<span class="side-collapse-ico">«</span>
|
||||
<span class="side-label">Replier</span>
|
||||
</button>
|
||||
<span class="side-version side-label">v{{ version }}</span>
|
||||
</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" title="Palette de commandes (Ctrl+K)">⌨️ Ctrl K</button>
|
||||
<button type="button" class="nav-burger" id="nav-burger" aria-expanded="false" aria-controls="mobile-nav" aria-label="Ouvrir le menu">☰</button>
|
||||
<button type="button" class="nav-pill palette-trigger topbar-search" title="Recherche et commandes (Ctrl+K)">🔍</button>
|
||||
</div>
|
||||
<nav class="mobile-nav" id="mobile-nav" aria-label="Menu mobile" hidden>
|
||||
<a href="/" class="{% if active_nav == 'home' %}active{% endif %}">🏠 Projets</a>
|
||||
<a href="/focus" class="{% if active_nav == 'focus' %}active{% endif %}">🎯 Focus</a>
|
||||
<a href="/today" class="{% if active_nav == 'today' %}active{% endif %}">🌅 Aujourd'hui</a>
|
||||
<a href="/search" class="{% if active_nav == 'search' %}active{% endif %}">🔍 Recherche</a>
|
||||
<a href="/capture" class="{% if active_nav == 'capture' %}active{% endif %}">⚡ Capture</a>
|
||||
<a href="/my" class="{% if active_nav == 'my' %}active{% endif %}">👤 Mes issues</a>
|
||||
<a href="/activity" class="{% if active_nav == 'activity' %}active{% endif %}">📰 Activité</a>
|
||||
<a href="/briefing" class="{% if active_nav == 'briefing' %}active{% endif %}">📊 Briefing</a>
|
||||
<a href="/standup" class="{% if active_nav == 'standup' %}active{% endif %}">🗣️ Standup</a>
|
||||
<a href="/digest" class="{% if active_nav == 'digest' %}active{% endif %}">🧠 Digest</a>
|
||||
<a href="/forecast" class="{% if active_nav == 'forecast' %}active{% endif %}">🔮 Prévisions</a>
|
||||
<a href="/rules" class="{% if active_nav == 'rules' %}active{% endif %}">⚙️ Règles</a>
|
||||
<a href="/health" class="{% if active_nav == 'health' %}active{% endif %}">🩺 Santé</a>
|
||||
<a href="/wall">🖥️ Wallboard</a>
|
||||
</nav>
|
||||
<script src="/static/js/nav.js" defer></script>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user