From 724f1336d05d6fcb9425e3e9d72c1561d6f59e02 Mon Sep 17 00:00:00 2001 From: "Quintino A. G. Souza" Date: Tue, 24 Mar 2026 09:54:44 -0300 Subject: [PATCH] Refatora CSS e templates do menu estrutural MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- css/structural-pages-menu.css | 258 +++++++++++++----- .../structural-pages-menu-item.html.twig | 39 +++ templates/structural-pages-menu.html.twig | 51 +--- 3 files changed, 236 insertions(+), 112 deletions(-) create mode 100644 templates/structural-pages-menu-item.html.twig diff --git a/css/structural-pages-menu.css b/css/structural-pages-menu.css index 54ca832..ca0ed89 100644 --- a/css/structural-pages-menu.css +++ b/css/structural-pages-menu.css @@ -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); -} \ No newline at end of file +} diff --git a/templates/structural-pages-menu-item.html.twig b/templates/structural-pages-menu-item.html.twig new file mode 100644 index 0000000..2b4257c --- /dev/null +++ b/templates/structural-pages-menu-item.html.twig @@ -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(' ') %} + +
  • + + {{- item.title -}} + + + {% if has_children %} +
      + {% 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 %} +
    + {% endif %} +
    • diff --git a/templates/structural-pages-menu.html.twig b/templates/structural-pages-menu.html.twig index 37383c6..a10efce 100644 --- a/templates/structural-pages-menu.html.twig +++ b/templates/structural-pages-menu.html.twig @@ -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 %} {% 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', - ] %} - - - - {{- item.title -}} - - - {% if has_children %} -
      - {% for child in item.children %} - {{ _self.menu_item(child, active_trail, depth + 1) }} - {% endfor %} -
    - {% endif %} - -{% endmacro %}