Ad a user card

app/javascript/controllers/dropdown_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["button", "menu", "chevron"]
+
+  connect() {
+    this.closeOnClickOutside = this.closeOnClickOutside.bind(this)
+  }
+
+  toggle() {
+    if (this.menuTarget.classList.contains("hidden")) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  open() {
+    this.menuTarget.classList.remove("hidden")
+    this.chevronTarget.classList.add("rotate-180")
+    document.addEventListener("click", this.closeOnClickOutside)
+  }
+
+  close() {
+    this.menuTarget.classList.add("hidden")
+    this.chevronTarget.classList.remove("rotate-180")
+    document.removeEventListener("click", this.closeOnClickOutside)
+  }
+
+  closeOnClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.closeOnClickOutside)
+  }
+}

app/javascript/controllers/navigation_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["hamburger", "menu"]
+
+  toggle() {
+    if (this.menuTarget.classList.contains("hidden")) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  open() {
+    this.menuTarget.classList.remove("hidden")
+  }
+
+  close() {
+    this.menuTarget.classList.add("hidden")
+  }
+}