mirror of
https://gitlab.unicamp.br/infimecc_drupal11_modules/site_users.git
synced 2026-05-03 21:20:42 -03:00
Adiciona barra social lateral ao tema do microsite
Implementa o layout estilo Olivero: em desktop (≥ 1200 px) a região Social fica fixada à esquerda com conteúdo girado −90°; em mobile exibe barra horizontal compacta. Usa IntersectionObserver para aplicar .is-fixed ao scroll. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
35
themes/site_users_microsite_theme/js/social-bar.js
Normal file
35
themes/site_users_microsite_theme/js/social-bar.js
Normal file
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @file
|
||||
* Barra social — comportamento de fixação ao scroll (estilo Olivero).
|
||||
*
|
||||
* Aplica a classe .is-fixed ao elemento .social-bar__inner quando o cabeçalho
|
||||
* do micro-site sai do viewport, no breakpoint desktop (≥ 1200px).
|
||||
*/
|
||||
((Drupal) => {
|
||||
const socialBarInner = document.querySelector(
|
||||
'[data-drupal-selector="social-bar-inner"]',
|
||||
);
|
||||
|
||||
if (!socialBarInner) return;
|
||||
|
||||
const navBreakpoint = window.matchMedia('(min-width: 1200px)');
|
||||
|
||||
function updateFixed(entries) {
|
||||
if (!navBreakpoint.matches) {
|
||||
socialBarInner.classList.remove('is-fixed');
|
||||
return;
|
||||
}
|
||||
entries.forEach((entry) => {
|
||||
socialBarInner.classList.toggle('is-fixed', entry.intersectionRatio < 1);
|
||||
});
|
||||
}
|
||||
|
||||
const header = document.querySelector('.microsite-header');
|
||||
|
||||
if (header) {
|
||||
const observer = new IntersectionObserver(updateFixed, {
|
||||
threshold: [0.999, 1],
|
||||
});
|
||||
observer.observe(header);
|
||||
}
|
||||
})(Drupal);
|
||||
Reference in New Issue
Block a user