Skip to content

Commit f5af770

Browse files
desoindxgarronej
andauthored
feat: Allow sidemenu items to be open by default (#126)
* feat: Allow sidemenu items to be open by default * Update src/SideMenu.tsx Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com> Signed-off-by: Xavier Desoindre <xavier.desoindre@hotmail.fr> --------- Signed-off-by: Xavier Desoindre <xavier.desoindre@hotmail.fr> Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
1 parent 4ccf060 commit f5af770

File tree

2 files changed

+81
-2
lines changed

2 files changed

+81
-2
lines changed

src/SideMenu.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ export namespace SideMenuProps {
4040

4141
export type SubMenu = Common & {
4242
items: Item[];
43+
/** Default: false */
44+
expandedByDefault?: boolean;
4345
};
4446
}
4547
}
@@ -133,7 +135,11 @@ export const SideMenu = memo(
133135
{"items" in item ? (
134136
<>
135137
<button
136-
aria-expanded="false"
138+
aria-expanded={
139+
(item.expandedByDefault ?? false)
140+
? "true"
141+
: "false"
142+
}
137143
aria-controls={itemId}
138144
{...(item.isActive && {
139145
["aria-current"]: true

stories/SideMenu.stories.tsx

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const { meta, getStory } = getStoryFactory({
99
"description": `
1010
- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/menu-lateral)
1111
- [See DSFR demos](https://main--ds-gouv.netlify.app/example/component/sidemenu/)
12-
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Sidemenu.tsx)`,
12+
- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/SideMenu.tsx)`,
1313
"disabledProps": ["lang"],
1414
"argTypes": {
1515
"title": {
@@ -145,6 +145,79 @@ export const SideMenuWith2Levels = getStory({
145145
]
146146
});
147147

148+
export const SideMenuWith2LevelsExpendedByDefault = getStory({
149+
"title": "Titre de rubrique",
150+
"burgerMenuButtonText": "Dans cette rubrique",
151+
"items": [
152+
{
153+
"text": "Niveau 1",
154+
"items": [
155+
{
156+
"text": "Accès direct niveau 2",
157+
"linkProps": { "href": "#" }
158+
},
159+
{
160+
"text": "Accès direct niveau 2",
161+
"linkProps": { "href": "#" }
162+
},
163+
{
164+
"text": "Accès direct niveau 2",
165+
"linkProps": { "href": "#" }
166+
}
167+
]
168+
},
169+
{
170+
"isActive": true,
171+
"expandedByDefault": true,
172+
"text": "Entrée menu ouverte par défaut",
173+
"items": [
174+
{
175+
"text": "Accès direct niveau 2",
176+
"linkProps": { "href": "#" }
177+
},
178+
{
179+
"isActive": true,
180+
"text": "Accès direct niveau 2",
181+
"linkProps": { "href": "#" }
182+
},
183+
{
184+
"text": "Accès direct niveau 2",
185+
"linkProps": { "href": "#" }
186+
},
187+
{
188+
"text": "Accès direct niveau 2",
189+
"linkProps": { "href": "#" }
190+
}
191+
]
192+
},
193+
{
194+
"text": "Accès direct",
195+
"linkProps": { "href": "#" }
196+
},
197+
{
198+
"text": "Accès direct",
199+
"linkProps": { "href": "#" }
200+
},
201+
{
202+
"text": "Niveau 1",
203+
"items": [
204+
{
205+
"text": "Accès direct niveau 2",
206+
"linkProps": { "href": "#" }
207+
},
208+
{
209+
"text": "Accès direct niveau 2",
210+
"linkProps": { "href": "#" }
211+
},
212+
{
213+
"text": "Accès direct niveau 2",
214+
"linkProps": { "href": "#" }
215+
}
216+
]
217+
}
218+
]
219+
});
220+
148221
export const SideMenuWith3Levels = getStory({
149222
"title": "Titre de rubrique",
150223
"burgerMenuButtonText": "Dans cette rubrique",

0 commit comments

Comments
 (0)