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,52 +13,52 @@
.secondary-nav {
letter-spacing: 0.02em;
font-size: 0.875rem;
font-weight: 600
font-weight: 600;
}
[dir="ltr"] .secondary-nav ul.menu {
margin-left: 0
[dir="ltr"] .secondary-nav__menu {
margin-left: 0;
}
[dir="rtl"] .secondary-nav ul.menu {
margin-right: 0
[dir="rtl"] .secondary-nav__menu {
margin-right: 0;
}
[dir="ltr"] .secondary-nav ul.menu {
margin-right: 0
[dir="ltr"] .secondary-nav__menu {
margin-right: 0;
}
[dir="rtl"] .secondary-nav ul.menu {
margin-left: 0
[dir="rtl"] .secondary-nav__menu {
margin-left: 0;
}
[dir="ltr"] .secondary-nav ul.menu {
padding-left: 0
[dir="ltr"] .secondary-nav__menu {
padding-left: 0;
}
[dir="rtl"] .secondary-nav ul.menu {
padding-right: 0
[dir="rtl"] .secondary-nav__menu {
padding-right: 0;
}
[dir="ltr"] .secondary-nav ul.menu {
padding-right: 0
[dir="ltr"] .secondary-nav__menu {
padding-right: 0;
}
[dir="rtl"] .secondary-nav ul.menu {
padding-left: 0
[dir="rtl"] .secondary-nav__menu {
padding-left: 0;
}
.secondary-nav ul.menu {
.secondary-nav__menu {
display: flex;
align-items: center;
margin-top: 0;
margin-bottom: 0;
padding-top: 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
* don't want text to wrap unless it goes over a
* certain arbitrary width.
......@@ -68,31 +68,29 @@
width: -webkit-max-content;
width: max-content;
max-width: 12.5rem
}
}
[dir="ltr"] .secondary-nav ul.menu li:not(:last-child) {
margin-right: 1.6875rem
[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
margin-right: 1.6875rem;
}
[dir="rtl"] .secondary-nav ul.menu li:not(:last-child) {
margin-left: 1.6875rem
[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
margin-left: 1.6875rem;
}
.secondary-nav ul.menu a:not(.button--primary) {
.secondary-nav__menu-link {
position: relative;
display: inline-flex;
align-items: center;
height: 2.25rem;
text-decoration: none;
color: inherit
}
}
.secondary-nav ul.menu a:not(.button--primary):after {
.secondary-nav__menu-link:after {
position: absolute;
/* stylelint-disable csstools/use-logical */
bottom: 0;
left: 0;
/* stylelint-enable csstools/use-logical */
width: 100%;
height: 0;
content: "";
......@@ -103,51 +101,35 @@
border-top: solid 2px currentColor;
}
.secondary-nav ul.menu a:not(.button--primary):hover:after {
.secondary-nav__menu-link:hover:after {
transform: translateY(0);
opacity: 0.8;
}
@media (min-width: 75rem) {
[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 {
margin-right: 1.125rem
margin-right: 1.125rem;
}
[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 {
padding-right: 2.25rem
padding-right: 2.25rem;
}
body:not(.is-always-mobile-nav) .secondary-nav {
position: relative;
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 {
left: 0
left: 0;
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {
right: 0
right: 0;
}
body:not(.is-always-mobile-nav) .secondary-nav:before {
......@@ -160,11 +142,27 @@
background-color: #d7e1e8;
}
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) {
margin-right: 2.25rem
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
margin-right: 2.25rem;
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) {
margin-left: 2.25rem
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
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,8 +9,9 @@
letter-spacing: 0.02em;
font-size: var(--font-size-s);
font-weight: 600;
}
& ul.menu {
.secondary-nav__menu {
display: flex;
align-items: center;
margin-block: 0;
......@@ -20,8 +21,9 @@
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
& li {
.secondary-nav__menu-item {
/* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a
* certain arbitrary width.
......@@ -34,9 +36,9 @@
&:not(:last-child) {
margin-inline-end: var(--sp1-5);
}
}
}
& a:not(.button--primary) {
.secondary-nav__menu-link {
position: relative;
display: inline-flex;
align-items: center;
......@@ -46,10 +48,8 @@
&:after {
position: absolute;
/* stylelint-disable csstools/use-logical */
bottom: 0;
left: 0;
/* stylelint-enable csstools/use-logical */
width: 100%;
height: 0;
content: "";
......@@ -66,8 +66,6 @@
opacity: 0.8;
}
}
}
}
}
body:not(.is-always-mobile-nav) {
......@@ -78,7 +76,23 @@ body:not(.is-always-mobile-nav) {
margin-inline-start: var(--sp);
padding-inline-start: var(--sp2);
& .menu__link {
&:before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
width: 2px;
height: var(--sp2);
content: "";
transform: translateY(-50%);
background-color: var(--color--gray-70);
}
}
& .secondary-nav__menu-item:not(:last-child) {
margin-inline-end: var(--sp2);
}
& .secondary-nav__menu-link {
&:focus {
position: relative;
outline: 0;
......@@ -96,21 +110,5 @@ body:not(.is-always-mobile-nav) {
}
}
}
&:before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
width: 2px;
height: var(--sp2);
content: "";
transform: translateY(-50%);
background-color: var(--color--gray-70);
}
& ul.menu li:not(:last-child) {
margin-inline-end: var(--sp2);
}
}
}
}
......@@ -130,6 +130,9 @@ function olivero_preprocess_block(&$variables) {
$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') {
// Attaching library for search block if present at secondary menu
// region.
......@@ -158,7 +161,7 @@ function olivero_preprocess_block(&$variables) {
* Implements hook_theme_suggestions_HOOK_alter() for menu.
*/
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'];
}
}
......
{#
/**
* @file
* Olivero's theme implementation for the main menu.
* Olivero's theme implementation for the menus in the primary_menu region.
*
* Available variables:
* - 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