diff --git a/src/component/navigation/example/sample/navigation.ejs b/src/component/navigation/example/sample/navigation.ejs
index a29c382dd..d9a32e043 100755
--- a/src/component/navigation/example/sample/navigation.ejs
+++ b/src/component/navigation/example/sample/navigation.ejs
@@ -2,35 +2,38 @@
let navigation = locals.navigation || {};
const href = navigation.href || '#'
-const getLink = () => {
+const getLink = (icon, iconPlace) => {
const id = uniqueId('nav');
return {
type: 'link',
label: `accès direct ${id}`,
id: id,
- href: href
+ href: href,
+ icon: icon,
+ iconPlace: iconPlace
};
-
}
-const getSubLink = (active = false) => {
+const getSubLink = (active = false, icon = undefined, iconPlace = 'left') => {
const id = uniqueId('nav');
return {
label: `Lien de navigation ${id}`,
id: id,
href: href,
- active: active
+ active: active,
+ icon: icon,
+ iconPlace: iconPlace
}
}
const getItems = (active = false) => {
return [
getSubLink(),
- getSubLink(),
+ getSubLink(false, 'arrow-right-line', 'right'),
getSubLink(active),
getSubLink(),
getSubLink(),
- getSubLink(),
+ getSubLink(false, 'arrow-left-line'),
getSubLink(),
getSubLink()
];
@@ -47,12 +50,14 @@ const getMenu = (active = false) => {
}
}
-const getCategory = (active = false) => {
+const getCategory = (active = false, icon = undefined, iconPlace = 'left') => {
return {
id: uniqueId('category'),
label: 'Nom de catégorie',
href: href,
- items: getItems(active)
+ items: getItems(active),
+ icon: icon,
+ iconPlace: iconPlace
};
}
@@ -76,9 +81,9 @@ const getMega = (active = false, leader = false) => {
}}),
categories: [
getCategory(),
- getCategory(),
+ getCategory(false, 'arrow-left-line'),
getCategory(true),
- getCategory()
+ getCategory(false,'arrow-right-line', 'right')
]
}
}
@@ -90,10 +95,10 @@ let data = {
[
getMenu(),
getMega(),
- getLink(),
+ getLink('arrow-left-line'),
getMenu(true),
getMega(false, true),
- getLink(),
+ getLink('arrow-right-line', 'right'),
getMega(true, false),
getMenu()
]
diff --git a/src/component/navigation/index.scss b/src/component/navigation/index.scss
index c80ea3754..32b9f75cd 100644
--- a/src/component/navigation/index.scss
+++ b/src/component/navigation/index.scss
@@ -4,5 +4,6 @@
////
@import '../link/index';
+@import '../button/index';
@import '../../core/index';
diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss
index 3fcd91f06..1e9bbfd31 100644
--- a/src/component/navigation/style/module/_default.scss
+++ b/src/component/navigation/style/module/_default.scss
@@ -47,17 +47,15 @@
min-height: spacing.space(14v);
font-weight: normal;
- // @include z-index(auto);
-
@include selector.current {
- @include before {
- @include absolute(auto, null, 0, 0, 100%, 2px);
- @include margin-top(0);
-
- @include preference.forced-colors {
- background-color: highlight;
- @include height(1v);
- }
+ background-repeat: no-repeat;
+ background-position: 0 100%;
+ background-size: #{spacing.space(100% 0.5v)};
+
+ @include preference.forced-colors {
+ background-image: linear-gradient(0deg, highlight, highlight);
+ background-size: #{spacing.space(100% 1v)};
+ forced-color-adjust: none;
}
}
}
@@ -82,6 +80,18 @@
@include min-height(auto, lg);
}
+ #{ns(nav__btn)} {
+ @include icon(arrow-down-s-line, sm, after) {
+ @include margin-left(2v);
+ @include margin-right(0);
+ transition: transform 0.3s;
+
+ @include preference.forced-colors {
+ background-color: buttontext;
+ }
+ }
+ }
+
@include respond-from(lg) {
position: initial;
@include before(none);
@@ -95,6 +105,7 @@
&__link,
&__btn {
+ @include nest-btn(sm, left, null, null, false);
@include size(100%);
@include padding(3v 4v);
@include text-style(md);
@@ -108,14 +119,14 @@
@include selector.current {
position: relative;
- @include before('', block) {
- @include absolute(50%, null, null, 0, 2px, 6v);
- @include margin-top(-3v);
-
- @include preference.forced-colors {
- background-color: highlight;
- @include width(1v);
- }
+ background-repeat: no-repeat;
+ background-position: #{spacing.space(0 3v)};
+ background-size: #{spacing.space(2px calc(100% - 6v))};
+
+ @include preference.forced-colors {
+ background-image: linear-gradient(0deg, highlight, highlight);
+ background-size: #{spacing.space(1v calc(100% - 6v))};
+ forced-color-adjust: none;
}
}
}
@@ -129,6 +140,12 @@
cursor: default;
}
}
+
+ @include preference.forced-colors {
+ &[href] {
+ color: linktext;
+ }
+ }
}
&__btn {
@@ -136,16 +153,9 @@
flex-direction: row;
@include padding(4v 3v 4v 4v, lg);
- @include icon(arrow-down-s-line, sm, after) {
- @include margin-left(2v);
- @include margin-right(0);
- transition: transform 0.3s;
-
- @include preference.reduce-motion {
- transition: none;
- }
+ @include preference.forced-colors {
+ color: buttontext;
}
- @include icon-forced-color(buttontext, true, after);
@include respond-from(lg) {
justify-content: flex-start;
diff --git a/src/component/navigation/style/module/_mega-menu.scss b/src/component/navigation/style/module/_mega-menu.scss
index f51f508c0..6c8671057 100644
--- a/src/component/navigation/style/module/_mega-menu.scss
+++ b/src/component/navigation/style/module/_mega-menu.scss
@@ -64,6 +64,10 @@
&__category {
@include font-weight(bold);
+
+ @include preference.forced-colors {
+ border-bottom: 1px solid;
+ }
}
&__list {
diff --git a/src/component/navigation/style/scheme/_default.scss b/src/component/navigation/style/scheme/_default.scss
index 13fe9c0e0..243f7d16d 100644
--- a/src/component/navigation/style/scheme/_default.scss
+++ b/src/component/navigation/style/scheme/_default.scss
@@ -14,9 +14,7 @@
@include selector.current {
@include color.text(active blue-france, (legacy: $legacy));
- @include before {
- @include color.background(active blue-france, (legacy: $legacy));
- }
+ @include color.background-image(active blue-france, (legacy:$legacy));
}
}
diff --git a/src/component/navigation/template/ejs/link.ejs b/src/component/navigation/template/ejs/link.ejs
index 6a05c67fd..d4c7d4fda 100644
--- a/src/component/navigation/template/ejs/link.ejs
+++ b/src/component/navigation/template/ejs/link.ejs
@@ -7,6 +7,14 @@
* link.href (string, required) : url du lien
+* link.icon (string, optional) : icone du lien
+
+* link.iconPlace (string, optional) : emplacement de l'icone
+ si non défini alors que le paramètre icon est défini, bouton avec icone seule, sans libellé
+ valeurs :
+ * left : icone à gauche du libellé
+ * right : icone à droite du libellé
+
* link.blank (boolean, optional) [default: false] : si true, target '_blank'
* link.active (boolean, optional) : si true l'élément est actif
@@ -17,6 +25,23 @@
<%
let link = locals.link || {};
+const classes = link.classes || [];
+classes.push(prefix + '-nav__link');
+
+if (link.icon !== undefined) classes.push(`${prefix}-icon-${link.icon}`);
+
+if (link.iconPlace !== undefined) {
+ switch (link.iconPlace) {
+ case 'left':
+ classes.push(`${prefix}-link--icon-left`);
+ break;
+
+ case 'right':
+ classes.push(`${prefix}-link--icon-right`);
+ break;
+ }
+}
+
let attrs = {
href: link.href,
id: link.id
@@ -26,4 +51,4 @@ if (link.blank) attrs = {...targetBlankData(), ...attrs};
if (link.active) attrs['aria-current'] = link.isPage ? 'page' : 'true';
%>
- ><%- link.label %>
+ <%- includeAttrs(attrs); %> ><%- link.label %>