Fix navigation priority settings conflict (https://github.com/woocommerce/woocommerce-admin/pull/6336)
* 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:
parent
d4d0eb8870
commit
80f5532543
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 ) {
|
||||
|
|
|
@ -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: '';
|
||||
|
|
|
@ -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 );
|
||||
|
|
Loading…
Reference in New Issue