handle menu dropdown titled

assets/sass/_theme/design-system/header.sass

@@ -93,7 +93,7 @@ header#document-header
         @include media-breakpoint-up(desktop)
             padding-top: $header-nav-padding-y-desktop
             padding-bottom: $header-nav-padding-y-desktop
-        .container
+        > .container
             align-items: center
             display: flex
             flex-wrap: wrap

assets/sass/_theme/design-system/nav.sass

@@ -60,6 +60,8 @@
             &:hover,
             &:focus
                 text-decoration-color: $header-dropdown-color
+        .dropdown-menu-title
+            @include h2
 
     .nav-level-1
         display: flex
@@ -103,15 +105,27 @@
                 margin-top: $spacing0
         .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 
+                .dropdown-menu
+                    &:not(.dropdown-languages)
+                        inset: 100% 0 auto 0
+                        padding-left: 0
+                        padding-right: 0
+                        padding-bottom: $spacing2
+                    &:not(.is-titled)
+                        .nav-level-2
+                            @include container
+                            @include grid(4, desktop)
+                    &.is-titled
+                        .container
+                            display: flex
+                            gap: $grid-gutter
+                        .dropdown-menu-title
+                            width: col(5)
+                        .nav-level-2
+                            width: col(7)
+                            li
+                                margin-bottom: $spacing0
+            @else
                 position: relative
                 .dropdown-menu
                     margin-top: $header-nav-padding-y
@@ -172,6 +186,10 @@
                     display: block
         .dropdown-menu
             padding-left: 0
+        .is-titled
+            .container
+                padding-left: 0
+                padding-right: 0
         .nav-level-2
             > .has-children + li
                 margin-top: $spacing1

config.yaml

@@ -13,6 +13,8 @@ params:
     header: "/assets/images/logo.svg"
     footer: "/assets/images/logo.svg"
   menu:
+    dropdown:
+      titled: true
     i18n:
       display: true
   breadcrumb:

layouts/partials/commons/menu.html

-{{- $kind := .kind -}}
+{{ $kind := .kind }}
 {{ $items := .items }}
 {{ $context := .context }}
 {{ if $kind }}
@@ -7,7 +7,8 @@
 {{ end }}
 {{- $level := .level -}}
 {{- $stop := .stop -}}
-{{- $dropdown := .dropdown }}
+{{- $dropdown := .dropdown -}}
+{{- $dropdown_titled := (and site.Params.menu.dropdown.titled (eq $level 1)) -}}
 {{- $ulClass := "" -}}
 {{- if .class -}}
   {{- $ulClass = printf "%s " .class -}}
@@ -16,22 +17,27 @@
 <ul class="{{ $ulClass }}{{ if $level }}nav-level-{{ $level }}{{ end }}">
   {{ range $items -}}
     {{- $slug := urlize .title -}}
-    {{- $itemClass := "" -}}
-    {{- $linkClass := "" -}}
+    {{- $item_class := "" -}}
+    {{- $link_class := "" -}}
     {{- $attr := "" -}}
     {{- $attr_title := "" -}}
-    {{- $hasDropdown := false -}}
+    {{- $has_dropdown := false -}}
     {{ if eq $context.RelPermalink .target }}
-      {{ $linkClass = "active" }}
+      {{ $link_class = "active" }}
     {{ end }}
     {{ if eq $kind "social" }}
-      {{- $itemClass = printf .title | lower -}}
+      {{- $item_class = printf .title | lower -}}
     {{ end }}
     {{- if gt (len .children) 0 -}}
-      {{- $itemClass = printf "%shas-children" $itemClass -}}
+      {{- $item_class = printf "%shas-children" $item_class -}}
+      {{ range .children -}}
+        {{- if eq $context.RelPermalink .target }}
+          {{ $link_class = printf "$link_class %s" "has-children-active" }}
+        {{ end }}
+      {{ end -}}
     {{- end -}}
     {{- if and (gt (len .children) 0) $dropdown (eq $level 1) -}}
-      {{- $hasDropdown = true -}}
+      {{- $has_dropdown = true -}}
       {{- $attr = printf "id=\"dropdown-%s\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\"" $slug -}}
     {{- end -}}
     {{- if and (hasPrefix .target "http") (eq .kind "url") -}}
@@ -39,16 +45,20 @@
       {{- $attr_title = printf "title=\"%s - %s\"" .title $extern_link -}}
     {{- end -}}
     {{- if or (ne $stop 1) (and (eq $stop 1) (ne .kind "blank")) -}}
-    <li{{ if ne $itemClass ""}} class="{{ $itemClass }}"{{ end }}>
+    <li{{ if ne $item_class ""}} class="{{ $item_class }}"{{ end }}>
       {{- if ne .kind "blank" -}}
-        <a href="{{ .target }}"{{ if ne $linkClass ""}} class="{{ $linkClass }}"{{ end }} {{ safeHTMLAttr $attr }} {{ safeHTMLAttr $attr_title }}>{{ .title }}</a>
+        <a href="{{ .target }}"{{ if ne $link_class ""}} class="{{ $link_class }}"{{ end }} {{ safeHTMLAttr $attr }} {{ safeHTMLAttr $attr_title }}>{{ .title }}</a>
       {{- else -}}
-        <span class="{{ if ne $linkClass ""}} {{ $linkClass }}{{ end }}{{ if gt .level 1 }} disabled{{ end }}" {{ safeHTMLAttr $attr }}>{{ .title }}</span>
+        <span class="{{ if ne $link_class ""}} {{ $link_class }}{{ end }}{{ if gt .level 1 }} disabled{{ end }}" {{ safeHTMLAttr $attr }}>{{ .title }}</span>
       {{- end -}}
       {{- if ne $stop $level -}}
-        {{- if $hasDropdown }}
-          <div class="dropdown-menu" aria-labelledby="dropdown-{{ $slug }}">
-        {{- end -}}
+        {{- if $has_dropdown }}
+          <div class="dropdown-menu {{ if $dropdown_titled }}is-titled{{ end }}" aria-labelledby="dropdown-{{ $slug }}">
+            {{- if $dropdown_titled }}
+              <div class="container">
+                <a href="{{ .target }}" class="dropdown-menu-title">{{ .title }}</a>
+            {{ end -}}
+          {{- end -}}
         {{- if gt (len .children) 0 -}}
           {{- $nextLevel := add $level 1 -}}
           {{- partial "commons/menu.html"
@@ -58,8 +68,11 @@
                   "context" $context
                 ) -}}
         {{- end -}}
-        {{- if $hasDropdown -}}
-          </div>
+        {{- if $has_dropdown -}}
+              </div>
+          {{- if $dropdown_titled }}
+            </div>
+          {{- end -}}
         {{- end -}}
       {{- end -}}
     </li>