fix: remove siderail for first-level and fix TOC

opengovsg · Aug 2, 2024 · cd33083 · cd33083
1 parent 2b8cee8
commit cd33083
Showing 1 changed file with 22 additions and 7 deletions.
diff --git a/packages/components/src/templates/next/layouts/Content/Content.tsx b/packages/components/src/templates/next/layouts/Content/Content.tsx
@@ -115,8 +115,12 @@ const transformContent = (content: ContentPageSchemaType["content"]) => {
             const anchorId = getDigestFromText(
               `${JSON.stringify(component)}_${getRandomNumberBetIntervals(1, 1000)}`,
             )
+            const newAttrs = {
+              ...component.attrs,
+              id: anchorId,
+            }
 
-            return { ...component, id: anchorId }
+            return { ...component, attrs: newAttrs }
           } else {
             return component
           }
@@ -136,7 +140,14 @@ const createContentLayoutStyles = tv({
     container:
       "mx-auto grid max-w-screen-xl grid-cols-12 px-6 py-12 md:px-10 md:py-16 lg:gap-6 xl:gap-10",
     siderailContainer: "relative col-span-3 hidden lg:block",
-    content: "col-span-12 flex flex-col gap-16 lg:col-span-9 lg:ml-24",
+    content: "col-span-12 flex flex-col gap-16 lg:col-span-9",
+  },
+  variants: {
+    isSideRailPresent: {
+      true: {
+        content: "lg:ml-24",
+      },
+    },
   },
 })
 
@@ -149,10 +160,12 @@ const ContentLayout = ({
   LinkComponent = "a",
   ScriptComponent,
 }: ContentPageSchemaType) => {
-  const sideRail = getSiderailFromSiteMap(
-    site.siteMap,
-    page.permalink.split("/").slice(1),
-  )
+  const isParentPageRoot = page.permalink.split("/").length === 2
+
+  // Note: We do not show side rail for first-level pages
+  const sideRail = !isParentPageRoot
+    ? getSiderailFromSiteMap(site.siteMap, page.permalink.split("/").slice(1))
+    : null
   // auto-inject ids for heading level 2 blocks if does not exist
   const transformedContent = transformContent(content)
   const tableOfContents = getTableOfContentsFromContent(transformedContent)
@@ -188,7 +201,9 @@ const ContentLayout = ({
             </LinkComponent>
           </div>
         )}
-        <div className={compoundStyles.content()}>
+        <div
+          className={compoundStyles.content({ isSideRailPresent: !!sideRail })}
+        >
           {tableOfContents.items.length > 1 && (
             <TableOfContents {...tableOfContents} />
           )}