diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 6510034..810297e 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -6,6 +6,7 @@ import { prettyLanguage, prettySlug } from "helpers/formatters"; import { getOgImage, ImageQuality, OgImage } from "helpers/img"; import { Immutable } from "helpers/types"; import { useMediaMobile } from "hooks/useMediaQuery"; +import { AnchorIds } from "hooks/useScrollTopOnChange"; import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; @@ -140,7 +141,6 @@ export function AppLayout(props: Immutable): JSX.Element { return (
): JSX.Element { {/* Content panel */}
{contentPanel ? ( diff --git a/src/components/Library/ScanSetCover.tsx b/src/components/Library/ScanSetCover.tsx index f6b85b3..e15238b 100644 --- a/src/components/Library/ScanSetCover.tsx +++ b/src/components/Library/ScanSetCover.tsx @@ -57,7 +57,7 @@ export function ScanSetCover(props: Immutable): JSX.Element { className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0" > -

+

{"Cover"}

diff --git a/src/hooks/useScrollTopOnChange.ts b/src/hooks/useScrollTopOnChange.ts new file mode 100644 index 0000000..d7f2335 --- /dev/null +++ b/src/hooks/useScrollTopOnChange.ts @@ -0,0 +1,12 @@ +import { DependencyList, useEffect } from "react"; + +export enum AnchorIds { + CONTENT_PANEL = "contentPanel495922447721572", +} + +// Scroll to top of element "id" when "deps" update. +export function useScrollTopOnChange(id: AnchorIds, deps: DependencyList) { + useEffect(() => { + document.querySelector(`#${id}`)?.scrollTo({ top: 0, behavior: "smooth" }); + }, deps); +} diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index 7d7479d..e91cdf1 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -24,6 +24,7 @@ import { import { getStatusDescription } from "helpers/others"; import { ContentWithTranslations, Immutable } from "helpers/types"; import { useMediaMobile } from "hooks/useMediaQuery"; +import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange"; import { useSmartLanguage } from "hooks/useSmartLanguage"; import { GetStaticPathsContext, @@ -45,6 +46,8 @@ export default function Content(props: Immutable): JSX.Element { languageExtractor: (item) => item.language?.data?.attributes?.code, }); + useScrollTopOnChange(AnchorIds.CONTENT_PANEL, [selectedTranslation]); + const previousContent = content.group?.data?.attributes?.contents ? getPreviousContent( content.group.data.attributes.contents.data, diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx index 9b20761..d418e94 100644 --- a/src/pages/library/[slug]/index.tsx +++ b/src/pages/library/[slug]/index.tsx @@ -37,6 +37,7 @@ import { convertMmToInch } from "helpers/numbers"; import { sortContent } from "helpers/others"; import { Immutable } from "helpers/types"; import { useLightBox } from "hooks/useLightBox"; +import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange"; import { GetStaticPathsContext, GetStaticPathsResult, @@ -57,6 +58,8 @@ export default function LibrarySlug(props: Immutable): JSX.Element { const { item, langui, currencies } = props; const appLayout = useAppLayout(); + useScrollTopOnChange(AnchorIds.CONTENT_PANEL, [item]); + const isVariantSet = item?.metadata?.[0]?.__typename === "ComponentMetadataGroup" && item.metadata[0].subtype?.data?.attributes?.slug === "variant-set";