Enable sticky aside for sidebars in forum

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));

resources/feature/stickyAside/sticky-aside.scss

@@ -0,0 +1,6 @@
+.sticky-aside {
+  position: sticky;
+  padding: 15px 0;
+  margin: -15px 0;
+  transition: top .15s;
+}

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';
 

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 {

resources/views/forum/partials/sidebar.twig

@@ -1,4 +1,4 @@
-<aside id="sidebar">
+<aside class="sticky-aside" id="sidebar">
   {% block side_menu %}
   {% endblock %}
 

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">