Componente de tema de submenus do cabeçalho empurra a parte inferior da barra lateral para fora da tela

Cabeçalhos personalizados não são incluídos no cálculo, isso pode ser reproduzido adicionando qualquer conteúdo à seção header de um tema.

O cálculo que usamos para a barra lateral e o chat leva em consideração a altura do cabeçalho do Discourse e define --header-offset como uma variável ao calcular algumas alturas.

Incluir cabeçalhos personalizados pode ser um pouco complicado porque o conteúdo do cabeçalho personalizado não fica fixo na rolagem por padrão, como o cabeçalho do Discourse… então, se o incluirmos no cálculo por padrão, assim que você rolar e o cabeçalho personalizado desaparecer, a altura ficará incorreta.

Então, por exemplo, se eu aumentar manualmente --header-offset pela altura do meu cabeçalho personalizado (é aproximadamente 60px por padrão), você terá uma lacuna acima da barra lateral na rolagem:

Adicionamos uma classe .docked ao body quando um cabeçalho personalizado sai de vista, então é possível usá-lo… o que é melhor, mas há uma transição perceptível enquanto a altura da barra lateral se ajusta entre os estados… isso ocorre porque .docked está ativado ou desativado.

Se você quiser um cabeçalho fixo, isso é um pouco mais fácil de contornar… porque você pode aumentar --header-offset pela altura do cabeçalho personalizado e, em seguida, definir o valor top de .d-header-wrap como a altura do cabeçalho personalizado:

Uma solução que vem à mente para melhorar o caso do cabeçalho não fixo é:

  1. Verificar a altura do cabeçalho personalizado
  2. Incluir a altura do cabeçalho personalizado em --header-offset
  3. Decrementar a altura do cabeçalho personalizado usada no cálculo de --header-offset com base na posição de rolagem. Isso ajustará a altura da barra lateral mais gradualmente do que a classe .docked pode fazer.

Pode levar alguma experimentação para acertar…

5 curtidas