Light Stimulus controller that manages accordion side navigation behavior

navigation_controller.js

import ApplicationController from './application_controller'

export default class extends ApplicationController {
  static targets = ["selectable"]
  static values = {
    selectedClass: String
  }

  select(event) {
    const previousElement = this.selectableTargets.find(target => target.classList.contains(this.selectedClassValue))

    // sometimes clicking an element will focus, but not mark it selected
    // e.g. clicking an arrow to reveal a sub menu
    if (previousElement != undefined) {
      previousElement.classList.toggle(this.selectedClassValue)
    }

    event.target.classList.toggle(this.selectedClassValue)
  }
}

With this controller, you can wrap and target navigation links that you want to mark as "selected" or "active".

<span data-controller='navigation' data-navigation-selected-class-value='bg-gray-200' data-turbo-permanent>
  <%= link_to url, class: "hover: text-gray-900 hover:bg-gray-100 bg-gray-200", data: { navigation_target: "selectable", action: "navigation#select" } %>
  <%= link_to url, class: "hover: text-gray-900 hover:bg-gray-100" %>
</span>