From 376c540faa836cb71f35d9722509aa6c1c880800 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Fri, 9 Sep 2022 17:29:24 -0400
Subject: [PATCH] Code review fixes

---
 components/Sections.module.css | 19 ++++++++++++-------
 components/Sections.tsx        | 24 ++++++++++++++----------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/components/Sections.module.css b/components/Sections.module.css
index 9a2db44..7b84981 100644
--- a/components/Sections.module.css
+++ b/components/Sections.module.css
@@ -1,7 +1,6 @@
 .sections {
   display: flex;
   flex-direction: row;
-  min-width: calc(1000rem / 16);
   gap: calc(15rem / 16);
 }
 
@@ -25,30 +24,36 @@
   flex-direction: column;
 }
 
-.navItem {
+.nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav li {
   margin: calc(20rem / 16);
   margin-left: 0;
 }
 
-.navItem:first-child {
+.nav li:first-child {
   margin-top: calc(10rem / 16);
 }
 
-.nav h4 {
+.nav li .linkNumber {
   color: var(--secondary-accent);
   margin: 0;
   display: inline;
 }
 
-.nav a {
+.nav li a {
   color: var(--primary-text);
 }
 
-.nav a:hover p {
+.nav li a:hover .linkName {
   text-decoration: underline;
 }
 
-.nav p {
+.nav li .linkName {
   margin: 0;
   display: inline;
 }
\ No newline at end of file
diff --git a/components/Sections.tsx b/components/Sections.tsx
index 27a9fa1..226d383 100644
--- a/components/Sections.tsx
+++ b/components/Sections.tsx
@@ -25,16 +25,20 @@ export function Sections({ data, showHeader = true }: SectionsProps) {
         ""
       )}
       <nav className={styles.nav}>
-        {data.map((datum, index) => {
-          return (
-            <div key={`${datum.name}-${index}`} className={styles.navItem}>
-              <a href={datum.url}>
-                <h4>{String(index).padStart(2, "0")} </h4>
-                <p>{datum.name}</p>
-              </a>
-            </div>
-          );
-        })}
+        <ul>
+          {data.map((datum, index) => {
+            return (
+              <li key={`${datum.name}-${index}`}>
+                <a href={datum.url}>
+                  <span className={styles.linkNumber}>
+                    {String(index).padStart(2, "0")}{" "}
+                  </span>
+                  <span className={styles.linkName}>{datum.name}</span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
       </nav>
     </section>
   );