Use Slideout.js with Genesis Sample theme - Similar to ShiftNav but lighter. https://www.damiencarbery.com/2020/02/use-slideout-js-with-genesis-sample-theme/

slideout.js.php

<?php
/*
Plugin Name: Slideout.js with Genesis Sample
Plugin URI: https://www.damiencarbery.com/2020/02/slideout-js-with-genesis-sample/
Description: Use Slideout.js mobile menu with Genesis Sample theme.
Author: Damien Carbery
Version: 0.1
*/


// Enqueue the Slideout.js script from the CDN.
add_action( 'wp_enqueue_scripts', 'dcwd_enqueue_slideout_js' );
function dcwd_enqueue_slideout_js() {
	wp_enqueue_script( 'slideout-js', 'https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js' );
}


// Don't need responsive menu because we are using ShiftNav to show the menu on mobile.
add_action( 'wp_enqueue_scripts', 'dcwd_disable_responsive_menu', 15 );
function dcwd_disable_responsive_menu() {
	wp_dequeue_script( 'genesis-sample-responsive-menu' );
}


// Run Slideout.js.
add_action( 'wp_footer', 'dcwd_launch_slideout_js' );
function dcwd_launch_slideout_js() {
?>
<script>
  var slideout = new Slideout({
	'panel': document.querySelector('.site-container'),
	'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });
  
  // Toggle buttons - use querySelectorAll because there are two buttons.
  document.querySelectorAll('.menu-toggle').forEach( addEventListener('click', function() {
	  slideout.toggle();
  }) );
</script>
<?php
}


// Add the Slideout.js CSS. The only change from the original docs
// is to add 'padding-left: 1em;' to move the panel contents out a bit.
add_action( 'wp_head', 'dcwd_slideout_js_css' );
function dcwd_slideout_js_css() {
?>
<style>
.slideout-menu {
  position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 0;
  width: 256px; overflow-y: scroll; -webkit-overflow-scrolling: touch; display: none;
  padding-left: 1em;
}

.slideout-panel { position: relative; z-index: 1; will-change: transform; }
.slideout-open, .slideout-open body, .slideout-open .slideout-panel { overflow: hidden; }
.slideout-open .slideout-menu { display: block; }
</style>
<?php
}


// Manually add the hamburger menu because the 'genesis-sample-responsive-menu' script is no longer
// enqueued. That script would add this markup and add 'genesis-responsive-menu' class to the menu.
add_action( 'genesis_header', 'dcwd_add_slideout_toggle_button' );
function dcwd_add_slideout_toggle_button() {
?>
<button class="menu-toggle dashicons-before dashicons-menu" aria-expanded="false" aria-pressed="false" id="genesis-mobile-nav-primary">Menu</button>
<?php
	// Add the 'genesis-responsive-menu' class to main menu to that it's hidden below 960px.
	add_filter( 'genesis_attr_nav-primary', 'dcwd_responsive_class_to_nav_primary' );
}


// Create the slideout panel, duplicating the primary menu inside it.
add_action( 'genesis_before', 'dcwd_add_slideout_panel' );
function dcwd_add_slideout_panel() {
	// Add a 'close' button.
?>
<div id="menu">
<button class="menu-toggle dashicons-before dashicons-no" aria-expanded="false" aria-pressed="false"></button>
<?php
	genesis_nav_menu(
		[
			'theme_location'  => 'primary',
			'menu_class'      => 'menu genesis-nav-menu menu-primary',
		]
	);
?>
</div>
<?php
}


// Add the 'genesis-responsive-menu' class to main menu to that it's hidden below 960px.
function dcwd_responsive_class_to_nav_primary( $attributes ) {
	$attributes[ 'class' ] .= ' genesis-responsive-menu';
	return $attributes;
}