@hermes-ui/angular 0.1.7 → 0.2.0

package/layout/vertical-nav/_vertical-nav.clarity.scss

@@ -5,129 +5,189 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+@use 'sass:map';
 @use 'sass:meta';
 @use '../../styles/a11y';
 @use '../../styles/mixins';
+@use '../../styles/variables/variables';
 @use 'variables.vertical-nav' as vertical-nav-variables;
 @use 'mixins.vertical-nav' as vertical-nav-mixins;
 @use '../../styles/core/tokens/variables.tokens' as tokens;
 @use '../../styles/variables/variables.density' as density;
 
+// A partir daqui a coluna é "de tela larga": abaixo do breakpoint `lg` ela vira a gaveta deslizante
+// do header responsivo (ver ../nav/_responsive-nav.clarity.scss), aberta pelo hambúrguer.
+$desktop-min-width: map.get(variables.$hermes-grid-breakpoints, lg) + 1;
+$mobile-max-width: map.get(variables.$hermes-grid-breakpoints, lg);
+
+// Item de navegação: a mesma caixa para link e cabeçalho de grupo. O respiro lateral é o mesmo da
+// coluna compacta comporta, e é isso que mantém o ícone parado (no mesmo x) enquanto a coluna abre
+// e fecha: com um recuo maior, o item precisaria centrar o conteúdo ao encolher.
+@mixin nav-row() {
+  display: flex;
+  align-items: center;
+  gap: vertical-nav-variables.$hermes-vertical-nav-item-gap;
+  box-sizing: border-box;
+  min-height: vertical-nav-variables.$hermes-vertical-nav-item-height;
+  min-width: 0;
+  margin: 0;
+  padding: vertical-nav-variables.$hermes-vertical-nav-item-padding;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: vertical-nav-variables.$hermes-vertical-nav-item-font-size;
+  font-weight: vertical-nav-variables.$hermes-vertical-nav-item-top-level-font-weight;
+  line-height: 1.25;
+  text-align: left;
+  text-decoration: none;
+  outline-offset: calc(-1 * #{mixins.baselinePx(5)});
+  transition:
+    background-color 0.24s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 @include meta.load-css('properties.vertical-nav');
 @include mixins.exports('vertical-nav.clarity') {
+  // O host é só o "lugar" da coluna no fluxo: quem tem fundo, borda, largura e sombra é o
+  // `.nav-panel`. Em modo sobreposto o painel sai do fluxo e o host segura a largura da trilha
+  // (o espaçador), para a página nunca se mexer quando a coluna abre por cima dela.
   .hermes-vertical-nav {
-    //Display
     display: flex;
     flex-direction: column;
+    position: relative;
 
-    //Dims
-    width: mixins.baselinePx(240);
-    min-width: density.$hermes-base-layout-space-3xl;
-
-    //Others
-    background-color: vertical-nav-variables.$hermes-vertical-nav-bg-color;
-    will-change: width;
-    transition: width 0.2s ease-in-out;
+    .nav-panel {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      position: relative;
+      min-height: 0;
+
+      // `--hermes-vertical-nav-measured-width` é escrita pelo componente, depois que a coluna termina
+      // de abrir, e só cresce (nunca fica menor que o piso). Sem ela cai no piso.
+      width: var(--hermes-vertical-nav-measured-width, #{vertical-nav-variables.$hermes-vertical-nav-width});
+      min-width: vertical-nav-variables.$hermes-vertical-nav-width;
+      max-width: vertical-nav-variables.$hermes-vertical-nav-max-width;
+      border-right: #{tokens.$hermes-alias-object-border-width-100} solid vertical-nav-variables.$hermes-vertical-nav-divider-color;
+      background-color: vertical-nav-variables.$hermes-vertical-nav-bg-color;
+      will-change: width;
+      // Largura, piso e teto animam juntos: se `min-width`/`max-width` ficassem de fora, saltariam
+      // para o valor novo no primeiro quadro e prenderiam a largura ali.
+      transition:
+        width vertical-nav-variables.$hermes-vertical-nav-transition-duration ease-in-out,
+        min-width vertical-nav-variables.$hermes-vertical-nav-transition-duration ease-in-out,
+        max-width vertical-nav-variables.$hermes-vertical-nav-transition-duration ease-in-out,
+        box-shadow vertical-nav-variables.$hermes-vertical-nav-transition-duration ease-in-out;
+    }
 
     .nav-divider {
       @include vertical-nav-mixins.vertical-nav-divider();
     }
 
     .nav-content {
-      //display
       display: flex;
       flex-direction: column;
       flex: 1 1 auto;
-
-      //Others
+      min-height: 0;
+      gap: vertical-nav-variables.$hermes-vertical-nav-child-gap;
       overflow: hidden auto;
     }
 
-    // shadcn sidebar: os itens ficam "flutuando" com um respiro da borda do
-    // container, não de ponta a ponta -- só quando expandida, pra não mexer
-    // no cálculo (já bem specific) dos ícones no modo colapsado/rail.
+    // Os itens flutuam com um respiro da borda da coluna, e não vão de ponta a ponta.
     &:not(.is-collapsed) .nav-content {
       padding: vertical-nav-variables.$hermes-vertical-nav-content-inset;
+      // A calha da barra fica reservada mesmo sem barra: sem ela, o primeiro grupo que abre faz a
+      // lista passar da altura da tela, a barra nasce, tira 8px do rótulo e a largura medida
+      // cresceria para compensar sem que rótulo nenhum tenha pedido.
+      scrollbar-gutter: stable;
     }
 
     .nav-group {
-      //Display
       display: block;
       flex: 0 0 auto;
-
-      //Dims
       height: auto;
       min-height: vertical-nav-variables.$hermes-vertical-nav-item-height;
     }
 
     .nav-group-content {
-      //Display
       display: flex;
 
-      //Others
-
-      @include vertical-nav-mixins.vertical-nav-link-colors();
-
       .nav-link {
-        //Display
         flex: 1 1 auto;
-
-        //Dims
-        padding-left: 0;
-        min-width: 0; //Chrome nested flex box ellipsis fix
+        min-width: 0; // Chrome nested flex box ellipsis fix
       }
 
-      .nav-icon {
-        //Dims
-        margin-left: density.$hermes-base-horizontal-offset-xl;
-      }
+      // Link que também é o cabeçalho do grupo, com a seta de expansão como botão à parte.
+      .nav-link ~ .nav-group-trigger {
+        flex: 0 0 auto;
+        justify-content: center;
+        width: vertical-nav-variables.$hermes-vertical-nav-toggle-button-size;
+        padding: 0;
 
-      .nav-text {
-        //Dims
-        padding-left: density.$hermes-base-horizontal-offset-l;
+        .nav-group-text {
+          display: none;
+        }
       }
+    }
 
-      .nav-icon + .nav-text {
-        //Dims
-        padding-left: 0;
-      }
+    // ── Itens (link e cabeçalho de grupo) ───────────────────────────────────────────────────
 
-      .nav-link + .nav-group-text {
-        //Display
-        display: none;
+    .nav-link,
+    .nav-group-trigger {
+      @include nav-row();
+
+      color: vertical-nav-variables.$hermes-vertical-nav-item-color;
+      cursor: pointer;
+    }
+
+    // Sem `flex` aqui: o `.nav-content` é uma coluna, e um link solto com `flex-grow` esticaria até
+    // ocupar toda a altura que sobra. Só dentro de `.nav-group-content` (uma linha) ele cresce.
+    .nav-link {
+      border-radius: vertical-nav-variables.$hermes-vertical-nav-item-border-radius;
+
+      &:hover:not(.active) {
+        background-color: vertical-nav-variables.$hermes-vertical-nav-hover-bg-color;
+        color: vertical-nav-variables.$hermes-vertical-nav-item-color;
       }
 
-      > .nav-link {
-        &.active,
-        &:active {
-          font-weight: vertical-nav-variables.$hermes-vertical-nav-item-active-font-weight;
-        }
+      &:active:not(.active) {
+        background-color: vertical-nav-variables.$hermes-vertical-nav-active-bg-color;
       }
-    }
 
-    .nav-group-children {
-      overflow-y: hidden;
+      // O selecionado é só a tinta, sem faixa lateral: preenchido de ponta a ponta ele viraria a
+      // coisa mais pesada da tela. O peso do texto e o glifo em tom mais forte completam.
+      &.active {
+        background-color: vertical-nav-variables.$hermes-vertical-nav-selected-bg-color;
+        color: vertical-nav-variables.$hermes-vertical-nav-item-active-color;
+        font-weight: vertical-nav-variables.$hermes-vertical-nav-item-active-font-weight;
 
-      // shadcn sidebar: linha vertical marcando o subnível — os itens ficam
-      // indentados depois dela, e o pill de hover/active de cada um fica
-      // mais estreito (começa depois da linha), não do tamanho do item pai.
-      margin-left: #{mixins.baselinePx(20)};
-      padding-left: #{mixins.baselinePx(10)};
-      border-left: #{tokens.$hermes-alias-object-border-width-100} solid vertical-nav-variables.$hermes-vertical-nav-divider-color;
+        .nav-icon {
+          color: vertical-nav-variables.$hermes-vertical-nav-icon-active-color;
+          fill: vertical-nav-variables.$hermes-vertical-nav-icon-active-color;
+        }
+
+        // O item selecionado também responde ao hover: numa lista em que tudo reage, o item onde
+        // se está não pode parecer travado.
+        &:hover {
+          background-color: vertical-nav-variables.$hermes-vertical-nav-selected-hover-bg-color;
+        }
+      }
     }
 
-    .nav-trigger,
     .nav-group-trigger {
-      //Display
-      flex: 0 0 vertical-nav-variables.$hermes-vertical-nav-toggle-button-size;
+      flex: 1 1 auto;
+      width: 100%;
+      overflow: hidden;
+      border-radius: vertical-nav-variables.$hermes-vertical-nav-item-border-radius;
 
-      //Dims
-      border: none;
-      height: vertical-nav-variables.$hermes-vertical-nav-toggle-button-size;
-      padding: 0;
+      &:hover {
+        background-color: vertical-nav-variables.$hermes-vertical-nav-hover-bg-color;
+      }
+
+      &:active {
+        background-color: vertical-nav-variables.$hermes-vertical-nav-active-bg-color;
+      }
 
-      //Others
-      hermes-icon[shape='angle-double'],
       hermes-icon[shape='angle-double'] {
         color: vertical-nav-variables.$hermes-vertical-nav-toggle-icon-color;
 
@@ -142,124 +202,177 @@
 
       &:disabled,
       &.disabled {
-        hermes-icon[shape='angle-double'],
         hermes-icon[shape='angle-double'] {
           color: vertical-nav-variables.$hermes-vertical-nav-toggle-icon-disabled-color;
         }
       }
+    }
 
-      background-color: transparent;
-      cursor: pointer;
-      outline-offset: calc(-1 * #{mixins.baselinePx(5)});
+    .nav-group-text,
+    .nav-text {
+      flex: 1 1 auto;
+      min-width: 0; // sem isto o `nowrap` trava o item no tamanho do texto inteiro
+
+      @include mixins.overflow-ellipsis();
     }
 
-    .nav-trigger {
-      //Display
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
+    // Um ícone que não é o glifo do item (ex.: o selo "NEW" de 32px dentro do rótulo) não pode esticar a
+    // linha: o item mede pelo texto e pelo glifo, e a altura fechada que antes escondia isso saiu.
+    .nav-text hermes-icon:not(.nav-icon),
+    .nav-group-text hermes-icon:not(.nav-icon) {
+      vertical-align: middle;
+      margin-block: calc(-1 * #{mixins.baselinePx(8)});
+    }
 
-      //Dims
-      height: vertical-nav-variables.$hermes-vertical-nav-item-height;
-      padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-xl;
+    // O glifo é da cor da marca em todos os itens, e não só no ativo: é ele que dá à coluna a
+    // leitura de navegação, e em cinza a barra inteira ficaria apagada ao lado do conteúdo.
+    .nav-icon {
+      position: relative;
+      flex: 0 0 vertical-nav-variables.$hermes-vertical-nav-icon-size;
+      align-self: center;
+      margin: 0;
+      color: vertical-nav-variables.$hermes-vertical-nav-icon-color;
+      fill: vertical-nav-variables.$hermes-vertical-nav-icon-color;
+      vertical-align: middle;
 
-      hermes-icon,
-      hermes-icon {
-        margin-right: 0;
+      @include mixins.min-equilateral(vertical-nav-variables.$hermes-vertical-nav-icon-size);
+      @include mixins.equilateral(vertical-nav-variables.$hermes-vertical-nav-icon-size);
+    }
 
-        &:not([size]) {
-          @include mixins.equilateral(density.$hermes-base-icon-size-s);
-        }
-      }
+    .nav-group-trigger-icon {
+      flex: 0 0 auto;
+      align-self: center;
+      margin: 0;
+      transition: all vertical-nav-variables.$hermes-vertical-nav-transition-duration ease-in-out;
 
-      &.on-collapse {
-        hermes-icon,
-        hermes-icon {
-          margin: 0;
-        }
-      }
+      @include mixins.equilateral(vertical-nav-variables.$hermes-vertical-nav-caret-size);
     }
 
-    //Parent .nav-group-content
-    .nav-group-trigger {
-      //Display
-      //flex: 0 0 $hermes-vertical-nav-item-height;
-      display: flex;
-      flex: 1 1 auto;
+    // ── Submenu ─────────────────────────────────────────────────────────────────────────────
 
-      //Others
-      color: inherit;
-      overflow: hidden;
-      text-align: left;
+    // O trilho é o que dá forma ao submenu: o recuo sozinho deixaria os filhos boiando, sem nada
+    // dizendo a que pai pertencem. O recuo é o menor que ainda se lê, porque cada pixel dele é
+    // cobrado da largura da coluna inteira.
+    .nav-group-children {
+      overflow-y: hidden;
+      margin-left: vertical-nav-variables.$hermes-vertical-nav-child-indent;
+      padding-left: vertical-nav-variables.$hermes-vertical-nav-child-padding-start;
+      border-left: #{tokens.$hermes-alias-object-border-width-100} solid vertical-nav-variables.$hermes-vertical-nav-divider-color;
+      transition: border-left-color vertical-nav-variables.$hermes-vertical-nav-transition-duration ease-in-out;
+
+      // O filho não é um item de primeiro nível reduzido: tem tipografia e glifo próprios, e o
+      // glifo neutro é o que separa folha de cabeçalho de grupo ("é a tela", e não "tem mais coisa").
+      .nav-link {
+        font-size: vertical-nav-variables.$hermes-vertical-nav-child-font-size;
+        padding: vertical-nav-variables.$hermes-vertical-nav-item-child-padding;
 
-      .nav-group-trigger-icon {
-        //Display
-        flex-shrink: 0;
+        .nav-icon {
+          flex-basis: vertical-nav-variables.$hermes-vertical-nav-child-icon-size;
+          color: vertical-nav-variables.$hermes-vertical-nav-child-icon-color;
+          fill: vertical-nav-variables.$hermes-vertical-nav-child-icon-color;
 
-        //Dims
-        width: vertical-nav-variables.$hermes-vertical-nav-icon-size;
-        margin: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-m;
-        align-self: center;
+          @include mixins.min-equilateral(vertical-nav-variables.$hermes-vertical-nav-child-icon-size);
+          @include mixins.equilateral(vertical-nav-variables.$hermes-vertical-nav-child-icon-size);
+        }
 
-        //Others
-        transition: all 0.2s ease-in-out;
+        &.active .nav-icon {
+          color: vertical-nav-variables.$hermes-vertical-nav-icon-active-color;
+          fill: vertical-nav-variables.$hermes-vertical-nav-icon-active-color;
+        }
       }
     }
 
-    //Parent .nav-trigger
-    .nav-trigger-icon {
-      //Others
-      transition: all 0.2s ease-in-out;
+    hermes-vertical-nav-group-children {
+      display: grid;
+      gap: vertical-nav-variables.$hermes-vertical-nav-child-gap;
+      padding-top: vertical-nav-variables.$hermes-vertical-nav-child-gap;
     }
 
-    .nav-trigger + .nav-content {
-      //Dims
+    // O grupo que contém a página atual se marca também, e não só o item dentro dele: peso e glifo
+    // em tom forte, e o trilho acende. Não repete a tinta de fundo — ela é o que diz "esta é a
+    // página em que você está", e pai e filho dizem coisas diferentes ("é por aqui" e "é aqui").
+    .nav-group.active,
+    .nav-group:has(.nav-group-children .nav-link.active) {
+      > .nav-group-content .nav-group-trigger {
+        font-weight: vertical-nav-variables.$hermes-vertical-nav-item-active-font-weight;
 
-      @include vertical-nav-mixins.vertical-nav-divider();
-    }
+        .nav-icon {
+          color: vertical-nav-variables.$hermes-vertical-nav-icon-active-color;
+          fill: vertical-nav-variables.$hermes-vertical-nav-icon-active-color;
+        }
+      }
 
-    .nav-group-text,
-    .nav-link {
-      //Dims
-      height: vertical-nav-variables.$hermes-vertical-nav-item-height;
-      padding: vertical-nav-variables.$hermes-vertical-nav-item-padding;
+      > .nav-group-children {
+        border-left-color: vertical-nav-variables.$hermes-vertical-nav-icon-color;
+      }
+    }
 
-      //Others
+    // O ponto diz "tem um item seu aqui dentro" quando o grupo está fechado. Aparece sobretudo na
+    // coluna compacta, em que grupo nenhum mostra conteúdo e o ícone é tudo o que há. Encosta na
+    // quina do glifo, e não do botão, que na compacta é bem maior que o desenho.
+    .nav-group:not(.is-expanded):has(.nav-group-children .nav-link.active) .nav-group-trigger .nav-icon::after,
+    .nav-group.active:not(.is-expanded) .nav-group-trigger .nav-icon::after {
+      content: '';
+      position: absolute;
+      top: calc(-1 * #{mixins.baselinePx(2)});
+      right: calc(-1 * #{mixins.baselinePx(2)});
+      width: #{mixins.baselinePx(6)};
+      height: #{mixins.baselinePx(6)};
+      border-radius: 50%;
+      background-color: vertical-nav-variables.$hermes-vertical-nav-icon-color;
+    }
 
-      @include mixins.generate-typography-token('BODY-14-RG-CPT');
+    // ── Gatilho de recolher (o botão clássico do topo) ──────────────────────────────────────
 
+    .nav-trigger {
       display: flex;
+      flex: 0 0 vertical-nav-variables.$hermes-vertical-nav-toggle-button-size;
       align-items: center;
+      justify-content: flex-end;
+      height: vertical-nav-variables.$hermes-vertical-nav-item-height;
+      padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-xl;
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
       outline-offset: calc(-1 * #{mixins.baselinePx(5)});
-    }
 
-    .nav-group-text,
-        /*Parent .nav-link*/
-        .nav-text {
-      //Display
-      flex: 1 1 auto;
-      //Mixins
+      hermes-icon[shape='angle-double'] {
+        color: vertical-nav-variables.$hermes-vertical-nav-toggle-icon-color;
 
-      @include mixins.overflow-ellipsis();
-    }
+        &:hover {
+          color: vertical-nav-variables.$hermes-vertical-nav-toggle-icon-hover-color;
+        }
 
-    .nav-link {
-      //Display
-      display: flex;
-      text-decoration: none;
+        &:active {
+          color: vertical-nav-variables.$hermes-vertical-nav-toggle-icon-active-color;
+        }
+      }
+
+      hermes-icon {
+        margin-right: 0;
 
-      //Others
+        &:not([size]) {
+          @include mixins.equilateral(density.$hermes-base-icon-size-s);
+        }
+      }
 
-      @include vertical-nav-mixins.vertical-nav-link-colors();
+      &.on-collapse hermes-icon {
+        margin: 0;
+      }
+    }
+
+    .nav-trigger-icon {
+      transition: all vertical-nav-variables.$hermes-vertical-nav-transition-duration ease-in-out;
+    }
+
+    .nav-trigger + .nav-content {
+      @include vertical-nav-mixins.vertical-nav-divider();
     }
 
     .nav-header {
-      //Dims
       padding: vertical-nav-variables.$hermes-vertical-nav-header-padding;
       min-height: vertical-nav-variables.$hermes-vertical-nav-item-height;
 
-      //Others
-
       @include mixins.generate-typography-token(
         'SECTION-12-SB-CPT',
         (
@@ -268,188 +381,203 @@
       );
     }
 
-    //Parent .nav-text
-    .nav-icon {
-      //Display
-      flex: 0 0 vertical-nav-variables.$hermes-vertical-nav-icon-size;
-      align-self: center;
-
-      //Dims
-
-      @include mixins.min-equilateral(vertical-nav-variables.$hermes-vertical-nav-icon-size);
-
-      margin-right: density.$hermes-base-gap-xs;
-
-      //Others
-      vertical-align: middle;
-    }
-
-    hermes-vertical-nav-group-children {
-      display: block;
-    }
-
     .nav-btn {
-      //Display
       flex: 1 1 auto;
-
-      //Dims
       padding: 0;
       margin: 0;
-
-      //Others
       background: transparent;
       border: none;
       cursor: pointer;
       outline-offset: calc(-1 * #{mixins.baselinePx(5)});
     }
 
-    & > .nav-link,
-    .nav-content > .nav-link {
-      //Display
-      flex: 0 0 vertical-nav-variables.$hermes-vertical-nav-toggle-button-size;
+    // ── Rodapé de ajustes ───────────────────────────────────────────────────────────────────
+
+    // A linha de ajuste: o gatilho de modo, o nome do modo em que se está e os botões em lote.
+    // Fica embaixo porque é decisão que se toma uma vez — no topo ela disputaria o primeiro item da
+    // lista, que é o que se clica sempre.
+    .nav-footer {
+      position: relative;
+      display: flex;
+      flex: none;
+      align-items: center;
+      gap: vertical-nav-variables.$hermes-vertical-nav-child-gap;
+      padding: vertical-nav-variables.$hermes-vertical-nav-content-inset;
+      border-top: #{tokens.$hermes-alias-object-border-width-100} solid vertical-nav-variables.$hermes-vertical-nav-divider-color;
+      color: vertical-nav-variables.$hermes-vertical-nav-footer-text-color;
     }
 
-    .nav-link + .nav-group-trigger {
-      //Display
-      flex: 0 0 vertical-nav-variables.$hermes-vertical-nav-toggle-button-size;
+    .nav-footer-btn {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      width: vertical-nav-variables.$hermes-vertical-nav-item-height;
+      height: vertical-nav-variables.$hermes-vertical-nav-item-height;
+      padding: 0;
+      border: none;
+      border-radius: vertical-nav-variables.$hermes-vertical-nav-item-border-radius;
+      background-color: transparent;
+      color: vertical-nav-variables.$hermes-vertical-nav-icon-color;
+      cursor: pointer;
+      transition: background-color 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+      outline-offset: calc(-1 * #{mixins.baselinePx(5)});
 
-      .nav-group-text {
-        display: none;
+      &:hover,
+      &[aria-expanded='true'] {
+        background-color: vertical-nav-variables.$hermes-vertical-nav-hover-bg-color;
       }
-    }
-
-    .nav-icon + .nav-group-text {
-      padding-left: 0;
-    }
 
-    ///////
-    //////
-    ////
-    // Interactions
-    ////
-    //////
-    ///////
-    &.has-nav-groups {
-      .nav-content > .nav-link,
-      .nav-group .nav-group-text,
-      .nav-group .nav-group-trigger {
-        font-weight: vertical-nav-variables.$hermes-vertical-nav-item-top-level-font-weight;
-      }
-
-      .nav-group-children .nav-link {
-        padding: vertical-nav-variables.$hermes-vertical-nav-item-child-padding;
+      &:active {
+        background-color: vertical-nav-variables.$hermes-vertical-nav-active-bg-color;
       }
-    }
 
-    &.has-icons {
-      .nav-group-children .nav-link {
-        padding: vertical-nav-variables.$hermes-vertical-nav-item-child-padding;
+      hermes-icon {
+        @include mixins.equilateral(density.$hermes-base-icon-size-s);
       }
     }
 
-    .nav-group.active:not(.is-expanded) {
-      .nav-group-content {
-        background-color: vertical-nav-variables.$hermes-vertical-nav-selected-bg-color;
+    .nav-footer-mode {
+      flex: 1 1 auto;
+      min-width: 0;
+      font-size: #{mixins.baselinePx(12)};
 
-        //Horrible Nesting but nothing I can do.
-        .nav-icon {
-          fill: vertical-nav-variables.$hermes-vertical-nav-icon-active-color;
-        }
-      }
+      @include mixins.overflow-ellipsis();
     }
 
-    .nav-group-content {
-      .nav-link.active ~ .nav-group-trigger {
-        background-color: vertical-nav-variables.$hermes-vertical-nav-selected-bg-color;
+    // O menu abre para cima, sobre a lista, e pode ser mais largo que a trilha compacta: por isso
+    // o painel não corta o que sai dele (só `.nav-content` rola).
+    .nav-footer-menu {
+      position: absolute;
+      bottom: calc(100% + #{mixins.baselinePx(4)});
+      left: vertical-nav-variables.$hermes-vertical-nav-content-inset;
+      z-index: 1;
+      display: grid;
+      gap: vertical-nav-variables.$hermes-vertical-nav-child-gap;
+      min-width: #{mixins.baselinePx(216)};
+      margin: 0;
+      padding: vertical-nav-variables.$hermes-vertical-nav-child-gap;
+      border: #{tokens.$hermes-alias-object-border-width-100} solid vertical-nav-variables.$hermes-vertical-nav-divider-color;
+      border-radius: vertical-nav-variables.$hermes-vertical-nav-item-border-radius;
+      background-color: vertical-nav-variables.$hermes-vertical-nav-menu-bg-color;
+      box-shadow: vertical-nav-variables.$hermes-vertical-nav-overlay-shadow;
+      list-style: none;
+    }
+
+    .nav-footer-menu-item {
+      @include nav-row();
+
+      width: 100%;
+      gap: #{mixins.baselinePx(8)};
+      color: vertical-nav-variables.$hermes-vertical-nav-item-color;
+      cursor: pointer;
+      border-radius: vertical-nav-variables.$hermes-vertical-nav-item-border-radius;
+      font-size: vertical-nav-variables.$hermes-vertical-nav-child-font-size;
+
+      hermes-icon {
+        flex: none;
+        color: vertical-nav-variables.$hermes-vertical-nav-icon-color;
+
+        @include mixins.equilateral(density.$hermes-base-icon-size-s);
       }
 
-      .nav-link:hover ~ .nav-group-trigger {
+      &:hover {
         background-color: vertical-nav-variables.$hermes-vertical-nav-hover-bg-color;
       }
 
-      .nav-link:active ~ .nav-group-trigger {
-        background-color: vertical-nav-variables.$hermes-vertical-nav-active-bg-color;
+      &[aria-checked='true'] {
+        background-color: vertical-nav-variables.$hermes-vertical-nav-selected-bg-color;
+        font-weight: vertical-nav-variables.$hermes-vertical-nav-item-active-font-weight;
+      }
+
+      .nav-footer-menu-label {
+        flex: 1 1 auto;
+        min-width: 0;
+
+        @include mixins.overflow-ellipsis();
       }
+    }
 
-      .nav-link.active:hover ~ .nav-group-trigger {
-        background-color: vertical-nav-variables.$hermes-vertical-nav-selected-hover-bg-color;
+    &.nav-trigger--bottom {
+      .nav-trigger {
+        order: 2;
+        margin-top: 0;
       }
 
-      .nav-link.active:active ~ .nav-group-trigger {
-        background-color: vertical-nav-variables.$hermes-vertical-nav-selected-active-bg-color;
+      .nav-trigger + .nav-content {
+        border-top: 0;
+
+        @include vertical-nav-mixins.vertical-nav-divider('border-bottom');
       }
     }
 
-    // horizontally center the expand icon
-    &:not(.is-collapsed) .nav-link + .nav-group-trigger {
-      justify-content: center;
+    // ── Modo sobreposto (largura de desktop) ────────────────────────────────────────────────
+
+    // Compacta em repouso e aberta POR CIMA do conteúdo: o painel sai do fluxo o tempo todo, aberto
+    // ou fechado — se saísse só ao abrir, a página entraria e sairia do fluxo a cada passada de
+    // ponteiro, acompanhando a coluna. Quem segura o lugar dela é o próprio host, com a largura da
+    // trilha, e a página não se mexe nunca: só a coluna, que cresce por cima.
+    @media screen and (min-width: #{$desktop-min-width}) {
+      &.is-overlay {
+        flex: none;
+        width: vertical-nav-variables.$hermes-vertical-nav-rail-width;
+        min-width: vertical-nav-variables.$hermes-vertical-nav-rail-width;
+
+        .nav-panel {
+          position: absolute;
+          inset: 0 auto 0 0;
+          z-index: var(--hermes-vertical-nav-overlay-z-index, 1000);
+        }
+
+        &:not(.is-collapsed) .nav-panel {
+          box-shadow: vertical-nav-variables.$hermes-vertical-nav-overlay-shadow;
+        }
+      }
     }
 
-    .main-container:not([class*='open-overflow-menu'], [class*='open-hamburger-menu']) &.is-collapsed {
-      //Dims
-      width: vertical-nav-variables.$hermes-vertical-nav-min-width;
-      min-width: vertical-nav-variables.$hermes-vertical-nav-min-width;
-      // ATM - adress scroll when more items are available, otherwise the content gets hidden
-      max-width: calc(#{vertical-nav-variables.$hermes-vertical-nav-min-width} + #{mixins.baselinePx(14)});
+    // ── Coluna recolhida ────────────────────────────────────────────────────────────────────
 
-      //Others
+    .main-container:not([class*='open-overflow-menu'], [class*='open-hamburger-menu']) &.is-collapsed {
       cursor: pointer;
 
-      .nav-icon {
-        //Dims
-        margin: density.$hermes-base-vertical-offset-m 0 density.$hermes-base-vertical-offset-m
-          density.$hermes-base-horizontal-offset-xl;
+      .nav-panel {
+        width: vertical-nav-variables.$hermes-vertical-nav-rail-width;
+        min-width: vertical-nav-variables.$hermes-vertical-nav-rail-width;
+        max-width: vertical-nav-variables.$hermes-vertical-nav-rail-width;
       }
 
-      .nav-group-content {
-        .nav-link {
-          //Display
-          flex: 0 0 vertical-nav-variables.$hermes-vertical-nav-min-width;
-        }
+      .nav-content {
+        // Rolagem só no eixo Y: na trilha de ícones nada rola para o lado.
+        overflow-x: hidden;
+        padding: vertical-nav-variables.$hermes-vertical-nav-content-inset;
+      }
 
-        .nav-link ~ .nav-group-trigger {
-          //Display
-          flex: 0 0
-            calc(
-              #{vertical-nav-variables.$hermes-vertical-nav-collapsed-caret-size} +
-                #{vertical-nav-variables.$hermes-vertical-nav-icon-right-margin}
-            );
-
-          //Others
-          transform: translateX(calc(-1 * #{vertical-nav-variables.$hermes-vertical-nav-icon-size}));
-          pointer-events: none;
-        }
+      .nav-group-content .nav-link ~ .nav-group-trigger {
+        display: none;
       }
 
       .nav-link,
       .nav-group-trigger {
-        //Dims
-        padding: 0;
+        width: 100%;
       }
 
-      .nav-group-trigger {
-        //Display
-        //flex: 0 0 $hermes-vertical-nav-collapsed-caret-size + $hermes-vertical-nav-icon-right-margin;
-
-        //Dims
-        padding-left: 0;
-
-        hermes-icon,
-        hermes-icon {
-          &.nav-group-trigger-icon {
-            width: density.$hermes-base-icon-size-s;
-            margin: 0;
-          }
-        }
+      .nav-group-trigger-icon,
+      .nav-footer-mode,
+      .nav-footer-batch {
+        display: none;
+      }
+
+      .nav-group-children {
+        display: none;
       }
 
-      //If no icon present then hide the nav-group and nav-links.
+      // Sem ícone não há o que mostrar numa trilha de ícones: o item some.
       .nav-group,
       .nav-link {
         display: none;
       }
 
-      //When the nav has icons just hide the nav-text
+      // Com ícones, só o texto sai de cena. Continua no DOM, legível por leitor de tela.
       &.has-icons {
         .nav-group {
           display: block;
@@ -466,17 +594,30 @@
       }
     }
 
-    &.nav-trigger--bottom {
-      .nav-trigger {
-        order: 2;
-        margin-top: 0;
-      }
+    // ── Gaveta (abaixo do breakpoint) ───────────────────────────────────────────────────────
+
+    // Aqui o header responsivo é quem posiciona o host (painel deslizante de largura fixa, com fundo
+    // escurecido). O painel só preenche esse espaço: modo, sobreposição e largura medida não valem —
+    // numa tela estreita a navegação está aberta ou não está, e quando está ocupa a largura toda.
+    @media screen and (max-width: #{$mobile-max-width}) {
+      &.hermes-nav-level-1,
+      &.hermes-nav-level-2 {
+        .nav-panel {
+          position: static;
+          width: 100%;
+          min-width: 0;
+          max-width: none;
+          box-shadow: none;
+        }
 
-      .nav-trigger + .nav-content {
-        //Dims
-        border-top: 0;
+        .nav-footer {
+          display: none;
+        }
 
-        @include vertical-nav-mixins.vertical-nav-divider('border-bottom');
+        // Folga no fim da lista para a última entrada não ficar escondida atrás da barra do navegador.
+        .nav-content {
+          padding-bottom: tokens.$hermes-global-space-10;
+        }
       }
     }
   }