Fix TOC hierarchy on floating nav (#556)

Author: sfc-gh-jgarcia

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) {

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;
 }