Skip to content

Commit

Permalink
#261
Browse files Browse the repository at this point in the history
  • Loading branch information
@garronej
garronej committed Jun 3, 2024
1 parent d98c447 commit 363bb42
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 7 deletions.
5 changes: 1 addition & 4 deletions src/MainNavigation/MegaMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,7 @@ export const MegaMenu = memo(
{...rest}
>
<div className={fr.cx("fr-container", "fr-container--fluid", "fr-container-lg")}>
<button
className={fr.cx("fr-link--close", "fr-link")}
aria-controls="mega-menu-775"
>
<button className={fr.cx("fr-link--close", "fr-link")} aria-controls={id}>
{t("close")}
</button>
<div className={fr.cx("fr-grid-row", "fr-grid-row-lg--gutters")}>
Expand Down
142 changes: 142 additions & 0 deletions src/MainNavigation/megaMenu.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!-- Mega menu sur les deux premiers éléments -->
<nav class="fr-nav" id="header-navigation" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item"> <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-775"
aria-current="true">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-775" tabindex="-1">
<div class="fr-container fr-container--fluid fr-container-lg"> <button class="fr-link--close fr-link"
aria-controls="mega-menu-775">Fermer</button>
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-displayed-lg">Lorem [...] elit ut.</p> <a
class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content"
href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
catégorie</a> </h5>
<ul class="fr-mega-menu__list">
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Page active</a>
</li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
catégorie</a> </h5>
<ul class="fr-mega-menu__list">
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
catégorie</a> </h5>
<ul class="fr-mega-menu__list">
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de
navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
catégorie</a> </h5>
<ul class="fr-mega-menu__list">
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item"> <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-777">Entrée
mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-777" tabindex="-1">
<div class="fr-container fr-container--fluid fr-container-lg"> <button class="fr-link--close fr-link"
aria-controls="mega-menu-777">Fermer</button>
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-displayed-lg">Lorem [...] elit ut.</p> <a
class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content"
href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
catégorie</a> </h5>
<ul class="fr-mega-menu__list">
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
catégorie</a> </h5>
<ul class="fr-mega-menu__list">
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
catégorie</a> </h5>
<ul class="fr-mega-menu__list">
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de
navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category"> <a class="fr-nav__link" href="#" target="_self">Nom de
catégorie</a> </h5>
<ul class="fr-mega-menu__list">
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
<li> <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a> </li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li>
<li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li>
</ul>
</nav>
9 changes: 6 additions & 3 deletions stories/MainNavigation.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ export const DirectLinks = getStory({
"target": "_self"
}
}
]
],
"id": "story-direct-links"
});

export const DropdownMenu = getStory({
Expand Down Expand Up @@ -183,7 +184,8 @@ export const DropdownMenu = getStory({
"target": "_self"
}
}
]
],
"id": "story-dropdown-menu"
});

export const MegaMenu = getStory({
Expand Down Expand Up @@ -620,5 +622,6 @@ export const MegaMenu = getStory({
"target": "_self"
}
}
]
],
"id": "story-mega-menu"
});

0 comments on commit 363bb42

Please sign in to comment.