From 0b137e8d128132e984aa532e4134fa8bb8255dd4 Mon Sep 17 00:00:00 2001
From: "Quintino A. G. Souza" <quin@unicamp.br>
Date: Mon, 16 Mar 2026 10:38:54 -0300
Subject: [PATCH] Adiciona barra social lateral ao tema do microsite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../css/microsite.css                         | 80 +++++++++++++++++--
 .../js/social-bar.js                          | 35 ++++++++
 .../site_users_microsite_theme.libraries.yml  |  4 +
 .../templates/layout/page.html.twig           | 18 +++--
 .../templates/layout/region--social.html.twig | 20 +++++
 5 files changed, 145 insertions(+), 12 deletions(-)
 create mode 100644 themes/site_users_microsite_theme/js/social-bar.js
 create mode 100644 themes/site_users_microsite_theme/templates/layout/region--social.html.twig

diff --git a/themes/site_users_microsite_theme/css/microsite.css b/themes/site_users_microsite_theme/css/microsite.css
index f60ce4b..7e8e497 100644
--- a/themes/site_users_microsite_theme/css/microsite.css
+++ b/themes/site_users_microsite_theme/css/microsite.css
@@ -154,12 +154,82 @@ body.microsite {
   margin-bottom: 1.5rem;
 }
 
-/* Social ------------------------------------------------------------------- */
+/* Social Bar --------------------------------------------------------------- */
+/*
+ * Mobile: barra horizontal compacta.
+ * Desktop (≥ 1200px): coluna lateral fixa à esquerda, 90px de largura,
+ * conteúdo girado −90° (estilo Olivero Social Bar).
+ */
 
-.microsite-social {
-  max-width: 900px;
-  margin: 0 auto 2rem;
-  padding: 0 1.5rem;
+.social-bar__inner {
+  position: relative;
+  padding: 0.5rem 1rem;
+}
+
+.social-bar__inner .rotate > * {
+  margin-bottom: 0.5rem;
+}
+
+@media (min-width: 1200px) {
+  /* Layout flex: barra social à esquerda, conteúdo principal à direita */
+  .microsite-layout--has-social {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .microsite-content-area {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* Coluna .social-bar no fluxo (placeholder de 90px) */
+  .social-bar {
+    flex-shrink: 0;
+    width: 90px;
+    background-color: #f3f3f3;
+    align-self: stretch;
+  }
+
+  /* Wrapper interno: posicionamento relativo normal; .is-fixed o fixa */
+  .social-bar__inner {
+    position: relative;
+    width: 90px;
+    padding: 2.5rem 0;
+  }
+
+  .social-bar__inner.is-fixed {
+    position: fixed;
+    top: 3rem;
+    left: 0;
+    height: calc(100vh - 3rem);
+  }
+
+  /* Conteúdo girado em −90° */
+  .social-bar__inner .rotate {
+    position: absolute;
+    left: 50%;
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100vh;
+    transform: rotate(-90deg) translateX(-100%);
+    transform-origin: left;
+  }
+
+  @supports (width: max-content) {
+    .social-bar__inner .rotate {
+      width: max-content;
+    }
+  }
+
+  .social-bar__inner .rotate > * {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+  }
+
+  .social-bar__inner .rotate > *:not(:first-child) {
+    margin-right: 2rem;
+  }
 }
 
 /* Footer ------------------------------------------------------------------- */
diff --git a/themes/site_users_microsite_theme/js/social-bar.js b/themes/site_users_microsite_theme/js/social-bar.js
new file mode 100644
index 0000000..e0de475
--- /dev/null
+++ b/themes/site_users_microsite_theme/js/social-bar.js
@@ -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);
diff --git a/themes/site_users_microsite_theme/site_users_microsite_theme.libraries.yml b/themes/site_users_microsite_theme/site_users_microsite_theme.libraries.yml
index fe64819..4ea9886 100644
--- a/themes/site_users_microsite_theme/site_users_microsite_theme.libraries.yml
+++ b/themes/site_users_microsite_theme/site_users_microsite_theme.libraries.yml
@@ -2,3 +2,7 @@ global:
   css:
     theme:
       css/microsite.css: {}
+  js:
+    js/social-bar.js: {}
+  dependencies:
+    - core/drupal
diff --git a/themes/site_users_microsite_theme/templates/layout/page.html.twig b/themes/site_users_microsite_theme/templates/layout/page.html.twig
index ca2ee7a..b43420a 100644
--- a/themes/site_users_microsite_theme/templates/layout/page.html.twig
+++ b/themes/site_users_microsite_theme/templates/layout/page.html.twig
@@ -13,7 +13,15 @@
  * - microsite_user_photo: render array da foto padrão (view mode 'thumbnail').
  */
 #}
-<div class="microsite-layout">
+<div class="microsite-layout{% if page.social %} microsite-layout--has-social{% endif %}">
+
+  {% if page.social %}
+    <div class="social-bar">
+      {{ page.social }}
+    </div>
+  {% endif %}
+
+  <div class="microsite-content-area">
 
   {# Header: blocos configurados no admin OU header padrão gerado com dados do usuário. #}
   {% if page.header %}
@@ -70,16 +78,12 @@
     {% endif %}
   </div>
 
-  {% if page.social %}
-    <div class="microsite-social">
-      {{ page.social }}
-    </div>
-  {% endif %}
-
   {% if page.footer %}
     <footer class="microsite-footer">
       {{ page.footer }}
     </footer>
   {% endif %}
 
+  </div>{# fim .microsite-content-area #}
+
 </div>
diff --git a/themes/site_users_microsite_theme/templates/layout/region--social.html.twig b/themes/site_users_microsite_theme/templates/layout/region--social.html.twig
new file mode 100644
index 0000000..4bb7467
--- /dev/null
+++ b/themes/site_users_microsite_theme/templates/layout/region--social.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Template para a região Social — barra lateral vertical (estilo Olivero).
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see \Drupal\Core\Theme\ThemePreprocess::preprocessRegion()
+ */
+#}
+
+<div class="social-bar__inner" data-drupal-selector="social-bar-inner">
+  <div class="rotate">
+    {{ content }}
+  </div>
+</div>