From a1c342e0e17f4983a6a40023e86064368c4de470 Mon Sep 17 00:00:00 2001
From: Daniel Wilkowski <wilkowski.kontakt@gmail.com>
Date: Wed, 11 Sep 2024 14:07:51 +0200
Subject: [PATCH] Enable sticky aside for sidebars in forum

---
 resources/feature/stickyAside/sticky-aside.js | 28 +++++++++++++
 .../feature/stickyAside/sticky-aside.scss     |  6 +++
 resources/js/app.js                           |  1 +
 resources/sass/core.scss                      |  2 +
 resources/views/forum/partials/sidebar.twig   |  2 +-
 resources/views/home.twig                     | 41 -------------------
 6 files changed, 38 insertions(+), 42 deletions(-)
 create mode 100644 resources/feature/stickyAside/sticky-aside.js
 create mode 100644 resources/feature/stickyAside/sticky-aside.scss

diff --git a/resources/feature/stickyAside/sticky-aside.js b/resources/feature/stickyAside/sticky-aside.js
new file mode 100644
index 000000000..9fe379794
--- /dev/null
+++ b/resources/feature/stickyAside/sticky-aside.js
@@ -0,0 +1,28 @@
+const stickyAside = document.querySelector(".sticky-aside");
+const navbar = document.querySelector("nav.navbar");
+const header = document.querySelector("header");
+
+function reposition() {
+  const asideHeight = stickyAside.getBoundingClientRect().height;
+  const viewportHeight = window.innerHeight;
+  let navbarHeight = getNavbarHeight();
+  if (navbarHeight + asideHeight < viewportHeight) {
+    stickyAside.style.top = navbarHeight + "px"; // pin top top
+  } else {
+    stickyAside.style.top = viewportHeight - asideHeight + "px"; // pin to bottom
+  }
+}
+
+function getNavbarHeight() {
+  if (header.classList.contains("fixed-top")) {
+    // if navbar is fixed, then `.bottom` will always be bigger
+    // than 0, but we add Math.max() in case styles are changed
+    // or something gets renamed
+    return Math.max(navbar.getBoundingClientRect().bottom, 0);
+  }
+  return 0;
+}
+
+window.addEventListener("resize", reposition, {passive: true});
+reposition();
+[0, 1000, 4000, 6000, 10000].forEach(time => setTimeout(reposition, time));
diff --git a/resources/feature/stickyAside/sticky-aside.scss b/resources/feature/stickyAside/sticky-aside.scss
new file mode 100644
index 000000000..b706ec779
--- /dev/null
+++ b/resources/feature/stickyAside/sticky-aside.scss
@@ -0,0 +1,6 @@
+.sticky-aside {
+  position: sticky;
+  padding: 15px 0;
+  margin: -15px 0;
+  transition: top .15s;
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index 25c88ddba..3c07dc75e 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -21,6 +21,7 @@ import './plugins/sociale.js';
 import './sentry.ts';
 import './store/index.ts';
 import './gdpr.ts';
+import '../feature/stickyAside/sticky-aside.js';
 
 import '../../survey/src/survey';
 
diff --git a/resources/sass/core.scss b/resources/sass/core.scss
index 25c6dd468..5218626a7 100644
--- a/resources/sass/core.scss
+++ b/resources/sass/core.scss
@@ -79,6 +79,8 @@
 @import "pages/user";
 @import "pages/wiki";
 
+@import "../feature/stickyAside/sticky-aside";
+
 @import "../../node_modules/@riddled/4play/src/style";
 
 #cache-break {
diff --git a/resources/views/forum/partials/sidebar.twig b/resources/views/forum/partials/sidebar.twig
index 302969c6a..12c197812 100644
--- a/resources/views/forum/partials/sidebar.twig
+++ b/resources/views/forum/partials/sidebar.twig
@@ -1,4 +1,4 @@
-<aside id="sidebar">
+<aside class="sticky-aside" id="sidebar">
   {% block side_menu %}
   {% endblock %}
 
diff --git a/resources/views/home.twig b/resources/views/home.twig
index ae2b602a7..ee0450c8a 100644
--- a/resources/views/home.twig
+++ b/resources/views/home.twig
@@ -225,50 +225,9 @@
             {% endfor %}
           </div>
         </section>
-
         {{ render_block('job_ads') }}
       </aside>
     </div>
-    <style>
-        .sticky-aside {
-            position: sticky;
-            padding: 15px 0;
-            margin: -15px 0;
-            transition: top .15s;
-        }
-    </style>
-    <script>
-      (function () {
-        const stickyAside = document.querySelector(".sticky-aside");
-        const navbar = document.querySelector("nav.navbar");
-        const header = document.querySelector("header");
-
-        function reposition() {
-          const hasNavbar = header.classList.contains("fixed-top");
-          const elementHeight = stickyAside.getBoundingClientRect().height;
-          const viewportHeight = window.innerHeight;
-          let navbarHeight;
-          if (hasNavbar) {
-            // if navbar is fixed, then `.bottom` will always be bigger
-            // than 0, but we add Math.max() in case styles are changed
-            // or something gets renamed
-            navbarHeight = Math.max(navbar.getBoundingClientRect().bottom, 0);
-          } else {
-            navbarHeight = 0;
-          }
-          if (elementHeight > (viewportHeight - navbarHeight)) {
-            stickyAside.style.top = -(elementHeight - viewportHeight) + "px";
-          } else {
-            stickyAside.style.top = navbarHeight + "px";
-          }
-        }
-
-        window.addEventListener("resize", reposition, {passive: true});
-        reposition();
-        window.stickyAsideReposition = reposition;
-        [0, 1000, 4000, 6000, 10000].forEach(time => setTimeout(reposition, time));
-      })();
-    </script>
   </div>
 
   <script type="text/javascript">