diff --git a/src/components/link/CustomLink.tsx b/src/components/link/CustomLink.tsx index 262d0ca12..7d58f7463 100644 --- a/src/components/link/CustomLink.tsx +++ b/src/components/link/CustomLink.tsx @@ -56,6 +56,7 @@ const CustomLink = ({ target={target} rel={rel} aria-label={link.ariaLabel} + scroll={scroll} > {link.linkTitle} @@ -87,6 +88,7 @@ const CustomLink = ({ target={target} rel={rel} aria-label={link.ariaLabel} + scroll={scroll} > {link.linkTitle} @@ -101,6 +103,7 @@ const CustomLink = ({ target={target} rel={rel} aria-label={link.ariaLabel} + scroll={scroll} > {link.linkTitle} diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index 84be6e246..23abaaa6b 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -11,6 +11,7 @@ import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher"; import CustomLink from "src/components/link/CustomLink"; import LinkButton from "src/components/linkButton/LinkButton"; import useScrollDirection from "src/utils/hooks/useScrollDirection"; +import useScrollToTop from "src/utils/hooks/useScrollToTop"; import { getHref } from "src/utils/link"; import { Announcement } from "studio/lib/interfaces/announcement"; import { BrandAssets } from "studio/lib/interfaces/brandAssets"; @@ -45,6 +46,7 @@ export const Header = ({ const [isOpen, setIsOpen] = useState(false); const sidebarData = navigation.sidebar || navigation.main; + useScrollToTop(); const scrollDirection = useScrollDirection(); const links = filterLinks(navigation.main, linkID); @@ -99,8 +101,8 @@ export const Header = ({ className={styles.logo} scroll={false} /> - {renderPageLinks(links, false, pathname)} - {renderPageCTAs(ctas, false)} + +
{defaultLanguage && ( setIsOpen(false)} > - {renderPageLinks(sidebarLinks, true, pathname)} +
{defaultLanguage && ( @@ -182,39 +188,47 @@ export const Header = ({ ); }; -export const renderPageLinks = ( - links: ILink[], - isMobile: boolean, - pathname: string, -) => ( -
    - {links?.map((link: ILink) => { - const linkUrl = getHref(link); - const isSelected = pathname === `${linkUrl}`; - return ( +function PageLinks({ + links, + isMobile, + pathname, +}: { + links: ILink[]; + isMobile: boolean; + pathname: string; +}) { + return ( +
      + {links?.map((link: ILink) => { + const linkUrl = getHref(link); + const isSelected = pathname === `${linkUrl}`; + return ( +
    • + +
    • + ); + })} +
    + ); +} + +function PageCTAs({ ctas, isMobile }: { ctas: ILink[]; isMobile: boolean }) { + return ( +
      + {ctas?.map((link: ILink, index) => (
    • -
    • - ); - })} -
    -); - -export const renderPageCTAs = (ctas: ILink[], isMobile: boolean) => ( -
      - {ctas?.map((link: ILink, index) => ( -
    • - -
    • - ))} -
    -); + ))} +
+ ); +} diff --git a/src/utils/hooks/useScrollToTop.ts b/src/utils/hooks/useScrollToTop.ts new file mode 100644 index 000000000..a8ad8e099 --- /dev/null +++ b/src/utils/hooks/useScrollToTop.ts @@ -0,0 +1,7 @@ +import { useEffect } from "react"; + +export default function useScrollToTop() { + useEffect(() => { + window.scrollTo({ top: 0, behavior: "instant" }); + }, []); +}