* Remove the late addition of the core items for the navigation

* Add fallbacks in case the nav is not detected server-side

* Check if ref is set before resizing
This commit is contained in:
Joshua T Flowers 2021-02-12 16:42:04 -05:00 committed by GitHub
parent d4d0eb8870
commit 80f5532543
4 changed files with 66 additions and 65 deletions

View File

@ -51,7 +51,7 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
debounceTimer = setTimeout( function () {
const wpBody = document.querySelector( '#wpbody' );
if ( ! wpBody ) {
if ( ! wpBody || ! headerElement.current ) {
return;
}

View File

@ -26,6 +26,7 @@ const Container = ( { menuItems } ) => {
useEffect( () => {
// Collapse the original WP Menu.
document.documentElement.classList.remove( 'wp-toolbar' );
document.body.classList.add( 'has-woocommerce-navigation' );
const adminMenu = document.getElementById( 'adminmenumain' );
if ( ! adminMenu ) {

View File

@ -2,6 +2,69 @@
@import './components/container/style';
@import './components/header/style';
.woocommerce-navigation {
position: relative;
width: $navigation-width;
box-sizing: border-box;
background-color: $gray-900;
z-index: 1100; //Must be greater than z-index on .woocommerce-layout__header
@media ( max-width: 960px ) {
width: $header-height;
height: $header-height;
}
.components-navigation {
box-sizing: border-box;
}
}
.woocommerce-navigation__wrapper {
background-color: $gray-900;
position: absolute;
top: $header-height;
width: 100%;
height: calc(100vh - #{$header-height});
overflow-y: auto;
}
body.is-wc-nav-expanded {
.woocommerce-navigation {
width: $navigation-width;
height: 100%;
}
}
body.is-wc-nav-folded {
.woocommerce-navigation {
width: $header-height;
height: $header-height;
overflow: hidden;
.woocommerce-navigation-header {
> * {
display: none;
}
}
.woocommerce-navigation-header__site-icon {
display: block;
}
.components-navigation {
display: none;
}
}
.woocommerce-transient-notices {
left: $gap;
}
#wpbody {
margin-left: 0;
}
}
.has-woocommerce-navigation {
#wpadminbar,
#adminmenuwrap,
@ -38,69 +101,6 @@
}
}
.woocommerce-navigation {
position: relative;
width: $navigation-width;
box-sizing: border-box;
background-color: $gray-900;
z-index: 1100; //Must be greater than z-index on .woocommerce-layout__header
@media ( max-width: 960px ) {
width: $header-height;
height: $header-height;
}
}
.woocommerce-navigation__wrapper {
background-color: $gray-900;
position: absolute;
top: $header-height;
width: 100%;
height: calc(100vh - #{$header-height});
overflow-y: auto;
}
.components-navigation {
box-sizing: border-box;
}
&.is-wc-nav-expanded {
.woocommerce-navigation {
width: $navigation-width;
height: 100%;
}
}
&.is-wc-nav-folded {
.woocommerce-navigation {
width: $header-height;
height: $header-height;
overflow: hidden;
.woocommerce-navigation-header {
> * {
display: none;
}
}
.woocommerce-navigation-header__site-icon {
display: block;
}
.components-navigation {
display: none;
}
}
.woocommerce-transient-notices {
left: $gap;
}
#wpbody {
margin-left: 0;
}
}
.woocommerce-layout__header.is-embed-loading {
&::before {
content: '';

View File

@ -86,7 +86,7 @@ class Menu {
* Init.
*/
public function init() {
add_action( 'admin_menu', array( $this, 'add_core_items' ), PHP_INT_MAX );
add_action( 'admin_menu', array( $this, 'add_core_items' ), 100 );
add_filter( 'admin_enqueue_scripts', array( $this, 'enqueue_data' ), 20 );
add_filter( 'admin_menu', array( $this, 'migrate_core_child_items' ), PHP_INT_MAX - 1 );