mirror of
https://gitlab.unicamp.br/infimecc_drupal11_modules/structural_pages.git
synced 2026-05-04 18:20:40 -03:00
Refatora CSS e templates do menu estrutural
Reescreve structural-pages-menu.css com layout horizontal como padrão (análogo ao microsite-nav) e flyout lateral apenas em contexto sidebar. Extrai renderização de itens para structural-pages-menu-item.html.twig e adiciona link "Home" apontando para a URL do ancestral. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,13 +1,154 @@
|
||||
/**
|
||||
* Structural Pages Menu - Custom Flyout Styles
|
||||
* Ensures the nested menu items fly out to the right exactly like the Gavias theme reference menu.
|
||||
* Structural Pages Menu
|
||||
*
|
||||
* Layout padrão: horizontal (análogo ao .microsite-nav).
|
||||
* Override .sidebar: vertical com submenus em flyout lateral.
|
||||
*/
|
||||
|
||||
/* Wrapper do bloco --------------------------------------------------------- */
|
||||
|
||||
.block-structural-pages-menu {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Apply the gray background and padding directly to the nav so it remains styled even if detached by the sticky script */
|
||||
/* Itens: âncora para sub-menus absolutos ----------------------------------- */
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Lista de nível 1: horizontal --------------------------------------------- */
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__list--level-1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item--level-1:not(:last-child) {
|
||||
margin-inline-end: 36px;
|
||||
}
|
||||
|
||||
/* Links de nível 1 --------------------------------------------------------- */
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-block: 12px;
|
||||
text-decoration: none;
|
||||
color: hsl(201, 15%, 5%);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Underline animado no hover (padrão Olivero/microsite-nav) */
|
||||
.structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
transform: translateY(5px);
|
||||
opacity: 0;
|
||||
border-top: solid 2px currentColor;
|
||||
}
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link:hover::after,
|
||||
.structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link.is-active::after {
|
||||
transform: translateY(0);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link.is-active,
|
||||
.structural-pages-menu .structural-pages-menu__item--level-1.menu-item--active-trail > .structural-pages-menu__link {
|
||||
color: hsl(202, 79%, 50%);
|
||||
}
|
||||
|
||||
/* Indicador de subitem (chevron) ------------------------------------------- */
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item--has-children > .structural-pages-menu__link::before {
|
||||
content: " \203A";
|
||||
order: 1;
|
||||
margin-inline-start: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
line-height: 0.8;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item--has-children:hover > .structural-pages-menu__link::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Sub-menus: dropdown abaixo (contexto horizontal) ------------------------- */
|
||||
|
||||
.structural-pages-menu .sub-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
min-width: 200px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 999;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
|
||||
transform: translateY(6px);
|
||||
pointer-events: none;
|
||||
border-top: 2px solid hsl(202, 79%, 50%);
|
||||
list-style: none;
|
||||
padding: 4px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item:hover > .sub-menu,
|
||||
.structural-pages-menu .structural-pages-menu__item:focus-within > .sub-menu {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
/* Links dentro dos sub-menus ----------------------------------------------- */
|
||||
|
||||
.structural-pages-menu .sub-menu > li > a {
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: hsl(201, 15%, 5%);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.structural-pages-menu .sub-menu > li > a:hover {
|
||||
background-color: hsl(202, 79%, 95%);
|
||||
color: hsl(202, 79%, 35%);
|
||||
}
|
||||
|
||||
.structural-pages-menu .sub-menu .menu-item--active-trail > a,
|
||||
.structural-pages-menu .sub-menu .is-active {
|
||||
color: hsl(202, 79%, 50%);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Override: sidebar -------------------------------------------------------- */
|
||||
/*
|
||||
* Quando o menu está numa sidebar, volta ao layout vertical com
|
||||
* submenus em flyout lateral (comportamento original).
|
||||
*/
|
||||
|
||||
.sidebar .structural-pages-menu {
|
||||
padding: 30px;
|
||||
background-color: #f3f3f3;
|
||||
@@ -15,89 +156,66 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Remove the padding and background from the outer Drupal block wrapper to avoid double padding */
|
||||
.sidebar [id^="block-structuralpagesmenublock"] {
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Position relative on parent items to anchor the absolute sub-menu */
|
||||
.structural-pages-menu .structural-pages-menu__item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Hide sub-menus by default and position them to the right */
|
||||
.structural-pages-menu .sub-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
min-width: 260px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||||
z-index: 999;
|
||||
transition: all 0.25s ease-out;
|
||||
transform: translateY(10px);
|
||||
pointer-events: none;
|
||||
border-left: 2px solid var(--notech-theme-color, #db162f);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Show submenu on hover or focus */
|
||||
.structural-pages-menu .structural-pages-menu__item:hover>.sub-menu,
|
||||
.structural-pages-menu .structural-pages-menu__item:focus-within>.sub-menu {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
padding: 5px 30px !important;
|
||||
}
|
||||
|
||||
/* Add an indicator icon (arrow) to items that have children */
|
||||
.structural-pages-menu .structural-pages-menu__item--has-children>a::after {
|
||||
content: " \203A";
|
||||
float: right;
|
||||
font-family: monospace;
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
line-height: 0.8;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.structural-pages-menu .structural-pages-menu__item--has-children:hover>a::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Styles for the links inside the flyout menus */
|
||||
.structural-pages-menu .sub-menu>li>a {
|
||||
/* Lista de nível 1: vertical na sidebar */
|
||||
.sidebar .structural-pages-menu .structural-pages-menu__list--level-1 {
|
||||
display: block;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.sidebar .structural-pages-menu .structural-pages-menu__item--level-1:not(:last-child) {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
/* Links de nível 1 na sidebar */
|
||||
.sidebar .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link {
|
||||
display: block;
|
||||
padding-block: 6px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
transition: all 0.2s ease;
|
||||
background-color: transparent;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.structural-pages-menu .sub-menu>li:last-child>a {
|
||||
.sidebar .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Sub-menus: flyout à direita na sidebar */
|
||||
.sidebar .structural-pages-menu .sub-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
transform: translateY(10px);
|
||||
border-top: none;
|
||||
border-left: 2px solid var(--notech-theme-color, #db162f);
|
||||
min-width: 260px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar .structural-pages-menu .structural-pages-menu__item:hover > .sub-menu,
|
||||
.sidebar .structural-pages-menu .structural-pages-menu__item:focus-within > .sub-menu {
|
||||
transform: translateY(0);
|
||||
padding: 5px 30px;
|
||||
}
|
||||
|
||||
/* Links dos sub-menus na sidebar */
|
||||
.sidebar .structural-pages-menu .sub-menu > li > a {
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sidebar .structural-pages-menu .sub-menu > li:last-child > a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.structural-pages-menu .sub-menu>li>a:hover {
|
||||
.sidebar .structural-pages-menu .sub-menu > li > a:hover {
|
||||
color: var(--notech-theme-color, #db162f);
|
||||
background-color: #fcfcfc;
|
||||
padding-left: 25px;
|
||||
/* Subtle interactively indication */
|
||||
}
|
||||
|
||||
/* Ensure active trail items inside submenu remain highlighted */
|
||||
.structural-pages-menu .sub-menu .menu-item--active-trail>a,
|
||||
.structural-pages-menu .sub-menu .is-active {
|
||||
.sidebar .structural-pages-menu .sub-menu .menu-item--active-trail > a,
|
||||
.sidebar .structural-pages-menu .sub-menu .is-active {
|
||||
color: var(--notech-theme-color, #db162f);
|
||||
}
|
||||
}
|
||||
|
||||
39
templates/structural-pages-menu-item.html.twig
Normal file
39
templates/structural-pages-menu-item.html.twig
Normal file
@@ -0,0 +1,39 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Template for a single structural pages menu item (recursive).
|
||||
*
|
||||
* Available variables:
|
||||
* - item: Menu item array with keys:
|
||||
* - id: Node ID.
|
||||
* - title: Node title.
|
||||
* - url: Node URL string.
|
||||
* - is_redirect: Whether the link is a redirect.
|
||||
* - children: Array of child items.
|
||||
* - active_trail: Array of node IDs in the active trail.
|
||||
* - depth: Current depth level (integer).
|
||||
*/
|
||||
#}
|
||||
{% set is_active = item.id in active_trail %}
|
||||
{% set has_children = item.children is not empty %}
|
||||
{% set classes = [
|
||||
'menu-item',
|
||||
'structural-pages-menu__item',
|
||||
'structural-pages-menu__item--level-' ~ depth,
|
||||
is_active ? 'menu-item--active-trail structural-pages-menu__item--active-trail' : '',
|
||||
has_children ? 'menu-item--expanded structural-pages-menu__item--has-children' : '',
|
||||
]|filter(c => c is not empty)|join(' ') %}
|
||||
|
||||
<li class="{{ classes }}">
|
||||
<a href="{{ item.url }}"{% if item.is_redirect %} target="_blank"{% endif %} class="structural-pages-menu__link{% if is_active %} is-active structural-pages-menu__link--active-trail{% endif %}">
|
||||
{{- item.title -}}
|
||||
</a>
|
||||
|
||||
{% if has_children %}
|
||||
<ul class="menu sub-menu structural-pages-menu__list structural-pages-menu__list--level-{{ depth + 1 }}">
|
||||
{% for child in item.children %}
|
||||
{% include '@structural_pages/structural-pages-menu-item.html.twig' with {'item': child, 'active_trail': active_trail, 'depth': depth + 1} only %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
@@ -5,64 +5,31 @@
|
||||
*
|
||||
* Available variables:
|
||||
* - ancestor: The ancestor entity (term, user, or group).
|
||||
* - ancestor_url: The ancestor URL string.
|
||||
* - tree: Array of menu tree items, each containing:
|
||||
* - id: Node ID.
|
||||
* - title: Node title.
|
||||
* - url: Node URL.
|
||||
* - is_redirect: Whether the link is a redirect.
|
||||
* - depth: Current depth level.
|
||||
* - children: Array of child items.
|
||||
* - entity: The node entity.
|
||||
* - children: Array of child items (same structure).
|
||||
* - active_trail: Array of node IDs in the active trail.
|
||||
* - show_ancestor_title: Whether to show the ancestor title as header.
|
||||
*/
|
||||
#}
|
||||
{{ attach_library('structural_pages/menu') }}
|
||||
{% if tree is not empty %}
|
||||
<nav class="block-menu navigation structural-pages-menu" aria-label="{{ 'Site structure navigation'|t }}">
|
||||
{% if show_ancestor_title and ancestor %}
|
||||
<h2 class="structural-pages-menu__title block-title">
|
||||
<span>
|
||||
{% if ancestor_url %}
|
||||
<a href="{{ ancestor_url }}">{{ ancestor.label }}</a>
|
||||
{% else %}
|
||||
{{ ancestor.label }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</h2>
|
||||
{% endif %}
|
||||
|
||||
<div class="block-content">
|
||||
<ul class="gva_menu structural-pages-menu__list structural-pages-menu__list--level-1">
|
||||
{% if ancestor_url %}
|
||||
<li class="menu-item structural-pages-menu__item structural-pages-menu__item--level-1">
|
||||
<a href="{{ ancestor_url }}" class="structural-pages-menu__link">{{ 'Home'|t }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% for item in tree %}
|
||||
{{ _self.menu_item(item, active_trail, 1) }}
|
||||
{% include '@structural_pages/structural-pages-menu-item.html.twig' with {'item': item, 'active_trail': active_trail, 'depth': 1} only %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
{% macro menu_item(item, active_trail, depth) %}
|
||||
{% set is_active = item.id in active_trail %}
|
||||
{% set has_children = item.children is not empty %}
|
||||
{% set classes = [
|
||||
'menu-item',
|
||||
'structural-pages-menu__item',
|
||||
'structural-pages-menu__item--level-' ~ depth,
|
||||
is_active ? 'menu-item--active-trail structural-pages-menu__item--active-trail',
|
||||
has_children ? 'menu-item--expanded structural-pages-menu__item--has-children',
|
||||
] %}
|
||||
|
||||
<li{{ create_attribute().addClass(classes) }}>
|
||||
<a href="{{ item.url }}"{% if item.is_redirect %} target="_blank"{% endif %} class="structural-pages-menu__link{% if is_active %} is-active structural-pages-menu__link--active-trail{% endif %}">
|
||||
{{- item.title -}}
|
||||
</a>
|
||||
|
||||
{% if has_children %}
|
||||
<ul class="menu sub-menu structural-pages-menu__list structural-pages-menu__list--level-{{ depth + 1 }}">
|
||||
{% for child in item.children %}
|
||||
{{ _self.menu_item(child, active_trail, depth + 1) }}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endmacro %}
|
||||
|
||||
Reference in New Issue
Block a user