import { Controller } from "@hotwired/stimulus"; export default class extends Controller { static targets = [ "collapse", // targets that receive expanded class when mobile nav shows "header", // target on which clicks don't hide mobile nav "logo", "search", ]; static classes = ["expanded"]; connect() { this.mousedown = false; } toggle(e) { e.preventDefault(); if (this.collapseTarget.classList.contains(this.expandedClass)) { this.leave(); this.logoTarget.focus(); } else { this.enter(); } } // This event is used to open the menu when user presses "TAB" and focuses on the burger menu focus(event) { // Ignore click events on the burger menu, we are only interested in tab events if (this.mousedown) { this.mousedown = false; return; } // Open the menu this.enter(); // Wait 50ms before focusing on the search input - necessary for Firefox mobile setTimeout(() => { this.hasSearchTarget && this.searchTarget.focus(); }, 50); } // Register if last event was a mousedown mouseDown(e) { this.mousedown = true; } hide(e) { !this.headerTarget.contains(e.target) && this.leave(); } leave() { this.collapseTargets.forEach((el) => el.classList.remove(this.expandedClass), ); } enter() { this.collapseTargets.forEach((el) => el.classList.add(this.expandedClass)); } }