diff --git a/app/src/components/pages/collectionsPage/collectionsPage.tsx b/app/src/components/pages/collectionsPage/collectionsPage.tsx index cbc88fad..93eaa0cb 100644 --- a/app/src/components/pages/collectionsPage/collectionsPage.tsx +++ b/app/src/components/pages/collectionsPage/collectionsPage.tsx @@ -9,6 +9,8 @@ import { Menu, Text, Pagination, + Flex, + Spacer, } from "@nypl/design-system-react-components"; import { usePathname, useRouter } from "next/navigation"; import { headerBreakpoints } from "../../../utils/breakpoints"; @@ -101,7 +103,7 @@ export function CollectionsPage({ data, params, renderCollections }) { sort: id, page: String(currentPage), }); - updateURL(queryString); + updateURL(`${queryString}#collections`); }; useEffect(() => { @@ -161,64 +163,71 @@ export function CollectionsPage({ data, params, renderCollections }) { /> - 0 ? "flex" : "none", - gap: "xs", - marginBottom: "l", - }} - > - - {" "} - Sort by{" "} - {" "} - - - 0 ? "flex" : "none", - marginBottom: "l", - }} - ref={headingRef} - tabIndex={-1} - id="collections" - width="max-content" - > - {`Displaying ${displayResults(data.numResults, data.perPage, data.page)} + + 0 ? "flex" : "none", + marginBottom: "l", + }} + ref={headingRef} + tabIndex={-1} + id="collections" + width="max-content" + > + {`Displaying ${displayResults( + data.numResults, + data.perPage, + data.page + )} results`} - + + + 0 ? "flex" : "none", + gap: "xs", + marginBottom: "l", + }} + > + + {" "} + Sort by{" "} + {" "} + + + {isLoaded ? ( collections.length > 0 ? (