[BUG] ViewTransitions Breaking Navbar Selection

[vitorgouveia]

Por conta do view transition (API do Astro) não é possível fazer a página do header ficar seleciona corretamente com a implementação atual

[ThiagoThalisson]

Tentando corrigir o problema sem sucesso.

1. Instalada a nova versão do astro usando npx @astrojs/upgrade.

2. Adicionado data-astro-rerun is:inline para o script em Navbar.astro com e sem defer.

3. Adicionado transition:persist no componente definido em Header.astro e transition:persist-props.

4. Adicionado até transition:persist no Header em Layout.astro.

5. Técnicamente funciona se adicionado ou no link ou div contendo a slug da página mas efeito mantém a classe presa em um estado. Ex.: Clica-se na página "Home", quando muda-se para "About", "Home" continuará roxa e vice-versa.

[ThiagoThalisson]

Ao que eu entendi também nossa solução nem está no transition:persist e sim nessa seção do dev-log:

<script data-astro-rerun is:inline>
  console.log('This script will rerun when the page changes!');
</script>

Porém ela não está funcionando. É possível que seja algo com a lógica do código que impede a funcionalidade de surtir efeito.

 function main() {
     const pathname = location.pathname
     const links = document.querySelectorAll("nav a[data-nav]")
     const icon = document.querySelectorAll("nav img[data-icon]")

     links.forEach((link) => {
     if (link.pathname === pathname)  {
             link.classList.add("selected-link")
     }
     })

 }

 document.addEventListener("DOMContentLoaded", main)

[vitorgouveia]

Dá console log no location.pathname, pathname e na condicional (link.pathname === pathname). Coloca tudo isso em um script e observa se quando vc troca de página essas variáveis mudam.