Enable SideMenu sub menu to be links

codegouvfr · Jul 9, 2023 · dfc5f64 · dfc5f64
1 parent cbafdb0
commit dfc5f64
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/src/SideMenu.tsx b/src/SideMenu.tsx
@@ -42,6 +42,7 @@ export namespace SideMenuProps {
             items: Item[];
             /** Default: false */
             expandedByDefault?: boolean;
+            linkProps?: RegisteredLinkProps;
         };
     }
 }
@@ -134,23 +135,34 @@ export const SideMenu = memo(
                                         >
                                             {"items" in item ? (
                                                 <>
-                                                    <button
-                                                        aria-expanded={
-                                                            item.expandedByDefault ?? false
-                                                                ? "true"
-                                                                : "false"
-                                                        }
-                                                        aria-controls={itemId}
-                                                        {...(item.isActive && {
-                                                            ["aria-current"]: true
-                                                        })}
-                                                        className={cx(
-                                                            fr.cx("fr-sidemenu__btn"),
-                                                            classes.button
-                                                        )}
-                                                    >
-                                                        {item.text}
-                                                    </button>
+                                                    {(() => {
+                                                        const ComponentToUse =
+                                                            item.linkProps !== undefined
+                                                                ? Link
+                                                                : "button";
+
+                                                        // @ts-expect-error
+                                                        return (
+                                                            <ComponentToUse
+                                                                aria-expanded={
+                                                                    item.expandedByDefault ?? false
+                                                                        ? "true"
+                                                                        : "false"
+                                                                }
+                                                                aria-controls={itemId}
+                                                                {...(item.isActive && {
+                                                                    ["aria-current"]: true
+                                                                })}
+                                                                className={cx(
+                                                                    fr.cx("fr-sidemenu__btn"),
+                                                                    classes.button
+                                                                )}
+                                                                {...item.linkProps}
+                                                            >
+                                                                {item.text}
+                                                            </ComponentToUse>
+                                                        );
+                                                    })()}
                                                     <div
                                                         className={fr.cx("fr-collapse")}
                                                         id={itemId}

diff --git a/test/integration/cra/src/Home.tsx b/test/integration/cra/src/Home.tsx
@@ -3,7 +3,7 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 import { SideMenu } from "@codegouvfr/react-dsfr/SideMenu";
 import { Table } from "@codegouvfr/react-dsfr/Table";
-import { ButtonsGroup } from '@codegouvfr/react-dsfr/ButtonsGroup';
+import { routes } from "./router";
 
 const sideMenuItems = [
     {
@@ -55,7 +55,8 @@ const sideMenuItems = [
         linkProps: { href: "#" }
     },
     {
-        text: "Niveau 1",
+        text: "Niveau 1 (with link)",
+        linkProps: routes.home().link,
         items: [
             {
                 text: "Accès direct niveau 2",
@@ -114,10 +115,10 @@ export function Home() {
 function TableExample() {
     return (
         <Table
-            caption = "Titre du tableau"
-            colorVariant = "green-emeraude"
-            headers = {["Titre", "Titre", "Titre", "Titre", "Titre"]}
-            data = {[
+            caption="Titre du tableau"
+            colorVariant="green-emeraude"
+            headers={["Titre", "Titre", "Titre", "Titre", "Titre"]}
+            data={[
                 ["Donnée", "Donnée", "Donnée", "Donnée", "Donnée"],
                 ["Donnée", "Donnée", "Donnée", "Donnée", "Donnée"],
                 ["Donnée", "Donnée", "Donnée", "Donnée", "Donnée"],