full width submenu

and that line:

const anchors = ["#top", "#barrierefrei", "#geberit", "#perma-trade"];

could not be generated automatically from the submenu itself?
and the opening code tag has no closing one ?

______________

i try to implement it as normal script – not via enqueue inline script.

function observe_submenu() {
?>
<script type="text/javascript">	
window.addEventListener("DOMContentLoaded", function () { 
(function($) {
	const setActive = (entry) => {     
		$("#top .av-subnav-menu a").parent("li").removeClass("current-menu-item");
		let item = $('#top .av-subnav-menu .menu-item a[href*="' + entry + '"]');

		if(!item.attr("href").includes(entry)) return;
		
		let list = item.parent("li");
		let parent = list.parent("#menu-sub-menu");

		if(list.is(".current-menu-item")) return;

		parent.find("li").removeClass("current-menu-item");
		list.addClass("current-menu-item");
	}
	
	const createObserver = (entry) => {
		let el = document.querySelector(entry);
		
		const observer = new IntersectionObserver(function(entries) {    
			if(entries[0].isIntersecting === true) {
				setActive(entry);
			}
			
			}, { 
				root: document, 
				"rootMargin": "-5% 0% -15% 0%",
				"threshold":  0.95
			});

		observer.observe(el);
	}

	const anchors = [];
	$('#top .av-subnav-menu .menu-item a[href^="#"]').each(function(){
	  anchors.push( $(this).attr('href') );
	})

	anchors.map(anchor => {
		createObserver(anchor);
	});
})(jQuery);
});
</script>
<?php
}
add_action( 'wp_footer', 'observe_submenu', 999 );

( maybe it is better for performance reasons to implement this only for the page where the submenu is located )