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>

css/structural-pages-menu.css

@@ -1,13 +1,154 @@
 /**
- * Structural Pages Menu - Custom Flyout Styles
+ * Structural Pages Menu
- * Ensures the nested menu items fly out to the right exactly like the Gavias theme reference 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 */
+/* Lista de nível 1: vertical na sidebar */
-.structural-pages-menu .structural-pages-menu__item {
+.sidebar .structural-pages-menu .structural-pages-menu__list--level-1 {
-  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 {
   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 */
+.sidebar .structural-pages-menu .sub-menu .menu-item--active-trail > a,
-.structural-pages-menu .sub-menu .menu-item--active-trail>a,
+.sidebar .structural-pages-menu .sub-menu .is-active {
-.structural-pages-menu .sub-menu .is-active {
   color: var(--notech-theme-color, #db162f);
-}
+}

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(' ') %}
+
+<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>

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.
+ *   - children: Array of child items (same structure).
- *   - entity: The node entity.
  * - 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 %}