Menu hover/click settings toggle

.dev/assets/shared/css/header/sub-menu.css

@@ -50,6 +50,17 @@
 				left: 50%;
 			}
 		}
+
+		/* Spacer to fix menu hovers */
+		&::after {
+			bottom: 100%;
+			content: "";
+			height: 1.75rem;
+			left: 0;
+			position: absolute;
+			right: 0;
+			width: 100%;
+		}
 	}
 
 	/* All other submenus */
@@ -126,6 +137,7 @@
 
 	& svg {
 		transform: rotate(180deg);
+		z-index: 9999;
 	}
 }
 

.dev/assets/shared/js/frontend/components/primary-menu.js

@@ -10,7 +10,7 @@ const init = () => {
 			target: '#header__navigation',
 			toggle: '#nav-toggle',
 			// eslint-disable-next-line
-			sub_menu_open: 'click'
+			sub_menu_open: goFrontend.openMenuOnHover ? 'hover' : 'click'
 		} );
 	}
 

.dev/assets/shared/js/frontend/vendor/responsive-nav.js

@@ -7,7 +7,7 @@
 
 		'target'		:	'#primary-nav',      // the selector of the nav menu <ul>
 		'toggle'		:	'#js-menu-toggle',   // the ID of the link you're using to open/close the small screen menu
-		'sub_menu_open'	:	'hover'              // "click" is the other option
+		'sub_menu_open'	:	'hover'
 
 	}, function() {
 
@@ -98,10 +98,21 @@
 			currentTarget = e.currentTarget;
 			target = e.target;
 
+			console.log( 'Before' );
+			console.log( currentTarget );
+			console.log( target );
+			console.log( '----------' );
+
 			if ( target.tagName === 'svg' || target.tagName === 'path' ) {
+				console.log( 'Yes, the target is an SVG' );
 				target = currentTarget.closest( '.menu-item > a' );
 			}
 
+			console.log( 'After' );
+			console.log( currentTarget );
+			console.log( target );
+			console.log( '----------' );
+
 			if ( target.getAttribute( 'aria-haspopup' ) ) {
 				// Stop links from firing
 				e.preventDefault();
@@ -220,10 +231,12 @@
 		}; // listener_close_open_menus()
 
 		function menu_sub_close( open_item ) {
-			open_item.classList.remove('submenu-is-open');
-			open_item.parentNode.classList.remove('child-has-focus');
+			if ( open_item && open_item.classList ) {
+				open_item.classList.remove('submenu-is-open');
+				open_item.parentNode.classList.remove('child-has-focus');
+			}
 
-			if ( open_item.parentNode.querySelector( '.sub-menu' ) ) {
+			if ( open_item && open_item.parentNode && open_item.parentNode.querySelector( '.sub-menu' ) ) {
 				open_item.parentNode.querySelector( '.sub-menu' ).setAttribute( 'aria-hidden', 'true' );
 			}
 		}; // menu_sub_close()
@@ -265,11 +278,11 @@
 
 				// Loop through all submenus and bind events when needed
 				for ( i = 0; i < menu_items_with_children_count; i = i + 1 ) {
-					if ( sub_menu_acion !== 'click' ) {
-						menu_items_with_children[i].addEventListener( 'click', listener_submenu_click );
-						menu_items_with_children[i].removeEventListener( 'focusin', listener_submenu_focus );
-						menu.classList.add( 'uses-click' );
+					var svgElements = menu_items_with_children[i].querySelectorAll( 'svg' );
+					for ( var q = 0; q < svgElements.length; q = q + 1 ) {
+						svgElements[q].addEventListener( 'click', listener_submenu_click );
 					}
+					menu_items_with_children[i].removeEventListener( 'focusin', listener_submenu_focus );
 				} // for
 
 				// Bind the event
@@ -373,10 +386,34 @@
 
 				}
 
-				menu.classList.add( 'uses-click' );
+				menu.classList.add( sub_menu_acion === 'click' ? 'uses-click' : 'uses-hover' );
 			} else if ( sub_menu_acion !== 'click' ) {
 				if ( get_screen_size( 'has-full-nav' ) ) {
+					menu_items_with_children[i].addEventListener( 'mouseover', listener_submenu_focus );
+					menu_items_with_children[i].addEventListener( 'mouseout', function() {
+						var open_menus = menu.querySelectorAll( '.submenu-is-open' );
+						var open_menus_count = open_menus.length;
+						var opn;
+
+						// We were getting some errors, so let's add in a checkpoint
+						if ( open_menus_count ) {
+
+							// Loop through all the open menus and close them
+							for ( opn = 0; opn < open_menus_count; opn = opn + 1 ) {
+
+								menu_sub_close( open_menus[opn] );
+
+							} // for
+
+						}
+					} );
 					menu_items_with_children[i].addEventListener( 'focusin', listener_submenu_focus );
+					menu_items_with_children[i].querySelectorAll( '.sub-menu' ).forEach( submenu => {
+						submenu.addEventListener( 'mouseover', event => {
+							submenu.parentElement.classList.add( 'child-has-focus' );
+							submenu.previousElementSibling.classList.add( 'submenu-is-open' );
+						}, false );
+					} );
 				} // if
 			} // if
 		} // for

.dev/tests/php/test-core.php

@@ -557,7 +557,7 @@ function testScriptsLocalizedData() {
 
 		global $wp_scripts;
 
-		$this->assertEquals( 'var GoText = {"searchLabel":"Expand search field"};', $wp_scripts->registered['go-frontend']->extra['data'] );
+		$this->assertEquals( 'var goFrontend = {"openMenuOnHover":"1"};', $wp_scripts->registered['go-frontend']->extra['data'] );
 
 	}
 

.dev/tests/php/test-customizer.php

@@ -137,6 +137,19 @@ function test_hooked_register_social_controls() {
 
 	}
 
+	/**
+	 * Test register_menu_controls is hooked correctly
+	 */
+	function test_hooked_register_menu_controls() {
+
+		$this->assertEquals(
+			10,
+			has_action( 'customize_register', 'Go\Customizer\register_menu_controls' ),
+			'customize_register is not attached to Go\Customizer\register_menu_controls. It might also have the wrong priority (validated priority: 10)'
+		);
+
+	}
+
 	/**
 	 * Test customize_preview_init is hooked correctly to customize_preview_init
 	 */
@@ -976,6 +989,17 @@ function test_register_social_controls_social_icon_x_setting_and_controls() {
 
 	}
 
+	/**
+	 * Test the register_menu_controls section is registered
+	 */
+	function test_register_menu_controls_menus_section() {
+
+		Go\Customizer\register_menu_controls( $GLOBALS['wp_customize'] );
+
+		$this->assertNotNull( $GLOBALS['wp_customize']->get_section( 'go_menu_behavior' ) );
+
+	}
+
 	/**
 	 * Test the viewport_basis setting is registered
 	 */

includes/core.php

@@ -393,9 +393,9 @@ function scripts() {
 
 	wp_localize_script(
 		'go-frontend',
-		'GoText',
+		'goFrontend',
 		array(
-			'searchLabel' => esc_html__( 'Expand search field', 'go' ),
+			'openMenuOnHover' => (bool) get_theme_mod( 'open_menu_on_hover', true ),
 		)
 	);
 

includes/customizer.php

@@ -28,6 +28,7 @@ function setup() {
 	add_action( 'customize_register', $n( 'register_header_controls' ) );
 	add_action( 'customize_register', $n( 'register_footer_controls' ) );
 	add_action( 'customize_register', $n( 'register_social_controls' ) );
+	add_action( 'customize_register', $n( 'register_menu_controls' ) );
 	add_action( 'customize_register', $n( 'rename_panels' ) );
 	add_action( 'customize_preview_init', $n( 'customize_preview_init' ) );
 	add_action( 'customize_controls_enqueue_scripts', $n( 'customize_preview_init' ) );
@@ -937,6 +938,45 @@ function register_social_controls( \WP_Customize_Manager $wp_customize ) {
 	);
 }
 
+/**
+ * Register the menu within Customize.
+ *
+ * @param \WP_Customize_Manager $wp_customize The customize manager object.
+ *
+ * @return void
+ */
+function register_menu_controls( \WP_Customize_Manager $wp_customize ) {
+
+	$wp_customize->add_section(
+		'go_menu_behavior',
+		array(
+			'title' => __( 'Menu Behavior', 'go' ),
+			'panel' => 'nav_menus',
+		)
+	);
+
+	$wp_customize->add_setting(
+		'open_menu_on_hover',
+		array(
+			'capability'        => 'edit_theme_options',
+			'default'           => true,
+			'sanitize_callback' => 'absint',
+		)
+	);
+
+	$wp_customize->add_control(
+		'open_menu_on_hover',
+		array(
+			'label'       => __( 'Show sub menus on hover.', 'go' ),
+			'description' => esc_html__( 'Show sub menu items on hover.', 'go' ),
+			'section'     => 'go_menu_behavior',
+			'settings'    => 'open_menu_on_hover',
+			'type'        => 'checkbox',
+		)
+	);
+
+}
+
 /**
  * Rename customizer panels.
  *