Adiciona regiões Top Bar e Navigation ao tema do microsite

- Top Bar: barra estreita acima do header para menu do usuário,
  fundo escuro com links claros alinhados à direita.
- Navigation: barra horizontal abaixo do header para menu da página,
  estilo baseado no nav-secondary do Olivero (hover com underline animado).
- Inclui menu.html.twig para gerar as classes .menu, .menu__item e
  .menu__link necessárias para o CSS funcionar (stable9 não as adiciona).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

themes/site_users_microsite_theme/css/microsite.css

@@ -154,6 +154,140 @@ body.microsite {
   margin-bottom: 1.5rem;
 }
 
+/* Top Bar ------------------------------------------------------------------ */
+/*
+ * Barra estreita no topo da página, antes do header.
+ * Destinada ao menu do usuário (login, conta, logout).
+ * Alinhada à direita, fundo escuro, texto claro.
+ */
+
+.microsite-top-bar {
+  background-color: hsl(201, 15%, 20%);
+  padding-inline: 1.5rem;
+}
+
+.microsite-top-bar .block-menu {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.microsite-top-bar ul.menu {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.microsite-top-bar li.menu__item:not(:last-child) {
+  margin-inline-end: 18px;
+}
+
+.microsite-top-bar ul.menu ul.menu {
+  display: none;
+}
+
+.microsite-top-bar a.menu__link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-block: 7px;
+  text-decoration: none;
+  color: hsl(201, 15%, 88%);
+}
+
+.microsite-top-bar a.menu__link:hover {
+  color: #fff;
+}
+
+.microsite-top-bar a.menu__link.is-active {
+  color: hsl(202, 79%, 70%);
+}
+
+/* Navigation --------------------------------------------------------------- */
+/*
+ * Estilo baseado no nav-secondary do Olivero.
+ * Variáveis Olivero traduzidas para valores fixos (o tema base é stable9):
+ *   --color--primary-50  → hsl(202, 79%, 50%)  ≈ #1a9fd4
+ *   --color--gray-5      → hsl(201, 15%,  5%)  ≈ #0b0e0f  (texto)
+ *   --sp                 → 18px
+ *   --sp0-5              →  9px
+ *   --sp2                → 36px
+ *   --font-size-s        → 14px
+ */
+
+.microsite-nav {
+  background-color: #fff;
+  border-bottom: 3px solid hsl(202, 79%, 50%);
+  padding-inline: 1.5rem;
+}
+
+/* Bloco de menu padrão dentro da região nav */
+.microsite-nav .block-menu {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+/* Lista principal: horizontal, sem marcadores */
+.microsite-nav ul.menu {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Itens: espaço entre eles */
+.microsite-nav li.menu__item:not(:last-child) {
+  margin-inline-end: 36px;
+}
+
+/* Subitens: não exibidos (menu plano) */
+.microsite-nav ul.menu ul.menu {
+  display: none;
+}
+
+/* Links */
+.microsite-nav a.menu__link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-block: 12px;
+  text-decoration: none;
+  color: hsl(201, 15%, 5%);
+}
+
+/* Underline animado no hover (padrão Olivero) */
+.microsite-nav a.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;
+}
+
+.microsite-nav a.menu__link:hover::after,
+.microsite-nav a.menu__link.is-active::after {
+  transform: translateY(0);
+  opacity: 0.8;
+}
+
+/* Link ativo: cor primária */
+.microsite-nav a.menu__link.is-active {
+  color: hsl(202, 79%, 50%);
+}
+
 /* Social Bar --------------------------------------------------------------- */
 /*
  * Mobile: barra horizontal compacta.

themes/site_users_microsite_theme/site_users_microsite_theme.info.yml

@@ -9,7 +9,9 @@ libraries:
   - site_users_microsite_theme/global
 
 regions:
+  top_bar: Top Bar
   header: Header
+  nav: Navigation
   highlighted: Highlighted
   tabs: Tabs
   messages: Messages

themes/site_users_microsite_theme/templates/layout/page.html.twig

@@ -23,6 +23,12 @@
 
   <div class="microsite-content-area">
 
+  {% if page.top_bar %}
+    <div class="microsite-top-bar" role="navigation" aria-label="{{ 'User account menu'|t }}">
+      {{ page.top_bar }}
+    </div>
+  {% endif %}
+
   {# Header: blocos configurados no admin OU header padrão gerado com dados do usuário. #}
   {% if page.header %}
     <header class="microsite-header" role="banner">
@@ -50,6 +56,12 @@
     </header>
   {% endif %}
 
+  {% if page.nav %}
+    <nav class="microsite-nav" role="navigation" aria-label="{{ 'User page menu'|t }}">
+      {{ page.nav }}
+    </nav>
+  {% endif %}
+
   {% if page.highlighted %}
     <div class="microsite-highlighted">
       {{ page.highlighted }}

themes/site_users_microsite_theme/templates/navigation/menu.html.twig

@@ -0,0 +1,39 @@
+{#
+/**
+ * @file
+ * Template de menu do microsite.
+ *
+ * Gera as classes usadas pelo CSS da região nav (.menu, .menu__item,
+ * .menu__link), seguindo o mesmo padrão de classes do Olivero.
+ */
+#}
+{% import _self as menus %}
+{% set attributes = attributes.addClass('menu') %}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% import _self as menus %}
+  {% if items %}
+    <ul{{ attributes.addClass('menu--level-' ~ (menu_level + 1)) }}>
+    {% set attributes = attributes.removeClass('menu--level-' ~ (menu_level + 1)) %}
+    {% for item in items %}
+      <li{{ item.attributes.addClass([
+        'menu__item',
+        'menu__item--level-' ~ (menu_level + 1),
+        item.in_active_trail ? 'menu__item--active-trail',
+      ]) }}>
+        {{ link(item.title, item.url, {
+          'class': [
+            'menu__link',
+            'menu__link--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'menu__link--active-trail',
+          ]
+        }) }}
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}