diff --git a/components/utilities/floatingNav.js b/components/utilities/floatingNav.js index bae478676..c967b88d8 100644 --- a/components/utilities/floatingNav.js +++ b/components/utilities/floatingNav.js @@ -13,6 +13,9 @@ const useHeadingsData = (slug) => { ) ); + // Remove the first heading here, since we don't want to show the main title on the TOC + headingElements.shift(); + const newNestedHeadings = getNestedHeadings(headingElements); setNestedHeadings(newNestedHeadings); }, [slug]); @@ -25,6 +28,7 @@ const getNestedHeadings = (headingElements) => { for (const index in headingElements) { const ele = headingElements[index]; + if (ele.getElementsByTagName === undefined) { continue; } @@ -128,6 +132,7 @@ const Headings = ({ headings, activeId }) => { // For example, we could have [H1, H2, H3] but also [H1, H4], // and we want the indentation to acommodate for these situations. const uniqueHierarchies = [...new Set(headings.map((item) => item.level))]; + const sortedHeadings = uniqueHierarchies.map((hierarchy, index) => headings.filter((heading) => { if (heading.level === hierarchy) { diff --git a/components/utilities/floatingNav.module.css b/components/utilities/floatingNav.module.css index 83575b693..d3d846d7d 100644 --- a/components/utilities/floatingNav.module.css +++ b/components/utilities/floatingNav.module.css @@ -3,7 +3,7 @@ } .List { - @apply sticky top-24 m-0 list-none overflow-y-auto overflow-x-hidden; + @apply sticky top-24 m-0 pl-6 list-none overflow-y-auto overflow-x-hidden; max-height: calc(100vh - (6em * 2)); } @@ -21,15 +21,10 @@ /* Contents Title */ .ListTitle { - @apply pt-6 pl-6 uppercase font-semibold tracking-widest; + @apply pt-6 uppercase font-semibold tracking-widest; @apply text-gray-60 !important; } -/* Hide the first h1 on the page, as it's the page title */ -.List li:nth-child(2) { - @apply hidden; -} - /* Styles for the active item on the floating nav */ :global(.dark) .activeLink { @apply text-white !important; @@ -45,6 +40,10 @@ } /* Paddings for different title hierarchies */ +.List li[data-hierarchy="0"] { + @apply pl-0; +} + .List li[data-hierarchy="1"] { @apply pl-6; }