woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

✨ 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

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>
) }
</>
);
};