longevity: layout e stile del gestionale — barra laterale, tabelle, bottone d'azione

Variante "gestionale" di Longevity.astro (finora dichiarata e non implementata):
barra laterale sul modello di StressIndex.astro, con le voci Clienti, Nuovo cliente
e un link "Il mio referto". CSS nuovo in longevity.css, solo classi lg-* e solo i
colori già ammessi (nessun colore letterale nuovo: il bianco del testo sul bottone
pieno riusa var(--lg-surface), non un #fff aggiuntivo).

Refs #2

apps/platforms/src/layouts/Longevity.astro

@@ -5,8 +5,8 @@
 // dentro) qui i pubblici sono due, e uno non è staff: il cliente entra tre o quattro
 // volte l'anno a leggere il proprio referto, non gli serve l'arredamento di uno
 // strumento di lavoro. Il layout prevede due forme:
-// - "referto": una colonna che scorre, senza navigazione (questo task)
-// - "gestionale": barra laterale come Stress Index (arriva col piano del gestionale)
+// - "referto": una colonna che scorre, senza navigazione (il cliente)
+// - "gestionale": barra laterale sul modello di StressIndex.astro (il trainer, Unità 2b #2)
 import '@fontsource/montserrat/400.css';
 import '@fontsource/montserrat/500.css';
 import '@fontsource/montserrat/600.css';
@@ -19,10 +19,18 @@ interface Props {
   title: string;
   /** Voci di percorso mostrate nell'intestazione, dopo "Longevity". */
   crumbs?: string[];
-  /** "referto" (colonna centrata, senza navigazione) o "gestionale" (barra laterale, non ancora implementata). */
+  /** "referto" (colonna centrata, senza navigazione) o "gestionale" (barra laterale, per il trainer). */
   variante?: 'referto' | 'gestionale';
 }
 const { title, crumbs = [], variante = 'referto' } = Astro.props;
+const path = Astro.url.pathname;
+
+// Le voci della barra laterale del gestionale: nasce con due pagine, non le sette di
+// Stress Index — un elenco più lungo arriverà con gli sviluppi futuri (#3, #7, #8).
+const NAV_GESTIONALE = [
+  { href: '/longevity/gestionale', label: 'Clienti' },
+  { href: '/longevity/gestionale/nuovo', label: 'Nuovo cliente' },
+];
 ---
 <!doctype html>
 <html lang="it">
@@ -34,14 +42,45 @@ const { title, crumbs = [], variante = 'referto' } = Astro.props;
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
   </head>
   <body class="lg" data-variante={variante}>
-    <div class="lg-shell">
-      <header class="lg-top">
-        <p class="lg-top__crumbs">
-          <strong>Longevity</strong>
-          {crumbs.map((c) => <span> / {c}</span>)}
-        </p>
-      </header>
-      <main class="lg-main"><slot /></main>
-    </div>
+    {variante === 'gestionale' ? (
+      <>
+        <input type="checkbox" id="lg-menu" class="lg-menu-toggle" hidden />
+        <label for="lg-menu" class="lg-menu-btn" aria-label="Apri il menu">☰ Menu</label>
+        <aside class="lg-side">
+          <a class="lg-brand" href="/longevity/gestionale">
+            <span class="eyebrow">InsanityLab</span>
+            Longevity
+          </a>
+          <a class="lg-home" href="/piattaforme">Piattaforme</a>
+          <nav class="lg-nav">
+            {NAV_GESTIONALE.map((item) => (
+              <a href={item.href} class:list={['lg-nav__link', { 'is-active': path === item.href }]}>
+                {item.label}
+              </a>
+            ))}
+            <a class="lg-nav__link lg-nav__link--referto" href="/longevity/io">Il mio referto</a>
+          </nav>
+        </aside>
+        <div class="lg-body">
+          <header class="lg-top">
+            <p class="lg-top__crumbs">
+              <strong>Longevity</strong>
+              {crumbs.map((c) => <span> / {c}</span>)}
+            </p>
+          </header>
+          <main class="lg-main"><slot /></main>
+        </div>
+      </>
+    ) : (
+      <div class="lg-shell">
+        <header class="lg-top">
+          <p class="lg-top__crumbs">
+            <strong>Longevity</strong>
+            {crumbs.map((c) => <span> / {c}</span>)}
+          </p>
+        </header>
+        <main class="lg-main"><slot /></main>
+      </div>
+    )}
   </body>
 </html>