fix: make navigation block responsive

assets/css/src/blocks/_navigation.scss

@@ -24,4 +24,35 @@
 	.wp-block-navigation__submenu-container {
 		gap: 24px !important;
 	}
+
+	.wp-block-navigation__responsive-container-content {
+
+		.wp-block-navigation-item {
+			display: flex;
+			justify-content: space-between;
+			flex-direction: row;
+			flex-wrap: wrap;
+			align-items: center;
+			padding: 0 24px;
+			width: 100vw;
+			box-sizing: border-box;
+
+			.wp-block-navigation__submenu-container {
+				display: none;
+			}
+
+			.wp-block-navigation__submenu-icon {
+				display: inline-block;
+				cursor: pointer;
+			}
+
+			&.is-submenu-open > .wp-block-navigation__submenu-container {
+				display: block;
+				width: 100%;
+				padding: 0;
+				padding-top: var(--wp--style--block-gap, 2em);
+			}
+		}
+	}
+
 }

assets/js/src/script.js

@@ -0,0 +1,7 @@
+/* global jQuery */
+
+jQuery( document ).ready( ( $ ) => {
+	$( '.wp-block-navigation-submenu__toggle' ).on( 'click', function () {
+		$( this ).parent( 'li' ).toggleClass( 'is-submenu-open' );
+	} );
+} );

inc/Assets_Manager.php

@@ -20,6 +20,7 @@ class Assets_Manager {
 		'editor-css'         => 'riverbank-editor',
 		'welcome-notice'     => 'riverbank-welcome-notice',
 		'design-pack-notice' => 'riverbank-design-pack-notice',
+		'frontend-js'        => 'riverbank-script',
 	);
 
 	/**

inc/Core.php

@@ -97,6 +97,7 @@ public function setup() {
 	 */
 	public function enqueue() {
 		Assets_Manager::enqueue_style( Assets_Manager::ASSETS_SLUGS['frontend-css'], 'style' );
+		Assets_Manager::enqueue_script( Assets_Manager::ASSETS_SLUGS['frontend-js'], 'script', true, array( 'jquery' ) );
 	}
 
 	/**