diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
index 2fa6df8ff..dc2f5e992 100644
--- a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
+++ b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
@@ -1,7 +1,8 @@
'use client';
-
import { List, ListItem } from '@westpac/ui';
-import { MouseEventHandler, useCallback } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { MouseEventHandler, useCallback, useEffect, useState } from 'react';
import { ArrowDownRightIcon } from '@/components/icons';
@@ -20,7 +21,7 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) {
.join('-');
return (
- {title}
+ {title}
);
})}
@@ -36,23 +37,25 @@ const HEADER_HEIGHT = {
const BREAKPOINT_MD = 768;
-function Link({ href, children }: { children?: React.ReactNode; href?: string }) {
- const handleClick: MouseEventHandler = useCallback(
- ev => {
- ev.preventDefault();
+function NavLink({ href, children }: { children?: React.ReactNode; href: string }) {
+ const [path, hash] = href.split('#');
+ const DELAY_TIME_TO_SCROLL = 100;
+
+ const handleClick: MouseEventHandler = () => {
+ setTimeout(() => {
const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg';
- const bodyRect = document.body.getBoundingClientRect(),
- elemRect = document?.querySelector(href || '')?.getBoundingClientRect(),
- offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport];
+ const bodyRect = document.body.getBoundingClientRect();
+ const elemRect = document?.querySelector(`#${hash}`)?.getBoundingClientRect();
+ const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport];
window?.scrollTo({ top: offset, behavior: 'smooth' });
- },
- [href],
- );
+ window.history.pushState(null, '', `#${hash}`);
+ }, DELAY_TIME_TO_SCROLL);
+ };
return (
-
+
{children}
-
+
);
}