diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index 797682c51..13ff3ec4d 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -35,8 +35,8 @@ module FiltersHelper }, &block end - def filter_collapsible_section(title, &block) - tag.details class: "popup__section", open: true do + def collapsible_nav_section(title, &block) + tag.details class: "popup__section", data: { controller: "nav-section-expander", action: "toggle->nav-section-expander#toggle", nav_section_expander_key_value: title.parameterize }, open: true do concat(tag.summary(class: "popup__section-title") do concat title concat icon_tag "caret-down" diff --git a/app/javascript/controllers/nav_section_expander_controller.js b/app/javascript/controllers/nav_section_expander_controller.js new file mode 100644 index 000000000..930b8760e --- /dev/null +++ b/app/javascript/controllers/nav_section_expander_controller.js @@ -0,0 +1,26 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static values = { key: String } + + connect() { + this.#restoreToggle() + } + + toggle() { + if (this.element.open) { + localStorage.removeItem(this.#localStorageKey) + } else { + localStorage.setItem(this.#localStorageKey, this.keyValue) + } + } + + #restoreToggle() { + const isCollapsed = localStorage.getItem(this.#localStorageKey) != null + if (isCollapsed) this.element.open = false + } + + get #localStorageKey() { + return this.keyValue + } +} diff --git a/app/views/filters/menu/_collections.html.erb b/app/views/filters/menu/_collections.html.erb index c43ce3f23..c9298093e 100644 --- a/app/views/filters/menu/_collections.html.erb +++ b/app/views/filters/menu/_collections.html.erb @@ -2,7 +2,7 @@ <%= form_with url: user_filtering.self_filter_path(script_name: Account.sole.slug), method: :get, class: "display-contents", data: { controller: "form" } do |form| %> <% if user_filtering.collections.any? %> - <%= filter_collapsible_section "Collections" do %> + <%= collapsible_nav_section "Collections" do %> <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %> <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %> <% end %> diff --git a/app/views/filters/menu/_custom.html.erb b/app/views/filters/menu/_custom.html.erb index e9e061345..2de2cae1d 100644 --- a/app/views/filters/menu/_custom.html.erb +++ b/app/views/filters/menu/_custom.html.erb @@ -1,4 +1,4 @@ -<%= filter_collapsible_section "Saved filters" do %> +<%= collapsible_nav_section "Saved filters" do %> <%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %> <%= render "filters/menu/custom/create" %> <%= render partial: "filters/menu/custom/filter", collection: user_filtering.filters, as: :filter, locals: { user_filtering: user_filtering } %> diff --git a/app/views/filters/menu/_places.html.erb b/app/views/filters/menu/_places.html.erb index 0bf30d8e4..26a05b2be 100644 --- a/app/views/filters/menu/_places.html.erb +++ b/app/views/filters/menu/_places.html.erb @@ -1,4 +1,4 @@ -<%= filter_collapsible_section "Jump to…" do %> +<%= collapsible_nav_section "Jump to…" do %> <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %> <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %> <%= filter_place_menu_item notifications_path, "Notifications", "bell" %> diff --git a/app/views/filters/menu/_tags.html.erb b/app/views/filters/menu/_tags.html.erb index 1b2c27c86..104d6f29f 100644 --- a/app/views/filters/menu/_tags.html.erb +++ b/app/views/filters/menu/_tags.html.erb @@ -1,3 +1,3 @@ -<%= filter_collapsible_section "Tags" do %> +<%= collapsible_nav_section "Tags" do %> <%= render partial: "filters/menu/tags/tag", collection: user_filtering.tags, as: :tag %> <% end %> diff --git a/app/views/filters/menu/_users.html.erb b/app/views/filters/menu/_users.html.erb index cbc88ce98..fc2dff5ee 100644 --- a/app/views/filters/menu/_users.html.erb +++ b/app/views/filters/menu/_users.html.erb @@ -1,3 +1,3 @@ -<%= filter_collapsible_section "People" do %> +<%= collapsible_nav_section "People" do %> <%= render partial: "filters/menu/users/user", collection: user_filtering.users, as: :user %> <% end %>