arctic_admin/src/main.js

Responsive Theme for ActiveAdmin

// right filter sidebar toggle
function sidebar() {
  return document.querySelector('#sidebar')
}
function sidebarToggle(event) {
  const insideSection = document.querySelector('#filters_sidebar_section')

  if (!(event.target === insideSection || insideSection.contains(event.target)) && event.target.className != "select2-selection__choice__remove") {
    sidebar().classList.toggle('sidebar_open')
  }
}

// left menu sidebar toggle with menu button
function menuButton() {
  return document.querySelector('#utility_nav')
}
function menu() {
  return document.querySelector('#tabs')
}
function menuToggle(event) {
  const currentUser = document.querySelector('#current_user')
  const logout = document.querySelector('#logout')
  const forbiddenLinks = event.target === logout ||
    logout.contains(event.target) ||
    event.target === currentUser ||
    (currentUser && currentUser.contains(event.target))
  if (!forbiddenLinks) {
    menu().classList.toggle('tabs_open')
  }
}

// left menu sidebar close on any click outside
function menuClose(event) {
  const forbiddenLinks = event.target === menu ||
    menu().contains(event.target) ||
    event.target === menuButton() ||
    menuButton().contains(event.target)
  if (menu().classList.contains('tabs_open') && !forbiddenLinks) {
    menu().classList.remove('tabs_open')
  }
}

// nested menu items toggle
function nestedMenuItems() {
  return document.querySelectorAll('#tabs .has_nested')
}

// add event listeners
function addListeners() {

  // right filter sidebar toggle
  if (sidebar()) {
    sidebar().addEventListener('click', sidebarToggle)
  }

  // left menu sidebar toggle with menu button
  if (menuButton()) {
    menuButton().addEventListener('click', menuToggle)
  }

  // left menu sidebar close on any click outside
  document.body.addEventListener('click', menuClose)

  // nested menu items toggle
  nestedMenuItems().forEach(
    (nestedMenuItem) => {
      nestedMenuItem.addEventListener('click', (e) => {
        e.stopPropagation()
        nestedMenuItem.classList.toggle('open')
      })
    }
  )
}

// remove all previous eventListeners
function removeListeners() {

  // right filter sidebar toggle
  if (sidebar()) {
    sidebar().removeEventListener('click', sidebarToggle)
  }

  // left menu sidebar toggle with menu button
  menuButton().removeEventListener('click', menuToggle)

  // left menu sidebar close on any click outside
  document.body.removeEventListener('click', menuClose)

  // nested menu items toggle
  nestedMenuItems().forEach(
    (nestedMenuItem) => {
      nestedMenuItem.removeEventListener('click', (e) => {
        e.stopPropagation()
        nestedMenuItem.classList.toggle('open')
      })
    }
  )
}

document.addEventListener('DOMContentLoaded', addListeners)

document.addEventListener('turbolinks:load', () => {
  removeListeners()
  addListeners()
})