/** * COLONNE DE NAVIGATION (rail) * * La navigation a quitté le lanceur en grille de l'en-tête pour une colonne * permanente : les modules ne se découvrent plus derrière une icône, ils sont * à l'écran. * * Charpente : la colonne est en `position: fixed` et le `` reçoit un * `padding-left` de sa largeur. L'en-tête collant et la règle `body > main` * (pleine largeur, gouttières, colonnes de confort) continuent de fonctionner * sans être réécrits. * * L'état vient de la base (`users.sidebar_state`) et est posé par le serveur * sur : la colonne ne s'ouvre jamais déployée pour se replier * ensuite sous les yeux. Cf. `App\Shared\Enum\SidebarState`. * * Sous 768 px la colonne n'existe pas : la barre du bas et sa grille de * modules gardent la navigation, à portée de pouce. */ :root { --rail-width: 232px; --rail-width-narrow: 64px; } /* ============================================= CHARPENTE ============================================= */ body.has-rail { padding-left: var(--rail-width); transition: padding-left var(--transition-normal); } html[data-rail="narrow"] body.has-rail { padding-left: var(--rail-width-narrow); } .rail { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; width: var(--rail-width); display: flex; flex-direction: column; background: var(--bg-card); border-right: 1px solid var(--border-main); transition: width var(--transition-normal); } html[data-rail="narrow"] .rail { width: var(--rail-width-narrow); } /* La marque vit désormais en haut de la colonne : celle de l'en-tête ferait doublon, elle ne reparaît que sur mobile où la colonne n'existe pas. Le `margin-left` compense sa disparition : `.app-nav` répartit ses enfants avec `space-between`, et sans le logo à gauche les actions étaient venues se coller au bord gauche au lieu de rester à droite. */ @media (min-width: 769px) { body.has-rail > header .logo { display: none; } body.has-rail > header .nav-actions { margin-left: auto; } } /* ============================================= MARQUE ============================================= */ .rail-brand { display: flex; align-items: center; gap: 0.6rem; height: var(--header-height); padding: 0 0.9rem; flex: 0 0 auto; color: var(--primary); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--border-light); white-space: nowrap; overflow: hidden; } /* Lucide remplace le par un : les deux sont ciblés. */ .rail-brand i, .rail-brand svg { width: 22px; height: 22px; flex: 0 0 22px; } /* ============================================= ENTRÉES ============================================= */ .rail-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0.6rem 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; } /* * Hauteur de ligne : 40 px (22 px de dessin + 2 × 9 px). Assez serré pour que * la douzaine d'entrées tienne sans ascenseur sur un écran d'ordinateur * portable en 1366 × 768. */ .rail-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5625rem 0.65rem; border-radius: var(--radius-ui); color: var(--text-main); text-decoration: none; font-size: 0.9rem; white-space: nowrap; overflow: hidden; transition: background var(--transition-normal), color var(--transition-normal); } /* 22 px : la taille des icônes de l'en-tête (`.icon-btn`), pour que la colonne et la barre du haut parlent la même échelle. */ .rail-item i, .rail-item svg { width: 22px; height: 22px; flex: 0 0 22px; } .rail-item:hover { background: var(--bg-hover); } /* L'Administration ne porte pas de teinte propre : un gris qui suit le thème, lisible sur fond clair comme sur fond sombre. */ .rail-item--admin i, .rail-item--admin svg { color: var(--module-admin); } /* La page courante est marquée par `aria-current` : un lecteur d'écran l'annonce, la feuille de style la teinte. Une seule source. */ .rail-item[aria-current="page"] { background: var(--primary-light); color: var(--primary); font-weight: 600; } /* Repliée, la colonne ne montre plus que le dessin : il se recentre. */ html[data-rail="narrow"] .rail-item, html[data-rail="narrow"] .rail-brand { justify-content: center; padding-left: 0; padding-right: 0; } html[data-rail="narrow"] .rail-label { display: none; } /* ============================================= SÉPARATEURS DE SECTION ============================================= */ .rail-section { display: flex; align-items: center; gap: 0.5rem; margin: 0.7rem 0.65rem 0.3rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .rail-section::after { content: ""; flex: 1; height: 1px; background: var(--border-main); } /* Repliée, l'étiquette disparaît et il ne reste que le trait : les sections restent lisibles sans nom. */ html[data-rail="narrow"] .rail-section { margin: 0.6rem 0.75rem; } html[data-rail="narrow"] .rail-section span { display: none; } /* ============================================= PIED : LE REPLI ============================================= */ .rail-footer { flex: 0 0 auto; padding: 0.5rem; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; } html[data-rail="narrow"] .rail-footer { justify-content: center; } .rail-toggle { background: transparent; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-ui); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition-normal); } .rail-toggle i, .rail-toggle svg { width: 18px; height: 18px; } .rail-toggle:hover { background: var(--primary-light); color: var(--primary); } /* ============================================= MOBILE — LA COLONNE S'EFFACE ============================================= */ @media (max-width: 768px) { body.has-rail { padding-left: 0; } .rail { display: none; } }