add anchor to sort and move menu to the right

NYPL · Dec 17, 2024 · 86256ed · 86256ed
1 parent 2662d1c
commit 86256ed
Showing 1 changed file with 67 additions and 58 deletions.
diff --git 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 }) {
         />
       </Box>
       <HorizontalRule sx={{ marginTop: "xxl", marginBottom: "xxl" }} />
-      <Box
-        sx={{
-          display: collections?.length > 0 ? "flex" : "none",
-          gap: "xs",
-          marginBottom: "l",
-        }}
-      >
-        <Text sx={{ fontWeight: "500", marginBottom: 0, marginTop: "xs" }}>
-          {" "}
-          Sort by{" "}
-        </Text>{" "}
-        <Menu
-          showSelectionAsLabel
-          showLabel
-          selectedItem={currentSort}
-          labelText={"Sort By"}
-          listItemsData={[
-            {
-              id: "date-desc",
-              label: "Newest to oldest",
-              onClick: onMenuClick,
-              type: "action",
-            },
-            {
-              id: "date-asc",
-              label: "Oldest to newest",
-              onClick: onMenuClick,
-              type: "action",
-            },
-            {
-              id: "title-asc",
-              label: "Title A to Z",
-              onClick: onMenuClick,
-              type: "action",
-            },
-            {
-              id: "title-desc",
-              label: "Title Z to A",
-              onClick: onMenuClick,
-              type: "action",
-            },
-          ]}
-        />
-      </Box>
-      <Heading
-        size="heading5"
-        sx={{
-          display: collections?.length > 0 ? "flex" : "none",
-          marginBottom: "l",
-        }}
-        ref={headingRef}
-        tabIndex={-1}
-        id="collections"
-        width="max-content"
-      >
-        {`Displaying ${displayResults(data.numResults, data.perPage, data.page)}
+      <Flex>
+        <Heading
+          size="heading5"
+          sx={{
+            display: collections?.length > 0 ? "flex" : "none",
+            marginBottom: "l",
+          }}
+          ref={headingRef}
+          tabIndex={-1}
+          id="collections"
+          width="max-content"
+        >
+          {`Displaying ${displayResults(
+            data.numResults,
+            data.perPage,
+            data.page
+          )}
             results`}
-      </Heading>
+        </Heading>
+        <Spacer />
+        <Box
+          sx={{
+            display: collections?.length > 0 ? "flex" : "none",
+            gap: "xs",
+            marginBottom: "l",
+          }}
+        >
+          <Text sx={{ fontWeight: "500", marginBottom: 0, marginTop: "xs" }}>
+            {" "}
+            Sort by{" "}
+          </Text>{" "}
+          <Menu
+            showSelectionAsLabel
+            showLabel
+            selectedItem={currentSort}
+            labelText={"Sort By"}
+            listItemsData={[
+              {
+                id: "date-desc",
+                label: "Newest to oldest",
+                onClick: onMenuClick,
+                type: "action",
+              },
+              {
+                id: "date-asc",
+                label: "Oldest to newest",
+                onClick: onMenuClick,
+                type: "action",
+              },
+              {
+                id: "title-asc",
+                label: "Title A to Z",
+                onClick: onMenuClick,
+                type: "action",
+              },
+              {
+                id: "title-desc",
+                label: "Title Z to A",
+                onClick: onMenuClick,
+                type: "action",
+              },
+            ]}
+          />
+        </Box>
+      </Flex>
 
       {isLoaded ? (
         collections.length > 0 ? (