Working on SideMenu component about react-dsfr HOT 9 CLOSED

Everything in generatedFromCss is transpilled from the reference CSS stylesheet.
The class fr-sidemenu__item--active not beeing present means that the official documentation is out of date and that it's something else that makes the item selected: aria-current="page" on the child.

from react-dsfr.

Hello @gary-van-woerkens,
Thank you for your effort,
Please take a look at how the menu is already implemented, it should and must be consistent with how the side menu works.

https://github.com/codegouvfr/react-dsfr/blob/main/src/MainNavigation/MainNavigation.tsx

from react-dsfr.

I would say that it should be handled by a property, eg active prop, to keep dsfr naming which would be a boolean?

from react-dsfr.

Question

There is a class to add to the selected menu item: fr-sidemenu__item--active.
I guess that the position of this class is related to something external to the SideMenu itself, as the app routing.

Any suggestion about the implementation of the item selection logic ?

from react-dsfr.

Yes, let's put isActive just to be consistent with whay we already do in the menu.

The only place we don't use a is|do|will|has prefix is for level 0 component props because.
<Foo active /> make more sence than <Foo isActive />.
Even if it's always possible to write <Foo isActive={true} />, it's less webby.

from react-dsfr.

I get the following error:

src/SideMenu.tsx:60:85 - error TS2345: Argument of type '{ "fr-sidemenu__item--active": boolean; }' is not assignable to parameter of type 'FrCxArg'.
  Object literal may only specify known properties, and '"fr-sidemenu__item--active"' does not exist in type 'Partial<Record<FrClassName, boolean | null | undefined>> | readonly FrCxArg[]'.

60                                 <li key={i} className={fr.cx("fr-sidemenu__item", { "fr-sidemenu__item--active": isActive })}>
                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[6:00:42 PM] Found 1 error. Watching for file changes.

Should I add somehow fr-sidemenu__item--active to the list of allowed classes listed in src/fr/generatedFromCss/classNames.ts?

from react-dsfr.

https://filedn.com/lYPEPucNMheV19aDu23lK0Q/Etalab/Screen%20Recording%202023-03-15%20at%2018.27.26.mov

from react-dsfr.

I just can't manage to make the Vite example work without having TS cursing me 😕

Here is a PR that shows the example implementation:
gary-van-woerkens#1

from react-dsfr.

SideMenu component has been merged. Closing the issue.
Thank you for your help guys!

from react-dsfr.