Commit ba4824b7 authored by Jordan Grossemy's avatar Jordan Grossemy
Browse files

Sous 900 px, l'espace organisation n'avait plus aucune navigation 

Le rail se masque sous 900 px, et l'espace organisation n'avait rien à la place :
ni bouton pour l'ouvrir, ni barre d'onglets comme en crise. Sur un téléphone il
restait le menu du compte et « Déclencher ». Neuf destinations — veille, mes
actions, veille externe, dossier de préparation, écrire à l'annuaire, membres,
canaux, intégrations, console root — devenaient inatteignables, sans que rien à
l'écran ne le signale.

L'espace crise s'en sortait par sa barre d'onglets, ce qui explique que le défaut
ait tenu : le chemin mobile existait, mais seulement d'un côté de l'application.

Une commande d'ouverture plutôt qu'une seconde barre d'onglets : neuf entrées ne
tiennent pas dans une barre de quatre, et les couper aurait posé la question de
lesquelles. Le rail sait déjà se superposer — la règle existait pour la crise et
sert ici sans modification.

Il se referme au premier choix. En superposition, il resterait sinon devant
l'écran qu'on vient de demander.

Vérifié à 596 px : les neuf destinations tiennent dans la hauteur, cibles de
quarante-quatre points, et la commande disparaît dès que le rail revient.

Co-Authored-By: Claude (RCA)
parent 52b18fee

apps/web/src/ecrans/EspaceOrganisation.tsx

+13 −1
Changes for apps/web/src/ecrans/EspaceOrganisation.tsx: 13 added lines, 1 removed line.
Original line number Diff line number Diff line 
import { useState } from "react";

import { useEtat } from "../etat.js";

import { useRoute } from "../routeur.js";

import { Veille } from "./Veille.js";
@@ -32,6 +33,8 @@ export function EspaceOrganisation() { 
  // les autres comptes.

  const root = moi?.compte.root ?? false;



  const [railOuvert, definirRailOuvert] = useState(false);



  const organisation = moi?.organisations.find((o) => o.organisation_id === organisationId);

  // Brancher une passerelle donne la capacité d’écrire à tout l’annuaire au

  // nom de l’entreprise : ce n’est pas un réglage d’affichage.
@@ -40,6 +43,12 @@ export function EspaceOrganisation() { 
  return (

    <div className="coque">

      <div className="barre-etat">

        {/* Sous 900 px le rail est masqué : sans cette commande, l'espace

            organisation n'avait plus aucune navigation — ni rail, ni barre

            d'onglets comme en crise. Neuf destinations tiennent mal dans une

            barre d'onglets ; on ouvre le rail. */}

        <button className="discret petit ouvre-rail" aria-label="Navigation"

          aria-expanded={railOuvert} onClick={() => definirRailOuvert(!railOuvert)}>☰</button>

        <span className="marque" style={{ cursor: "pointer" }} onClick={() => aller("/")}>

          Kastell

        </span>
@@ -61,7 +70,10 @@ export function EspaceOrganisation() { 
      </div>



      <div className="corps">

        <nav className="rail">

        {/* Se referme sur n'importe quel choix : en superposition, il resterait

            sinon devant l'écran qu'on vient de demander. */}

        <nav className={`rail${railOuvert ? " ouvert" : ""}`}

          onClick={() => definirRailOuvert(false)}>

          {/* Ce que l'organisation fait. */}

          <div className="groupe">

            <span className="etiq">Organisation</span>

apps/web/src/styles.css

+4 −0
Changes for apps/web/src/styles.css: 4 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -656,8 +656,12 @@ tbody tr:hover { background: var(--surface-2); } 
           font-size: 12.5px; }



/* ── Mobile : un chemin propre, pas trois colonnes empilées (§10) ───────── */

/* Commande d'ouverture du rail : inutile tant qu'il est là. */

.ouvre-rail { display: none; }



@media (max-width: 900px) {

  .rail, .contexte { display: none; }

  .ouvre-rail { display: inline-flex; }

  .rail.ouvert {

    display: block; position: fixed; inset: var(--barre) auto 0 0; width: 260px;

    z-index: 50; box-shadow: var(--ombre-flottant);