diff --git a/apps/protoform/src/app/layout.tsx b/apps/protoform/src/app/layout.tsx index 74dd1d2e7..42c05d344 100644 --- a/apps/protoform/src/app/layout.tsx +++ b/apps/protoform/src/app/layout.tsx @@ -20,7 +20,7 @@ export default function RootLayout({ return ( -
+
diff --git a/apps/protoform/src/app/page.tsx b/apps/protoform/src/app/page.tsx index 530599d27..0fe945cdc 100644 --- a/apps/protoform/src/app/page.tsx +++ b/apps/protoform/src/app/page.tsx @@ -9,10 +9,10 @@ import { RopeDataSetter } from '@/components/rope-data-setter/rope-data-setter'; import { useSidebar } from '@/components/sidebar/context'; export default function Home() { - const { setOpen } = useSidebar(); + const { open, setOpen } = useSidebar(); useEffect(() => { - setOpen(false); - }, [setOpen]); + open && setOpen(false); + }, [open, setOpen]); return (
diff --git a/apps/protoform/src/components/content-wrapper/content-wrapper.tsx b/apps/protoform/src/components/content-wrapper/content-wrapper.tsx index f8af428bf..40cc77acd 100644 --- a/apps/protoform/src/components/content-wrapper/content-wrapper.tsx +++ b/apps/protoform/src/components/content-wrapper/content-wrapper.tsx @@ -2,18 +2,41 @@ import { Grid, GridContainer, GridItem } from '@westpac/ui'; import { clsx } from 'clsx'; -import { ReactNode } from 'react'; +import throttle from 'lodash.throttle'; +import { ReactNode, useEffect, useState } from 'react'; import { useSidebar } from '../sidebar/context'; export function ContentWrapper({ children }: { children: ReactNode }) { const { open } = useSidebar(); + const [scrolled, setScrolled] = useState(false); + + const handleScroll = throttle(() => { + let hasScrolled = false; + if (window.scrollY > 5) { + hasScrolled = true; + } + setScrolled(hasScrolled); + }, 10); + + useEffect(() => { + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, [handleScroll]); return (
diff --git a/apps/protoform/src/components/custom-footer/custom-footer.tsx b/apps/protoform/src/components/custom-footer/custom-footer.tsx index b7b5c28d1..1479a8ef4 100644 --- a/apps/protoform/src/components/custom-footer/custom-footer.tsx +++ b/apps/protoform/src/components/custom-footer/custom-footer.tsx @@ -11,7 +11,7 @@ export function CustomFooter() { return (
-

+

Our site and your transactions are secure. You can read our{' '} security information - . © 2024 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714. + .
© 2024 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.

diff --git a/apps/protoform/src/components/custom-header/custom-header.tsx b/apps/protoform/src/components/custom-header/custom-header.tsx index a428bd395..6d38d7c3f 100644 --- a/apps/protoform/src/components/custom-header/custom-header.tsx +++ b/apps/protoform/src/components/custom-header/custom-header.tsx @@ -26,7 +26,6 @@ export function CustomHeader() { leftIcon={isMobile ? 'arrow' : undefined} leftOnClick={() => router.back()} logoLink="/" - className="" > )} @@ -84,19 +105,21 @@ export function Sidebar({ children }: { children?: ReactNode }) { <>
-
-

{`Step ${currStep} of ${totalSteps}`}

+
+

{`Step ${currStep} of ${totalSteps}`}

-
-
-); } `} /> + +
+ +
+
+ ); +} +`} /> ``` ### Mono package import @@ -22,11 +26,16 @@ Modern bundlers like [Vite](https://vitejs.dev/) will automatically detect the i However, use this approach with caution as it may cause issues with [Tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) since not all bundlers have this advanced capability. ```html - -
- -
- -); } `} /> + +
+ +
+ + ); +} +`} /> ```