woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-01 07:02:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

✨ Prepare a sub-navigation slot for the top-nav

Browse source
This commit is contained in:
Philipp Stracker 2025-01-28 19:03:30 +01:00
parent 2380892b65
commit 8bd0743183
No known key found for this signature in database
2 changed files with 44 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

10
modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
View file

@ -1,10 +1,12 @@
$margin_bottom: 48px;
.ppcp-r-navigation-container {
position: sticky;
top: var(--wp-admin--admin-bar--height);
z-index: 10;
padding: 10px 48px;
margin: 0 -20px 48px -20px;
margin: 0 -20px #{$margin_bottom} -20px;
box-shadow: 0 -1px 0 0 $color-gray-300 inset;
background: var(--ppcp-color-app-bg);
@ -83,6 +85,12 @@
box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
}
+ .ppcp--top-sub-navigation {
position: relative;
margin: -#{$margin_bottom } -20px #{$margin_bottom};
padding: 24px 20px 0;
}
@media screen and (max-width: 782px) {
padding: 10px 12px;

61
modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js
View file

@ -15,6 +15,7 @@ const TopNavigation = ( {
onTitleClick = null,
showProgressBar = false,
progressBarPercent = 0,
subNavigation = null,
} ) => {
const { goToWooCommercePaymentsTab } = useNavigation();
const { isScrolled } = useIsScrolled();
@ -40,35 +41,43 @@ const TopNavigation = ( {
}, [] );
return (
<div className={ className }>
<div className="ppcp-r-navigation">
<BusyStateWrapper
className="ppcp-r-navigation--left"
busySpinner={ false }
enabled={ ! exitOnTitleClick }
>
<Button
variant="link"
onClick={ handleTitleClick }
className="is-title"
<>
<nav className={ className }>
<div className="ppcp-r-navigation">
<BusyStateWrapper
className="ppcp-r-navigation--left"
busySpinner={ false }
enabled={ ! exitOnTitleClick }
>
<Icon icon={ chevronLeft } />
<span className={ titleClassName }>{ title }</span>
</Button>
</BusyStateWrapper>
<Button
variant="link"
onClick={ handleTitleClick }
className="is-title"
>
<Icon icon={ chevronLeft } />
<span className={ titleClassName }>{ title }</span>
</Button>
</BusyStateWrapper>
<BusyStateWrapper
className="ppcp-r-navigation--right"
busySpinner={ false }
>
{ children }
</BusyStateWrapper>
<BusyStateWrapper
className="ppcp-r-navigation--right"
busySpinner={ false }
>
{ children }
</BusyStateWrapper>
{ showProgressBar && (
<ProgressBar percent={ progressBarPercent } />
) }
</div>
</div>
{ showProgressBar && (
<ProgressBar percent={ progressBarPercent } />
) }
</div>
</nav>
{ subNavigation && (
<section className="ppcp--top-sub-navigation">
{ subNavigation }
</section>
) }
</>
);
};