Migliorare spaziature voci desktop del menu di navigazione a larghezze `lg`, `xl`.

[Fupete]

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

• Ho verificato e non esiste

Versione della libreria

2.18+ / 3+

Cosa

Rispetto al menu di navigazione, come fatto su Designers Italia anni fa, e in corso sul nuovo Developers Italia, direi di valutare la possibilità di ridurre il padding orizzontale degli elementi .nav-item a risoluzioni lg e xl rispettivamente a 0.5 e 1 rem per menu "larghi" con molte voci. Da verificare l'impatto anche di accessibilità in caso.

cc @astagi @zetareticoli

Perché

È una piccola modifica custom che viene fatta spesso su menu con molte voci. Migliorerebbe secondo me la resa sia dell'header che del menu sticky a tendere su schermi medio-piccoli. Sarebbe da integrare per rendere coerenti tutte le esperienze.

Alternativa, dovremmo parametrizzare la media query per rendere mobile il menu di navigazione, in modo da permettere agli sviluppatori di farlo partire appena non "entrano più le voci" nella viewport.

Contesto

No response

Altro

In caso sarà da valutare se aggiornare anche UI Kit Italia di conseguenza.

[zetareticoli]

@Fupete ho ridotto da spacing-m (24px/1.5rem) a spacing-s (16px/1rem) solo su dispositivi large.

Non ridurrei ulteriormente.

[Fupete]

@zetareticoli per riferimento considera che

• Designers Italia (che ha solo buttons per Megamenu nella navbar) usa da sempre px-lg-2 px-xl-3 sui buttons dei dropdown per permettere di non avere errori responsive (menu troppo largo della viewport sia su lg che xl).
• Il prossimo Developers Italia userà questo override molto simile appena scritto con @astagi invece su normali voci menu link: https://github.com/italia/developers-italia-website/blob/9c5635a728fa22af3dfc58e31ac517440b793d13/src/components/molecules/Tabs/style.scss#L4, che prevede anche un altra misura intermedia.

Ovviamente queste cose dipendono dai singoli contesti e layout, difficile generalizzare. È vero però che su lg le voci menu sono inutilmente larghe al momento quindi bene ridurre. Io valuterei una riduzione minore anche su xl per tutti sinceramente.

[Fupete]

Oppure potremmo anche valutare di creare una classe ad hoc solo per menu particolarmente ricchi di voci. Certo rischierebbe di alimentare cattive pratiche però. Da valutare.

[zetareticoli]

• https://github.com/italia/developers-italia-website/blob/9c5635a728fa22af3dfc58e31ac517440b793d13/src/components/molecules/Tabs/style.scss#L4

La misura di 1rem è quella che viene ora applicata con #1837 (solo da dispositivi lg in poi). Designers Italia applica 24px (che è la misura prevista in BSI v2.x e 3.x prima del fix).