diff --git a/assets/css/src/blocks/_navigation.scss b/assets/css/src/blocks/_navigation.scss index 9155a05..4b1821f 100644 --- a/assets/css/src/blocks/_navigation.scss +++ b/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); + } + } + } + } diff --git a/assets/js/src/script.js b/assets/js/src/script.js new file mode 100644 index 0000000..5acf5a6 --- /dev/null +++ b/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' ); + } ); +} ); diff --git a/inc/Assets_Manager.php b/inc/Assets_Manager.php index 77542ec..bda65cc 100644 --- a/inc/Assets_Manager.php +++ b/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', ); /** diff --git a/inc/Core.php b/inc/Core.php index 7dc0c36..4a2328d 100644 --- a/inc/Core.php +++ b/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' ) ); } /**