Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajout d'un "top menu" au header #702

Merged
merged 13 commits into from
Oct 25, 2024
Merged

Ajout d'un "top menu" au header #702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ab9318c
wip: add top menu with options
Olivia206 Oct 25, 2024
106ea4b
fixed default style and config + added accessible titles to header links
Olivia206 Oct 25, 2024
350ab2c
remove button padding when it is in upper menu
Olivia206 Oct 25, 2024
ed5260a
change gap for large screens
Olivia206 Oct 25, 2024
fb05c71
baseline instead of center alignment
Olivia206 Oct 25, 2024
76ad605
fix variables
Olivia206 Oct 25, 2024
7d91e34
top menu in dropdown for mobile
Olivia206 Oct 25, 2024
a172df9
removed unused translations
Olivia206 Oct 25, 2024
c492061
theme
Olivia206 Oct 25, 2024
f612f50
better padding for mobile
Olivia206 Oct 25, 2024
f15b630
removed external links icon
Olivia206 Oct 25, 2024
19101b8
changed 'top' name for 'upper'
Olivia206 Oct 25, 2024
b87ec29
changed 'navigation' for 'menu'
Olivia206 Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions assets/sass/_theme/configuration/components.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ $header-height: 87px !default
$header-height-desktop: 96px !default
$header-sticky-invert-logo: false !default
$header-border-bottom-width: 1px !default
$header-upper-menu-border-bottom-width: $header-border-bottom-width !default
$header-upper-menu-padding-y: $header-nav-padding-y !default
$header-upper-menu-padding-y-desktop: $header-upper-menu-padding-y !default

// Navs
$body-overlay-color: rgba(0, 0, 0, 0.3) !default
Expand Down
34 changes: 31 additions & 3 deletions assets/sass/_theme/design-system/header.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ header#document-header
html.has-menu-opened &
nav
padding-bottom: 0
.has-upper-menu
.menu .logo
display: none

// TODO : Est-ce au bon endroit ?
body
Expand Down Expand Up @@ -90,21 +93,46 @@ body

header#document-header
nav
padding-top: $header-nav-padding-y
padding-bottom: $header-nav-padding-y
padding-top: $header-nav-padding-y
&.upper-menu
padding-bottom: $header-upper-menu-padding-y
padding-top: $header-upper-menu-padding-y
@include media-breakpoint-up(desktop)
padding-top: $header-nav-padding-y-desktop
padding-bottom: $header-nav-padding-y-desktop
padding-top: $header-nav-padding-y-desktop
&.upper-menu
padding-bottom: $header-upper-menu-padding-y-desktop
padding-top: $header-upper-menu-padding-y-desktop
> .container
align-items: center
display: flex
flex-wrap: wrap
justify-content: space-between
// Upper menu : in dropdown in mobile | before logo/menu in desktop
&.has-upper-menu
@include media-breakpoint-up(desktop)
.menu
width: 100%
display: flex
flex-wrap: wrap
justify-content: space-between
> .logo
display: none
@include media-breakpoint-down(desktop)
.menu.is-opened
display: flex
flex-direction: column
margin-left: var(--grid-gutter-negative)
margin-right: var(--grid-gutter-negative)
.nav-level-1:first-of-type
margin-left: var(--grid-gutter)
margin-right: var(--grid-gutter)
.header-button
@include button-reset
display: none
border: 0
color: inherit
display: none
padding: 0
position: relative
text-transform: uppercase
Expand Down
54 changes: 54 additions & 0 deletions assets/sass/_theme/design-system/nav.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,60 @@
.nav-level-3
padding-top: 0

// Top menu
.upper-menu
@include list-reset
@include meta
align-items: baseline
display: flex
justify-content: space-between
gap: $spacing-3
order: -1
position: relative
width: 100%
@include media-breakpoint-up(desktop)
justify-content: center
margin-top: -($header-nav-padding-y)
margin-bottom: $spacing-5
gap: $spacing-5
&::after
content: ''
border-bottom: $header-upper-menu-border-bottom-width solid var(--color-border)
bottom: -1px
left: var(--grid-gutter-negative)
position: absolute
right: var(--grid-gutter-negative)
@include media-breakpoint-down(desktop)
border-bottom: $header-upper-menu-border-bottom-width solid var(--color-border)
border-top: $header-upper-menu-border-bottom-width solid var(--color-border)
overflow-x: auto
scrollbar-width: none
&::-webkit-scrollbar
display: none
&.nav-level-1
a
text-decoration: none
li
line-height: 1
border: none
a,
span,
button
padding: 0
white-space: nowrap
padding-bottom: $spacing-2
padding-top: $spacing-2
&.active
box-shadow: inset 0 -4px 0 0 var(--color-border)
@include media-breakpoint-up(desktop)
padding-left: 0
padding-right: 0
padding-top: calc(#{$header-nav-padding-y} / 2)
padding-bottom: $header-nav-padding-y
@include media-breakpoint-down(desktop)
padding-left: var(--grid-gutter)
padding-right: var(--grid-gutter)

.share
display: flex
list-style: none
Expand Down
5 changes: 3 additions & 2 deletions assets/sass/_theme/design-system/search.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,5 +232,6 @@ footer#document-footer .footer-search
.menu .nav-level-1 > li .pagefind-ui__toggle span
display: inline
@include media-breakpoint-up(desktop)
.menu .nav-level-1 > li .pagefind-ui__toggle.toggle-icon span
display: none
.nav-level-1
> li .pagefind-ui__toggle.toggle-icon span
display: none
2 changes: 1 addition & 1 deletion config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ params:
position: hero # hero | content
search:
active: false
position: menu # menu | fixed | footer
position: menu # menu | upper-menu | fixed | footer
appearance: icon # icon | text | both
home:
toc:
Expand Down
19 changes: 10 additions & 9 deletions layouts/partials/commons/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
{{ end }}
{{- $level := .level -}}
{{- $stop := .stop -}}
{{- $ignore_externals := .ignore_externals | default false -}}
{{- $dropdown := .dropdown -}}
{{- $dropdown_titled := (and site.Params.menu.dropdown.linkToLevel1 (eq $level 1)) -}}
{{- $ulClass := "" -}}
Expand All @@ -20,7 +21,7 @@
{{- $item_class := "" -}}
{{- $link_class := "" -}}
{{- $attr := "" -}}
{{- $attr_title := "" -}}
{{- $attr_title := printf "title=\"%s\"" .title -}}
{{- $has_dropdown := false -}}
{{ if eq $context.RelPermalink .target }}
{{ $link_class = "active" }}
Expand All @@ -41,7 +42,9 @@
{{- $attr = printf "id=\"dropdown-%s\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\"" $slug -}}
{{- end -}}
{{- if and (hasPrefix .target "http") (eq .kind "url") -}}
{{- $attr = " target=\"_blank\" rel=\"noreferrer\"" -}}
{{ if eq $ignore_externals false }}
{{- $attr = " target=\"_blank\" rel=\"noreferrer\"" -}}
{{ end }}
{{- $attr_title = printf "title=\"%s - %s\"" .title $extern_link -}}
{{- end -}}
{{- if or (ne $stop 1) (and (eq $stop 1) (ne .kind "blank")) -}}
Expand Down Expand Up @@ -79,14 +82,12 @@
{{- end -}}
{{ end -}}

{{ if and (eq $kind "primary") (site.Params.search.active) (eq site.Params.search.position "menu")}}
{{ if and (site.Params.search.active) (or (eq $kind "primary") (eq $kind "upper-menu")) (eq site.Params.search.position $kind) }}
<li class="nav-search">
{{ partial "header/search.html"
(dict
"position" "menu"
"context" .
)
}}
{{ partial "header/search.html" (dict
"position" $kind
"context" .
)}}
</li>
{{ end }}
{{ if and (eq $kind "primary") (site.Params.menu.i18n.display) }}
Expand Down
29 changes: 27 additions & 2 deletions layouts/partials/header/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,45 @@
{{ $primary := partial "GetMenu" "primary" }}
{{ $upper_menu := partial "GetMenu" "upper-menu" }}

<header id="document-header" role="banner">
<nav aria-label="{{ i18n "commons.menu.main" }}">
<div class="container">
<div class="container {{ if $upper_menu.items -}} has-upper-menu {{- end }}">
{{ partial "header/logo.html" }}
{{ if $primary.items }}
{{ partial "header/button.html" }}
<div class="menu" id="navigation">
{{ if $upper_menu.items }}
{{ partial "header/logo.html" }}
{{ end }}
{{ partial "commons/menu.html"
(dict
"kind" "primary"
"dropdown" true
"level" 1
"context" .
) }}
)}}
{{ if $upper_menu.items }}
{{ partial "commons/menu.html" (dict
"class" "upper-menu"
"context" .
"ignore_externals" true
"kind" "upper-menu"
"level" 1
"stop" 1
)}}
{{ end }}
</div>
{{ else }}
{{ if $upper_menu.items }}
{{ partial "commons/menu.html" (dict
"class" "upper-menu"
"context" .
"ignore_externals" true
"kind" "upper-menu"
"level" 1
"stop" 1
)}}
{{ end }}
{{ end }}
</div>
</nav>
Expand Down
Loading