From 8bd0743183e9f0be9366b8e658a168e5f3312579 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 28 Jan 2025 19:03:30 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Prepare=20a=20sub-navigation=20slot?=
 =?UTF-8?q?=20for=20the=20top-nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_navigation.scss      | 10 ++-
 .../ReusableComponents/TopNavigation.js       | 61 +++++++++++--------
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
index a4695e256..fdcbcaa40 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
@@ -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;
 
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js
index bbffaaaa5..d456c4e4a 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js
@@ -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>
+			) }
+		</>
 	);
 };