Contents

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = ['svg', 'items', 'self'];

  collapsed = true;

  get key() {
    return this.selfTarget.getAttribute('data-menu-key-param')
  }

  get defaultState() {
    return this.selfTarget.getAttribute('data-menu-default-collapsed-state')
  }

  get userState() {
    return window.localStorage.getItem(this.key)
  }

  set userState(payload) {
    window.localStorage.setItem(this.key, payload)
  }

  get initiallyCollapsed() {
    if (this.userState === 'collapsed' || this.defaultState === 'collapsed') return true
    if (this.userState === 'expanded' || this.defaultState === 'expanded') return false

    return false
  }

  connect() {
    if (this.initiallyCollapsed) {
      this.collapsed = true
      this.markCollapsed()
    } else {
      this.collapsed = false
      this.markExpanded()
    }
  }

  triggerCollapse() {
    this.collapsed = !this.collapsed
    this.userState = this.collapsed ? 'collapsed' : 'expanded'

    this.updateDom()
  }

  updateDom() {
    if (this.collapsed) {
      this.markCollapsed()
    } else {
      this.markExpanded()
    }
  }

  markCollapsed() {
    this.svgTarget.classList.add('rotate-180')
    this.itemsTarget.classList.add('hidden')
  }

  markExpanded() {
    this.svgTarget.classList.remove('rotate-180')
    this.itemsTarget.classList.remove('hidden')
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
avo-2.5.2.pre.5	app/javascript/js/controllers/menu_controller.js