MainNavigation: Ajouter la possibilité d'un sous-menu ?

Sharlaan commented 2 months ago

Bonjour,

Dans le cadre d'une étude de faisabilité pour l'utilisation du Header de @codegouv, j'ai découvert que le composant de navigation en mode Menu, ne permet pas de "sous-niveau" supplémentaire.

const navigation = [
    { text: 'Accueil', isActive: location.pathname === '/', linkProps: { to: '/' } },
    {
        text: 'Démonstrations',
        menuLinks: [
            {
                text: 'Tableaux',
                isActive: location.pathname === '/lists',
                linkProps: { to: '/lists' },
            },
            {
                text: 'Formulaires',
                menuLinks: [
                    {
                        text: 'Filtrage',
                        isActive: location.pathname === '/forms/filter',
                        linkProps: { to: '/forms/filter' },
                    },
                    {
                        text: 'CRUD',
                        isActive: location.pathname === '/forms/crud',
                        linkProps: { to: '/forms/crud' },
                    },
                ],
            },
        ],
    },
    { text: 'A propos', isActive: location.pathname === '/about', linkProps: { to: '/about' } },
] satisfies Omit<MainNavigationProps.Item, 'megaMenu'>;

...

<Header ... navigation={navigation} />

Dans le code source, effectivement, je vois que le sous-composant \<Menu> ne supporte que des linkProps.

Du coup, je m'interroge s'il y a une contre-indication qui interdirait l'usage de sous-menus ?

... ou serait-ce possible à minima de rajouter un seul sous-niveau dans \<Menu> ?

Merci d'avance

garronej commented 2 months ago

Bonjour @Sharlaan,

Pour les sugestion d'ajout de fonctionalité il faut se tourner vers l'équipe du SIG et ouvrir une issue sur https://github.com/GouvernementFR/dsfr.

react-dsfr est un toolkit d'intégration pour React.

En l'occurence je pense que les sous menu n'on pas été implémenté pour des questions d'accécibilité, en revanche ile y a les "mega menu":

https://components.react-dsfr.codegouv.studio/?path=/story/components-mainnavigation--mega-menu

<Header
  brandTop={<>INTITULE<br />OFFICIEL</>}
  className="margin-bottom-600px"
  homeLinkProps={{
    href: '/',
    title: 'Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)'
  }}
  navigation={[
    {
      isActive: true,
      megaMenu: {
        categories: [
          {
            categoryMainLink: {
              linkProps: {
                href: '#'
              },
              text: 'Nom de catégorie'
            },
            links: [
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                isActive: true,
                linkProps: {
                  href: '#'
                },
                text: 'Page active'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              }
            ]
          },
          {
            categoryMainLink: {
              linkProps: {
                href: '#'
              },
              text: 'Nom de catégorie'
            },
            links: [
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              }
            ]
          },
          {
            categoryMainLink: {
              linkProps: {
                href: '#'
              },
              text: 'Nom de catégorie'
            },
            links: [
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                isActive: true,
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              }
            ]
          },
          {
            categoryMainLink: {
              linkProps: {
                href: '#'
              },
              text: 'Nom de catégorie'
            },
            links: [
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              }
            ]
          }
        ],
        leader: {
          link: {
            linkProps: {
              href: '#'
            },
            text: 'Voir toute la rubrique'
          },
          paragraph: 'Lorem [...] elit ut.',
          title: 'Titre éditorialisé'
        }
      },
      text: 'Entrée mega menu'
    },
    {
      megaMenu: {
        categories: [
          {
            categoryMainLink: {
              linkProps: {
                href: '#'
              },
              text: 'Nom de catégorie'
            },
            links: [
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              }
            ]
          },
          {
            categoryMainLink: {
              linkProps: {
                href: '#'
              },
              text: 'Nom de catégorie'
            },
            links: [
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              }
            ]
          },
          {
            categoryMainLink: {
              linkProps: {
                href: '#'
              },
              text: 'Nom de catégorie'
            },
            links: [
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                isActive: true,
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              }
            ]
          },
          {
            categoryMainLink: {
              linkProps: {
                href: '#'
              },
              text: 'Nom de catégorie'
            },
            links: [
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              },
              {
                linkProps: {
                  href: '#'
                },
                text: 'Lien de navigation'
              }
            ]
          }
        ],
        leader: {
          link: {
            linkProps: {
              href: '#'
            },
            text: 'Voir toute la rubrique'
          },
          paragraph: 'Lorem [...] elit ut.',
          title: 'Titre éditorialisé'
        }
      },
      text: 'Entrée mega menu'
    },
    {
      linkProps: {
        href: '#',
        target: '_self'
      },
      text: 'accès direct'
    },
    {
      linkProps: {
        href: '#',
        target: '_self'
      },
      text: 'accès direct'
    }
  ]}
/>

Sharlaan commented 2 months ago

Merci beaucoup pour votre réactivité ! :D

Okay merci j'avais mal compris le mega-menu, "à comprendre à la verticale" :)

codegouvfr / react-dsfr

MainNavigation: Ajouter la possibilité d'un sous-menu ? #260