diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index cd09389983d66d010f32e8a76f253c7985312a0a..c0ccfb5855eb9f638237ce4ee08e59afe9ac342e 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -91,38 +91,68 @@
span
@include meta
+ .header-i18n
+ [role="button"]
+ text-transform: uppercase
+
@include media-breakpoint-up(desktop)
+ .nav-level-1
+ align-items: center
.nav-level-3
li
margin-top: $spacing0
- @if $header-dropdown-full
- .dropdown-menu
- inset: 100% 0 auto 0
- padding-left: 0
- padding-right: 0
- padding-bottom: $spacing2
- .nav-level-2
- @include container
- @include grid(4, desktop)
- @else
- .has-children
+ .has-children:not(.header-i18n) // avoid
+ @if $header-dropdown-full
+ .dropdown-menu:not(.dropdown-languages)
+ inset: 100% 0 auto 0
+ padding-left: 0
+ padding-right: 0
+ padding-bottom: $spacing2
+ .nav-level-2
+ @include container
+ @include grid(4, desktop)
+ @else
position: relative
+ .dropdown-menu
+ margin-top: $header-nav-padding-y
+ min-width: 400px
+ padding-left: $spacing1
+ padding-top: $spacing0
+ padding-right: $spacing1
+ right: 0
+ text-align: right
+ .nav-level-2
+ > li
+ > a
+ padding-bottom: half($spacing0)
+ padding-top: half($spacing0)
+ display: block
+ + li.has-children
+ margin-top: $spacing1
+
+ .header-i18n
+ position: relative
+ [role="button"]
+ @include icon-block(globe, after)
+ margin-left: half(-$spacing0)
.dropdown-menu
margin-top: $header-nav-padding-y
- min-width: 400px
padding-left: $spacing1
+ padding-bottom: $spacing0
padding-top: $spacing0
padding-right: $spacing1
right: 0
- text-align: right
- .nav-level-2
- > li
- > a
- padding-bottom: half($spacing0)
- padding-top: half($spacing0)
- display: block
- + li.has-children
- margin-top: $spacing1
+ li a
+ padding-bottom: half($spacing0)
+ padding-top: half($spacing0)
+ display: block
+ &.is-checked
+ display: flex
+ justify-content: space-between
+ align-items: center
+ gap: $spacing2
+ @include icon(caret, after, true)
+ transform: rotate(-14deg) skewX(-30deg)
@include media-breakpoint-down(desktop)
&.is-opened
@@ -156,15 +186,18 @@
padding-top: 0
[aria-expanded=true] + .dropdown-menu
display: block
+ // &.header-i18n
+ // [role="button"]
+ // justify-content: center
.dropdown-menu
padding-left: 0
-
.nav-level-2
> .has-children + li
margin-top: $spacing1
.nav-level-3
padding-top: 0
+
.share
display: flex
list-style: none
diff --git a/config.yaml b/config.yaml
index f2235d413cabc7309cb85ae511c7a9b701592f40..c267440178a403fbe2e5b189331ee5af8c9873a6 100644
--- a/config.yaml
+++ b/config.yaml
@@ -11,6 +11,9 @@ params:
logo:
header: "/assets/images/logo.svg"
footer: "/assets/images/logo.svg"
+ menu:
+ i18n:
+ display: true
breadcrumb:
position: hero-start # hero-start | hero-end | after-hero | none
summary:
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 62d09ccc7b1070257889c0aababfb0d785700748..a01d699370da236aa05c581b5ede83b418e944bd 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -48,6 +48,7 @@ commons:
accessibility:
main_content: Accéder au contenu principal
menu: Accéder au menu
+ menu_lang: Accéder au menu des langues
search: Accéder à la recherche
shortcut_navigation: Navigation d'accès rapide
transcription: Transcription
diff --git a/layouts/partials/commons/menu.html b/layouts/partials/commons/menu.html
index 3d1bb6762b5047af475dc42509d38c09fdffedf6..7d261310f7f788410b55d2e8c736b883629284ae 100644
--- a/layouts/partials/commons/menu.html
+++ b/layouts/partials/commons/menu.html
@@ -62,4 +62,8 @@
</li>
{{- end -}}
{{ end -}}
+
+ {{ if and (eq $kind "primary") (site.Params.menu.i18n.display) }}
+ {{ partial "header/i18n.html" . }}
+ {{ end }}
</ul>
diff --git a/layouts/partials/footer/i18n.html b/layouts/partials/footer/i18n.html
index 2419989bd94135de099090b87e98b0e82b0d01de..30bdbd9eb32aad226504ffeb9fc70e04215615f0 100644
--- a/layouts/partials/footer/i18n.html
+++ b/layouts/partials/footer/i18n.html
@@ -15,7 +15,7 @@
{{ $url = .Permalink }}
{{ end }}
{{ end }}
- <li><a href="{{ $url }}">{{ $siteLang.LanguageName }}</a></li>
+ <li><a href="{{ $url }}" lang="{{ $siteLang }}" hreflang="{{ $siteLang }}">{{ $siteLang.LanguageName }}</a></li>
{{ end }}
</ul>
{{ end }}
diff --git a/layouts/partials/header/i18n.html b/layouts/partials/header/i18n.html
new file mode 100644
index 0000000000000000000000000000000000000000..1a0b2c29c749f5602de6ce2ecf9028480ccbe3ab
--- /dev/null
+++ b/layouts/partials/header/i18n.html
@@ -0,0 +1,43 @@
+{{ $page := . }}
+{{ $pageWithTranslations := $page.Translations | append $page }}
+{{ $siteLang := "" }}
+{{ $url := "" }}
+{{ if gt (len site.Languages) 1 }}
+<li class="header-i18n has-children">
+ {{ with site.Languages }}
+ <span
+ role="button"
+ aria-haspopup="menu"
+ aria-expanded="false"
+ aria-label="{{ i18n "commons.accessibility.menu_lang" }}"
+ tabindex="0">
+ {{- site.Language -}}
+ </span>
+ <div class="dropdown-menu dropdown-languages">
+ <ul>
+ {{ range site.Languages }}
+ {{ $siteLang := . }}
+ {{ $url = printf "/%s/" .Lang }}
+ {{ range $pageWithTranslations }}
+ {{ if eq .Lang $siteLang.Lang }}
+ {{ $url = .Permalink }}
+ {{ end }}
+ {{ end }}
+ <li>
+ <a
+ href="{{ $url }}"
+ lang="{{ $siteLang }}"
+ hreflang="{{ $siteLang }}"
+ {{ if eq $siteLang site.Language }}
+ class="is-checked"
+ {{ end }}
+ >
+ {{- $siteLang.LanguageName -}}
+ </a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
+ {{ end }}
+</li>
+{{ end }}
\ No newline at end of file