From 59b41eaa70a7a0acd85abe4ec75a2a49d2d0e8ec Mon Sep 17 00:00:00 2001 From: Andrew Tomaka Date: Mon, 16 Jun 2025 22:16:07 -0400 Subject: [PATCH 1/4] Ad a user card --- .../controllers/dropdown_controller.js | 39 ++++++++++ .../controllers/navigation_controller.js | 21 +++++ app/views/layouts/application.html.erb | 76 ++++++++++++++----- app/views/shared/_user_dropdown.html.erb | 38 ++++++++++ 4 files changed, 156 insertions(+), 18 deletions(-) create mode 100644 app/javascript/controllers/dropdown_controller.js create mode 100644 app/javascript/controllers/navigation_controller.js create mode 100644 app/views/shared/_user_dropdown.html.erb diff --git a/app/javascript/controllers/dropdown_controller.js b/app/javascript/controllers/dropdown_controller.js new file mode 100644 index 0000000..99d32de --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/app/javascript/controllers/navigation_controller.js b/app/javascript/controllers/navigation_controller.js new file mode 100644 index 0000000..fad8f4f --- /dev/null +++ b/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") + } +} \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 8441760..dfb32ab 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -12,24 +12,64 @@ -