Skip to content

Commit 363bb42

Browse files
garronejgarronej
committed
1 parent d98c447 commit 363bb42

File tree

3 files changed

+149
-7
lines changed

3 files changed

+149
-7
lines changed

‎src/MainNavigation/MegaMenu.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,7 @@ export const MegaMenu = memo(
5858
{...rest}
5959
>
6060
<div className={fr.cx("fr-container", "fr-container--fluid", "fr-container-lg")}>
61-
<button
62-
className={fr.cx("fr-link--close", "fr-link")}
63-
aria-controls="mega-menu-775"
64-
>
61+
<button className={fr.cx("fr-link--close", "fr-link")} aria-controls={id}>
6562
{t("close")}
6663
</button>
6764
<div className={fr.cx("fr-grid-row", "fr-grid-row-lg--gutters")}>

‎src/MainNavigation/megaMenu.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!-- Mega menu sur les deux premiers éléments -->
2+
<nav class="fr-nav" id="header-navigation" role="navigation" aria-label="Menu principal">
3+
<ul class="fr-nav__list">
4+
<li class="fr-nav__item"> <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-775"
5+
aria-current="true">Entrée mega menu</button>
6+
<div class="fr-collapse fr-mega-menu" id="mega-menu-775" tabindex="-1">
7+
<div class="fr-container fr-container--fluid fr-container-lg"> <button class="fr-link--close fr-link"
8+
aria-controls="mega-menu-775">Fermer</button>
9+
<div class="fr-grid-row fr-grid-row-lg--gutters">
10+
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
11+
<div class="fr-mega-menu__leader">
12+
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
13+
<p class="fr-hidden fr-displayed-lg">Lorem [...] elit ut.</p> <a
14+
class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content"
15+
href="#">Voir toute la rubrique</a>
16+
</div>
17+
</div>
18+
<div class="fr-col-12 fr-col-lg-3">
19+
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
20+
catégorie</a> </h5>
21+
<ul class="fr-mega-menu__list">
22+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
23+
<li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Page active</a>
24+
</li>
25+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
26+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
27+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
28+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
29+
</ul>
30+
</div>
31+
<div class="fr-col-12 fr-col-lg-3">
32+
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
33+
catégorie</a> </h5>
34+
<ul class="fr-mega-menu__list">
35+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
36+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
37+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
38+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
39+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
40+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
41+
</ul>
42+
</div>
43+
<div class="fr-col-12 fr-col-lg-3">
44+
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
45+
catégorie</a> </h5>
46+
<ul class="fr-mega-menu__list">
47+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
48+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
49+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
50+
<li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de
51+
navigation</a> </li>
52+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
53+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
54+
</ul>
55+
</div>
56+
<div class="fr-col-12 fr-col-lg-3">
57+
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
58+
catégorie</a> </h5>
59+
<ul class="fr-mega-menu__list">
60+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
61+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
62+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
63+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
64+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
65+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
66+
</ul>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</li>
72+
<li class="fr-nav__item"> <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-777">Entrée
73+
mega menu</button>
74+
<div class="fr-collapse fr-mega-menu" id="mega-menu-777" tabindex="-1">
75+
<div class="fr-container fr-container--fluid fr-container-lg"> <button class="fr-link--close fr-link"
76+
aria-controls="mega-menu-777">Fermer</button>
77+
<div class="fr-grid-row fr-grid-row-lg--gutters">
78+
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
79+
<div class="fr-mega-menu__leader">
80+
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
81+
<p class="fr-hidden fr-displayed-lg">Lorem [...] elit ut.</p> <a
82+
class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content"
83+
href="#">Voir toute la rubrique</a>
84+
</div>
85+
</div>
86+
<div class="fr-col-12 fr-col-lg-3">
87+
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
88+
catégorie</a> </h5>
89+
<ul class="fr-mega-menu__list">
90+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
91+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
92+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
93+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
94+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
95+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
96+
</ul>
97+
</div>
98+
<div class="fr-col-12 fr-col-lg-3">
99+
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
100+
catégorie</a> </h5>
101+
<ul class="fr-mega-menu__list">
102+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
103+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
104+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
105+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
106+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
107+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
108+
</ul>
109+
</div>
110+
<div class="fr-col-12 fr-col-lg-3">
111+
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
112+
catégorie</a> </h5>
113+
<ul class="fr-mega-menu__list">
114+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
115+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
116+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
117+
<li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de
118+
navigation</a> </li>
119+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
120+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
121+
</ul>
122+
</div>
123+
<div class="fr-col-12 fr-col-lg-3">
124+
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
125+
catégorie</a> </h5>
126+
<ul class="fr-mega-menu__list">
127+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
128+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
129+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
130+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
131+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
132+
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
133+
</ul>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
</li>
139+
<li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li>
140+
<li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li>
141+
</ul>
142+
</nav>

‎stories/MainNavigation.stories.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ export const DirectLinks = getStory({
6868
"target": "_self"
6969
}
7070
}
71-
]
71+
],
72+
"id": "story-direct-links"
7273
});
7374

7475
export const DropdownMenu = getStory({
@@ -183,7 +184,8 @@ export const DropdownMenu = getStory({
183184
"target": "_self"
184185
}
185186
}
186-
]
187+
],
188+
"id": "story-dropdown-menu"
187189
});
188190

189191
export const MegaMenu = getStory({
@@ -620,5 +622,6 @@ export const MegaMenu = getStory({
620622
"target": "_self"
621623
}
622624
}
623-
]
625+
],
626+
"id": "story-mega-menu"
624627
});

0 commit comments

Comments
 (0)