bumi/tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move burger menu file to its own file

Browse Source
This commit is contained in:
bumi 2020-04-09 18:37:36 +02:00
parent 17d37edf0b
commit 971eba1355
2 changed files with 19 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/burger_menu.js Normal file
View File

@ -0,0 +1,17 @@
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = document.querySelectorAll('.navbar-burger');
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});

28
app/javascript/packs/application.js
View File

@ -8,6 +8,7 @@ require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('burger_menu');
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
@ -15,30 +16,3 @@ require("channels")
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});