Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Preventing desktop-sized navigation placeholder from appearing on mobile during load (https://github.com/woocommerce/woocommerce-admin/pull/5616)

This commit is contained in:
Joel Thiessen 2020-11-16 10:11:13 -08:00 committed by GitHub
parent 7a2a361cb8
commit b3e094889a
2 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
plugins/woocommerce-admin/client/navigation/components/header/index.js
View File

@ -19,17 +19,35 @@ const Header = () => {
const siteTitle = getSetting( 'siteTitle', '' ); const siteTitle = getSetting( 'siteTitle', '' );
const siteUrl = getSetting( 'siteUrl', '' ); const siteUrl = getSetting( 'siteUrl', '' );
const isScrolled = useIsScrolled(); const isScrolled = useIsScrolled();
const navClasses = {
folded: 'is-folded',
expanded: 'is-expanded',
};
const foldNav = () => {
document.body.classList.add( navClasses.folded );
document.body.classList.remove( navClasses.expanded );
};
const expandNav = () => {
document.body.classList.remove( navClasses.folded );
document.body.classList.add( navClasses.expanded );
};
const toggleFolded = () => { const toggleFolded = () => {
document.body.classList.toggle( 'is-folded' ); if ( document.body.classList.contains( navClasses.folded ) ) {
expandNav();
} else {
foldNav();
}
}; };
const foldOnMobile = ( screenWidth = document.body.clientWidth ) => { const foldOnMobile = ( screenWidth = document.body.clientWidth ) => {
const isSmallScreen = screenWidth <= 960; if ( screenWidth <= 960 ) {
foldNav();
document.body.classList[ isSmallScreen ? 'add' : 'remove' ]( } else {
'is-folded' expandNav();
); }
}; };
useEffect( () => { useEffect( () => {

26
plugins/woocommerce-admin/client/navigation/style.scss
View File

@ -11,6 +11,15 @@
display: none !important; display: none !important;
} }
#wpcontent,
#wpfooter {
margin-left: $navigation-width;
@media ( max-width: 960px ) {
margin-left: 0;
}
}
#woocommerce-embedded-navigation { #woocommerce-embedded-navigation {
position: fixed; position: fixed;
top: 0; top: 0;
@ -20,6 +29,11 @@
box-sizing: border-box; box-sizing: border-box;
background-color: $gray-900; background-color: $gray-900;
z-index: 1100; //Must be greater than z-index on .woocommerce-layout__header 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 { .woocommerce-navigation__wrapper {
@ -31,14 +45,10 @@
box-sizing: border-box; box-sizing: border-box;
} }
&:not(.is-folded) { &.is-expanded {
#wpcontent, #woocommerce-embedded-navigation {
#wpfooter { width: $navigation-width;
margin-left: $navigation-width; height: 100%;
@media ( max-width: 960px ) {
margin-left: 0;
}
} }
} }