Unverified Commit a6f06716 authored by lauriii's avatar lauriii
Browse files

Issue #3182200 by andy-blum, kiran.kadam911, mherchel, tushar_sachdeva: Follow...

Issue #3182200 by andy-blum, kiran.kadam911, mherchel, tushar_sachdeva: Follow proper BEM syntax within secondary navigation menu
parent f429abac
...@@ -13,141 +13,123 @@ ...@@ -13,141 +13,123 @@
.secondary-nav { .secondary-nav {
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600 font-weight: 600;
} }
[dir="ltr"] .secondary-nav ul.menu { [dir="ltr"] .secondary-nav__menu {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .secondary-nav ul.menu { [dir="rtl"] .secondary-nav__menu {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .secondary-nav ul.menu { [dir="ltr"] .secondary-nav__menu {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .secondary-nav ul.menu { [dir="rtl"] .secondary-nav__menu {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .secondary-nav ul.menu { [dir="ltr"] .secondary-nav__menu {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .secondary-nav ul.menu { [dir="rtl"] .secondary-nav__menu {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .secondary-nav ul.menu { [dir="ltr"] .secondary-nav__menu {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .secondary-nav ul.menu { [dir="rtl"] .secondary-nav__menu {
padding-left: 0 padding-left: 0;
} }
.secondary-nav ul.menu { .secondary-nav__menu {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
list-style: none list-style: none;
} }
.secondary-nav ul.menu li { .secondary-nav__menu-item {
/* Parent element is set to flex-basis: 0. We /* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a * don't want text to wrap unless it goes over a
* certain arbitrary width. * certain arbitrary width.
*/ */
/* @todo should this be scoped to desktop nav? */ /* @todo should this be scoped to desktop nav? */
width: -webkit-max-content; width: -webkit-max-content;
width: max-content; width: max-content;
max-width: 12.5rem max-width: 12.5rem
} }
[dir="ltr"] .secondary-nav ul.menu li:not(:last-child) { [dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
margin-right: 1.6875rem margin-right: 1.6875rem;
} }
[dir="rtl"] .secondary-nav ul.menu li:not(:last-child) { [dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
margin-left: 1.6875rem margin-left: 1.6875rem;
} }
.secondary-nav ul.menu a:not(.button--primary) { .secondary-nav__menu-link {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 2.25rem; height: 2.25rem;
text-decoration: none; text-decoration: none;
color: inherit color: inherit
} }
.secondary-nav ul.menu a:not(.button--primary):after { .secondary-nav__menu-link:after {
position: absolute; position: absolute;
/* stylelint-disable csstools/use-logical */ bottom: 0;
bottom: 0; left: 0;
left: 0; width: 100%;
/* stylelint-enable csstools/use-logical */ height: 0;
width: 100%; content: "";
height: 0; transition: opacity 0.2s, transform 0.2s;
content: ""; transform: translateY(0.3125rem);
transition: opacity 0.2s, transform 0.2s; opacity: 0;
transform: translateY(0.3125rem); /* Intentionally not using CSS logical properties. */
opacity: 0; border-top: solid 2px currentColor;
/* Intentionally not using CSS logical properties. */ }
border-top: solid 2px currentColor;
}
.secondary-nav ul.menu a:not(.button--primary):hover:after { .secondary-nav__menu-link:hover:after {
transform: translateY(0); transform: translateY(0);
opacity: 0.8; opacity: 0.8;
} }
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav { [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
margin-left: 1.125rem margin-left: 1.125rem;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav { [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
margin-right: 1.125rem margin-right: 1.125rem;
} }
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav { [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
padding-left: 2.25rem padding-left: 2.25rem;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav { [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
padding-right: 2.25rem padding-right: 2.25rem;
} }
body:not(.is-always-mobile-nav) .secondary-nav { body:not(.is-always-mobile-nav) .secondary-nav {
position: relative; position: relative;
display: flex display: flex
} }
body:not(.is-always-mobile-nav) .secondary-nav .menu__link:focus {
position: relative;
outline: 0
}
body:not(.is-always-mobile-nav) .secondary-nav .menu__link:focus:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + 1.125rem);
height: 3.375rem;
content: "";
transform: translate(-50%, -50%);
border: solid 2px #2494db;
border-radius: 0.25rem;
}
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before { [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {
left: 0 left: 0;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before { [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {
right: 0 right: 0;
} }
body:not(.is-always-mobile-nav) .secondary-nav:before { body:not(.is-always-mobile-nav) .secondary-nav:before {
...@@ -160,11 +142,27 @@ ...@@ -160,11 +142,27 @@
background-color: #d7e1e8; background-color: #d7e1e8;
} }
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) { [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
margin-right: 2.25rem margin-right: 2.25rem;
} }
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) { [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
margin-left: 2.25rem margin-left: 2.25rem;
} }
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
position: relative;
outline: 0
}
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + 1.125rem);
height: 3.375rem;
content: "";
transform: translate(-50%, -50%);
border: solid 2px #2494db;
border-radius: 0.25rem;
}
} }
...@@ -9,63 +9,61 @@ ...@@ -9,63 +9,61 @@
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-size: var(--font-size-s); font-size: var(--font-size-s);
font-weight: 600; font-weight: 600;
}
& ul.menu { .secondary-nav__menu {
display: flex; display: flex;
align-items: center; align-items: center;
margin-block: 0; margin-block: 0;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: 0; margin-inline-end: 0;
padding-block: 0; padding-block: 0;
padding-inline-start: 0; padding-inline-start: 0;
padding-inline-end: 0; padding-inline-end: 0;
list-style: none; list-style: none;
}
& li { .secondary-nav__menu-item {
/* Parent element is set to flex-basis: 0. We /* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a * don't want text to wrap unless it goes over a
* certain arbitrary width. * certain arbitrary width.
*/ */
/* @todo should this be scoped to desktop nav? */ /* @todo should this be scoped to desktop nav? */
width: max-content; width: max-content;
max-width: 200px; max-width: 200px;
&:not(:last-child) { &:not(:last-child) {
margin-inline-end: var(--sp1-5); margin-inline-end: var(--sp1-5);
} }
} }
& a:not(.button--primary) { .secondary-nav__menu-link {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: var(--sp2); height: var(--sp2);
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
&:after { &:after {
position: absolute; position: absolute;
/* stylelint-disable csstools/use-logical */ bottom: 0;
bottom: 0; left: 0;
left: 0; width: 100%;
/* stylelint-enable csstools/use-logical */ height: 0;
width: 100%; content: "";
height: 0; transition: opacity 0.2s, transform 0.2s;
content: ""; transform: translateY(5px);
transition: opacity 0.2s, transform 0.2s; opacity: 0;
transform: translateY(5px); /* Intentionally not using CSS logical properties. */
opacity: 0; border-top: solid 2px currentColor;
/* Intentionally not using CSS logical properties. */ }
border-top: solid 2px currentColor;
}
&:hover { &:hover {
&:after { &:after {
transform: translateY(0); transform: translateY(0);
opacity: 0.8; opacity: 0.8;
}
}
} }
} }
} }
...@@ -78,25 +76,6 @@ body:not(.is-always-mobile-nav) { ...@@ -78,25 +76,6 @@ body:not(.is-always-mobile-nav) {
margin-inline-start: var(--sp); margin-inline-start: var(--sp);
padding-inline-start: var(--sp2); padding-inline-start: var(--sp2);
& .menu__link {
&:focus {
position: relative;
outline: 0;
&:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--sp));
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--blue-50);
border-radius: 4px;
}
}
}
&:before { &:before {
position: absolute; position: absolute;
inset-block-start: 50%; inset-block-start: 50%;
...@@ -107,9 +86,28 @@ body:not(.is-always-mobile-nav) { ...@@ -107,9 +86,28 @@ body:not(.is-always-mobile-nav) {
transform: translateY(-50%); transform: translateY(-50%);
background-color: var(--color--gray-70); background-color: var(--color--gray-70);
} }
}
& .secondary-nav__menu-item:not(:last-child) {
margin-inline-end: var(--sp2);
}
& ul.menu li:not(:last-child) { & .secondary-nav__menu-link {
margin-inline-end: var(--sp2); &:focus {
position: relative;
outline: 0;
&:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--sp));
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--blue-50);
border-radius: 4px;
}
} }
} }
} }
......
...@@ -130,6 +130,9 @@ function olivero_preprocess_block(&$variables) { ...@@ -130,6 +130,9 @@ function olivero_preprocess_block(&$variables) {
$variables['#attached']['library'][] = 'olivero/search-narrow'; $variables['#attached']['library'][] = 'olivero/search-narrow';
} }
} }
elseif ($region === 'secondary_menu' && $variables['base_plugin_id'] === 'system_menu_block') {
$variables['content']['#attributes']['region'] = $region;
}
elseif ($region === 'secondary_menu' && $variables['base_plugin_id'] === 'search_form_block') { elseif ($region === 'secondary_menu' && $variables['base_plugin_id'] === 'search_form_block') {
// Attaching library for search block if present at secondary menu // Attaching library for search block if present at secondary menu
// region. // region.
...@@ -158,7 +161,7 @@ function olivero_preprocess_block(&$variables) { ...@@ -158,7 +161,7 @@ function olivero_preprocess_block(&$variables) {
* Implements hook_theme_suggestions_HOOK_alter() for menu. * Implements hook_theme_suggestions_HOOK_alter() for menu.
*/ */
function olivero_theme_suggestions_menu_alter(&$suggestions, array $variables) { function olivero_theme_suggestions_menu_alter(&$suggestions, array $variables) {
if (isset($variables['attributes']['region']) && $variables['attributes']['region'] === 'primary_menu') { if (isset($variables['attributes']['region'])) {
$suggestions[] = 'menu__' . $variables['attributes']['region']; $suggestions[] = 'menu__' . $variables['attributes']['region'];
} }
} }
......
{# {#
/** /**
* @file * @file
* Olivero's theme implementation for the main menu. * Olivero's theme implementation for the menus in the primary_menu region.
* *
* Available variables: * Available variables:
* - menu_name: The machine name of the menu. * - menu_name: The machine name of the menu.
......
{#
/**
* @file
* Olivero's theme implementation for the menus in the secondary_menu region.
*
* Available variables:
* - menu_name: The machine name of the menu.
* - items: A nested list of menu items. Each menu item contains:
* - attributes: HTML attributes for the menu item.
* - below: The menu item child items.
* - title: The menu link title.
* - url: The menu link url, instance of \Drupal\Core\Url
* - localized_options: Menu link localized options.
* - is_expanded: TRUE if the link has visible children within the current
* menu tree.
* - is_collapsed: TRUE if the link has children within the current menu tree
* that are not currently visible.
* - in_active_trail: TRUE if the link is in the active trail.
*
* @ingroup themeable
*/
#}
{% import _self as menus %}
{#
We call a macro which calls itself to render the full tree.
@see https://twig.symfony.com/doc/1.x/tags/macro.html
#}
{% set attributes = attributes.addClass('menu') %}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% set secondary_nav_level = 'secondary-nav__menu--level-' ~ (menu_level + 1) %}
{% import _self as menus %}
{% if items %}
<ul{{ attributes.addClass('secondary-nav__menu', secondary_nav_level) }}>
{% set attributes = attributes.removeClass(secondary_nav_level) %}
{% for item in items %}
{% if item.url.isRouted and item.url.routeName == '<nolink>' %}
{% set menu_item_type = 'nolink' %}
{% elseif item.url.isRouted and item.url.routeName == '<button>' %}
{% set menu_item_type = 'button' %}
{% else %}
{% set menu_item_type = 'link' %}
{% endif %}
{% set item_classes = [
'secondary-nav__menu-item',
'secondary-nav__menu-item--' ~ menu_item_type,
'secondary-nav__menu-item--level-' ~ (menu_level + 1),
item.in_active_trail ? 'secondary-nav__menu-item--active-trail',
item.below ? 'secondary-nav__menu-item--has-children',
]
%}
{% set link_classes = [
'secondary-nav__menu-link',
'secondary-nav__menu-link--' ~ menu_item_type,
'secondary-nav__menu-link--level-' ~ (menu_level + 1),
item.in_active_trail ? 'secondary-nav__menu-link--active-trail',
item.below ? 'secondary-nav__menu-link--has-children',
]
%}
<li{{ item.attributes.addClass(item_classes) }}>
{{ link(item.title, item.url, { 'class': link_classes }) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment