https://rubiomusic.cl/news/wp-content/themes/shop-toolkit/assets/js/mobile-menu.js?ver=1.0.3

1/**
2 * Script for mobile menu
3 *
4 * Handles toggling the navigation menu for small screens and enables TAB key
5 * navigation support for dropdown menus.
6 */
7
8
9(function(){
10	// select all variable
11const smButton = document.getElementById('mmenu-btn');
12const smMenu = document.getElementById('mobile-navigation');
13
14if( !smMenu ){
15	return;
16}
17
18	const smOpen = smMenu.querySelector('.mopen');
19	const smClose = smMenu.querySelector('.mclose');
20	smClose.style.display = 'none';
21
22// button click event
23  smButton.addEventListener('click', function( ){
24	smMenu.classList.toggle( 'menu-active' );
25
26	
27	if( smButton.getAttribute('aria-expanded') === 'true' ){
28		smButton.setAttribute('aria-expanded', 'false');
29		smClose.style.display = 'none';
30		smOpen.style.display = 'block';
31	}else{
32		smButton.setAttribute('aria-expanded','true');
33		smClose.style.display = 'block';
34		smOpen.style.display = 'none';
35	}
36
37  }); // Click event end
38
39  // set outside the menu area 
40document.addEventListener('click',function(e){
41	const isInsideMenu = smMenu.contains(e.target);
42
43	if( ! isInsideMenu){
44		smMenu.classList.remove('menu-active');
45		smButton.setAttribute('aria-expanded','false');
46		smClose.style.display = 'none';
47		smOpen.style.display = 'block';
48	}
49
50})
51
52// add Icon has Children item
53
54//const linkHasSub = smMenu.querySelectorAll('.menu-item-has-children > a, .page_item_has_children > a');
55const linkHasSub = smMenu.querySelectorAll('.menu-item-has-children > .sub-menu, .page_item_has_children > .sub-menu');
56
57
58for (const child of linkHasSub) {
59	var icon = document.createElement('i');
60    icon.className = 'fas fa-chevron-down';
61	child.parentNode.insertBefore(icon, child);
62	
63}
64
65const subMenuIcon = smMenu.querySelectorAll('.menu-item-has-children > i , .page_item_has_children > i');
66
67for (const iconset of subMenuIcon) {
68	iconset.setAttribute('tabindex','0');
69	
70}
71
72	const linksWithChildren = smMenu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
73
74	for ( const link of subMenuIcon ) {
75		link.addEventListener( 'click', toggleClick, true );
76		link.addEventListener( 'focus', toggleFocus, true );
77	//	link.addEventListener( 'blur', toggleblur, true );
78	}
79
80	function toggleFocus(e){
81		
82		if( ! this.parentNode.classList.contains('focus')){
83			this.parentNode.classList.add('focus');
84			this.parentNode.classList.remove('clicked');
85		}
86
87	}
88	function toggleblur(e){
89		const firstLiA = smMenu.querySelctorAll('#wsm-menu >li a');
90
91		const firstLiaBlur = firstLiA.contains(e.target);

92		console.log(firstLiA);
93		
94		if(firstLiaBlur){
95
96			this.parentNode.classList.remove('focus');
97		}else{
98			this.parentNode.classList.add('focus');
99		}
100		
101
102	}
103	function toggleClick(e){
104		
105		if( this.parentNode.classList.contains('clicked')){
106			this.parentNode.classList.remove('clicked');
107		}else{
108			this.parentNode.classList.add('clicked');
109			this.parentNode.classList.remove('focus');
110		}
111
112	}
113
114focusableInNav = smMenu.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"])');
115
116
117	let firstFocusElement = focusableInNav[0];
118	let lestFocusElement = focusableInNav[focusableInNav.length - 1];
119	
120	firstFocusElement.addEventListener( 'keydown', moveFocusToBottom, true );
121	lestFocusElement.addEventListener( 'keydown', moveFocusToTop, true );
122
123	function moveFocusToBottom(e) {
124		if (e.key === "Tab" && e.shiftKey) {
125			e.preventDefault();
126			lestFocusElement.focus()
127		}
128	}
129	function moveFocusToTop(e) {
130		if (e.key === "Tab" && !e.shiftKey) {
131			e.preventDefault();
132			firstFocusElement.focus();
133		}
134	}
135
136
137
138
139}())