From 841a98e0090f06632f1e58b4609d149cd2166cf0 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 3 Dec 2024 15:18:08 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20scroll-effect=20(shadow)=20to?=
 =?UTF-8?q?=20header=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_navigation.scss      |  5 +++
 .../Onboarding/Components/Navigation.js       |  9 +++-
 .../resources/js/hooks/useIsScrolled.js       | 44 +++++++++++++++++++
 3 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 modules/ppcp-settings/resources/js/hooks/useIsScrolled.js

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 311c22e7d..e149026cf 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
@@ -8,6 +8,7 @@
 
 	box-shadow: 0 -1px 0 0 $color-gray-300 inset;
 	background: var(--ppcp-color-app-bg);
+	transition: box-shadow 0.3s;
 
 	--wp-components-color-accent: #{$color-blueberry};
 	--color-text: #{$color-gray-900};
@@ -78,6 +79,10 @@
 		}
 	}
 
+	&.is-scrolled {
+		box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85,93,102,.3);
+	}
+
 	@media screen and (max-width: 480px) {
 		padding: 24px 35px;
 
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js
index b31dca26a..82bfdb656 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js
@@ -2,16 +2,23 @@ import { Button, Icon } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
+import classNames from 'classnames';
+
 import { OnboardingHooks } from '../../../../data';
+import useIsScrolled from '../../../../hooks/useIsScrolled';
 
 const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
 	const { title, isFirst, percentage, showNext, canProceed } = stepDetails;
+	const { isScrolled } = useIsScrolled();
 
 	const state = OnboardingHooks.useNavigationState();
 	const isDisabled = ! canProceed( state );
+	const className = classNames( 'ppcp-r-navigation-container', {
+		'is-scrolled': isScrolled,
+	} );
 
 	return (
-		<div className="ppcp-r-navigation-container">
+		<div className={ className }>
 			<div className="ppcp-r-navigation">
 				<div className="ppcp-r-navigation--left">
 					<Button
diff --git a/modules/ppcp-settings/resources/js/hooks/useIsScrolled.js b/modules/ppcp-settings/resources/js/hooks/useIsScrolled.js
new file mode 100644
index 000000000..2b40aa3e9
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/hooks/useIsScrolled.js
@@ -0,0 +1,44 @@
+/**
+ * Taken from WooCommerce core:
+ * https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/admin/client/hooks/useIsScrolled.js
+ */
+
+import { useEffect, useRef, useState } from '@wordpress/element';
+
+const isAtBottom = () =>
+	window.innerHeight + window.scrollY >= document.body.scrollHeight;
+
+const useIsScrolled = () => {
+	const [ isScrolled, setIsScrolled ] = useState( false );
+	const [ atBottom, setAtBottom ] = useState( isAtBottom() );
+	const rafHandle = useRef( null );
+	useEffect( () => {
+		const updateIsScrolled = () => {
+			setIsScrolled( window.pageYOffset > 20 );
+			setAtBottom( isAtBottom() );
+		};
+
+		const scrollListener = () => {
+			rafHandle.current =
+				window.requestAnimationFrame( updateIsScrolled );
+		};
+
+		window.addEventListener( 'scroll', scrollListener );
+
+		window.addEventListener( 'resize', scrollListener );
+
+		return () => {
+			window.removeEventListener( 'scroll', scrollListener );
+			window.removeEventListener( 'resize', scrollListener );
+			window.cancelAnimationFrame( rafHandle.current );
+		};
+	}, [] );
+
+	return {
+		isScrolled,
+		atBottom,
+		atTop: ! isScrolled,
+	};
+};
+
+export default useIsScrolled;