Sidebar now scrolls independently, so long threads don’t trap the sidebar until the main content reaches its end

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/sidebar.css

@@ -2,6 +2,9 @@
   position: sticky;
   top: calc(var(--nav-height) + var(--spacing-5));
   align-self: start;
+  max-height: calc(100vh - var(--nav-height) - var(--spacing-5));
+  overflow-y: auto;
+  padding-right: var(--spacing-2);
 }
 
 .sidebar-section {

app/javascript/controllers/nav_toggle_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["button", "menu"]
+
+  connect() {
+    this.close()
+  }
+
+  toggle() {
+    if (document.body.classList.contains("nav-open")) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    document.body.classList.add("nav-open")
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-expanded", "true")
+    }
+  }
+
+  close() {
+    document.body.classList.remove("nav-open", "sidebar-open")
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-expanded", "false")
+    }
+  }
+}