Code review fixes

components/Sections.module.css

@@ -1,8 +1,8 @@
 .sections {
   display: flex;
   flex-direction: row;
-  width: 50%;
+  min-width: calc(1000rem / 16);
-  gap: 15px;
+  gap: calc(15rem / 16);
   margin: 0 auto;
 }
 
@@ -17,7 +17,7 @@
   background-color: var(--label);
   height: calc(1rem / 16);
   width: 100%;
-  margin-top: calc(24rem / 16);
+  margin-top: calc(16rem / 16);
 }
 
 .nav {
@@ -27,10 +27,8 @@
 }
 
 .navItem {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
   margin: calc(20rem / 16);
+  margin-left: 0;
 }
 
 .navItem:first-child {
@@ -39,14 +37,19 @@
 
 .nav h4 {
   color: var(--secondary-accent);
-  margin: 0 calc(14rem / 16) 0 0;
+  margin: 0;
+  display: inline;
 }
 
 .nav a {
   color: var(--primary-text);
 }
 
-.nav a:hover {
+.nav a:hover p {
-  color: var(--primary-accent-light);
   text-decoration: underline;
-}
+}
+
+.nav p {
+  margin: 0;
+  display: inline;
+}

components/Sections.tsx

@@ -8,20 +8,30 @@ interface SectionsData {
 }
 
 interface SectionsProps {
+  /* Whether to display the "Sections" title and separator that appears on the left. */
+  showHeader?: boolean;
   data: SectionsData[];
 }
 
-export default function Sections({ data }: SectionsProps) {
+export function Sections({ data, showHeader = true }: SectionsProps) {
   return (
     <section className={styles.sections}>
-      <h1>Sections</h1>
+      {showHeader ? (
-      <div className={styles.separator} />
+        <>
+          <h1>Sections</h1>
+          <div className={styles.separator} />
+        </>
+      ) : (
+        ""
+      )}
       <nav className={styles.nav}>
         {data.map((datum, index) => {
           return (
             <div key={`${datum.name}-${index}`} className={styles.navItem}>
-              <h4>{String(index).padStart(2, "0")}</h4>
+              <a href={datum.url}>
-              <a href={datum.url}>{datum.name}</a>
+                <h4>{String(index).padStart(2, "0")} </h4>
+                <p>{datum.name}</p>
+              </a>
             </div>
           );
         })}

pages/playground.tsx

@@ -3,7 +3,7 @@ import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import { sectionsData } from "data/routes";
 import React from "react";
 
-import Sections from "@/components/Sections";
+import { Sections } from "@/components/Sections";
 
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
@@ -65,8 +65,8 @@ export default function Home() {
 
       <h2>
         <code>{"<Sections />"}</code>
-        <Sections data={sectionsData} />
       </h2>
+      <Sections data={sectionsData} />
     </div>
   );
 }