fix design system scroll

WestpacGEL · Dec 6, 2023 · 7ec4b29 · 7ec4b29
1 parent 736da48
commit 7ec4b29
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/...e/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx b/...e/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { BREAKPOINTS } from '@westpac/ui/themes-constants';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { Key, useCallback, useMemo } from 'react';
 
@@ -38,6 +39,8 @@ const TabPanelByKey = ({ tabKey, content }: { content: ContentTabsProps; tabKey:
   return <></>;
 };
 
+const FIXED_HEADER = 162; // 228 - 66 = height to stick
+
 export function ContentTabs({ content }: { content: ContentTabsProps }) {
   const router = useRouter();
   const pathname = usePathname();
@@ -47,7 +50,11 @@ export function ContentTabs({ content }: { content: ContentTabsProps }) {
 
   const handleChange = useCallback(
     (key: Key) => {
-      return router.push(`${pathname}?brand=${brand}&tab=${key}`);
+      const isLargeScreen = window.innerWidth > parseInt(BREAKPOINTS.lg, 10);
+      router.push(`${pathname}?brand=${brand}&tab=${key}`, { scroll: !isLargeScreen });
+      if (isLargeScreen) {
+        window.scrollTo({ top: FIXED_HEADER });
+      }
     },
     [brand, pathname, router],
   );