From d0dc94441d5f366f573877f66a008b2e97929ef1 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Thu, 1 Sep 2022 01:40:05 -0400
Subject: [PATCH 1/8] Initial sections commit

---
 components/Sections.module.css |  0
 components/Sections.tsx        | 26 ++++++++++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 components/Sections.module.css
 create mode 100644 components/Sections.tsx

diff --git a/components/Sections.module.css b/components/Sections.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections.tsx b/components/Sections.tsx
new file mode 100644
index 0000000..0fd9744
--- /dev/null
+++ b/components/Sections.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import styles from "./Sections.module.css";
+
+interface SectionsData {
+  name: string;
+  url: string;
+}
+
+interface SectionsProps {
+  data: SectionsData[];
+}
+
+export default function Sections({ data }: SectionsProps) {
+  return (
+    <section>
+      <h1>Sections</h1>
+      {data.map((datum, index) => {
+        return <div>
+          <h4></h4>
+          <a></a>
+        </div>;
+      })}
+    </section>
+  );
+}
-- 
2.30.2


From ff2ec0ce3b4555777ec4b871a1beeb619e30c73b Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Thu, 1 Sep 2022 02:09:19 -0400
Subject: [PATCH 2/8] Add Sections

---
 components/Sections.module.css | 52 ++++++++++++++++++++++++++++++++++
 components/Sections.tsx        | 19 ++++++++-----
 data/routes.ts                 | 46 ++++++++++++++++++++++++++++++
 pages/playground.tsx           |  8 ++++++
 4 files changed, 118 insertions(+), 7 deletions(-)
 create mode 100644 data/routes.ts

diff --git a/components/Sections.module.css b/components/Sections.module.css
index e69de29..b4b63f7 100644
--- a/components/Sections.module.css
+++ b/components/Sections.module.css
@@ -0,0 +1,52 @@
+.sections {
+  display: flex;
+  flex-direction: row;
+  width: 50%;
+  gap: 15px;
+  margin: 0 auto;
+}
+
+.sections h1 {
+  flex: 3;
+  text-align: right;
+  margin: 0;
+}
+
+.separator {
+  flex: 1;
+  background-color: var(--label);
+  height: calc(1rem / 16);
+  width: 100%;
+  margin-top: calc(24rem / 16);
+}
+
+.nav {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+}
+
+.navItem {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin: calc(20rem / 16);
+}
+
+.navItem:first-child {
+  margin-top: calc(10rem / 16);
+}
+
+.nav h4 {
+  color: var(--secondary-accent);
+  margin: 0 calc(14rem / 16) 0 0;
+}
+
+.nav a {
+  color: var(--primary-text);
+}
+
+.nav a:hover {
+  color: var(--primary-accent-light);
+  text-decoration: underline;
+}
\ No newline at end of file
diff --git a/components/Sections.tsx b/components/Sections.tsx
index 0fd9744..93f3161 100644
--- a/components/Sections.tsx
+++ b/components/Sections.tsx
@@ -13,14 +13,19 @@ interface SectionsProps {
 
 export default function Sections({ data }: SectionsProps) {
   return (
-    <section>
+    <section className={styles.sections}>
       <h1>Sections</h1>
-      {data.map((datum, index) => {
-        return <div>
-          <h4></h4>
-          <a></a>
-        </div>;
-      })}
+      <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}>{datum.name}</a>
+            </div>
+          );
+        })}
+      </nav>
     </section>
   );
 }
diff --git a/data/routes.ts b/data/routes.ts
new file mode 100644
index 0000000..ddf9393
--- /dev/null
+++ b/data/routes.ts
@@ -0,0 +1,46 @@
+export const sectionsData = [
+  {
+    name: "Demographics",
+    url: "/",
+  },
+  {
+    name: "Academics",
+    url: "/",
+  },
+  {
+    name: "Co-op",
+    url: "/",
+  },
+  {
+    name: "Lifestyle and Interests",
+    url: "/",
+  },
+  {
+    name: "Intimacy and Drugs",
+    url: "/",
+  },
+  {
+    name: "Post-grad",
+    url: "/",
+  },
+  {
+    name: "Friends",
+    url: "/",
+  },
+  {
+    name: "Miscellaneous",
+    url: "/",
+  },
+  {
+    name: "Mental Health",
+    url: "/",
+  },
+  {
+    name: "Personal",
+    url: "/",
+  },
+  {
+    name: "Contributors",
+    url: "/",
+  },
+];
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 5707edb..58e19ae 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -1,7 +1,10 @@
 import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
 import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
+import { sectionsData } from "data/routes";
 import React from "react";
 
+import Sections from "@/components/Sections";
+
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
 
@@ -59,6 +62,11 @@ export default function Home() {
           value: word.value,
         }))}
       />
+
+      <h2>
+        <code>{"<Sections />"}</code>
+        <Sections data={sectionsData} />
+      </h2>
     </div>
   );
 }
-- 
2.30.2


From 5c87e7636ebf397dd3c163ea254653c7aab647ee Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 7 Sep 2022 22:59:41 -0400
Subject: [PATCH 3/8] Code review fixes

---
 components/Sections.module.css | 23 +++++++++++++----------
 components/Sections.tsx        | 20 +++++++++++++++-----
 pages/playground.tsx           |  4 ++--
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/components/Sections.module.css b/components/Sections.module.css
index b4b63f7..fb2fbd0 100644
--- a/components/Sections.module.css
+++ b/components/Sections.module.css
@@ -1,8 +1,8 @@
 .sections {
   display: flex;
   flex-direction: row;
-  width: 50%;
-  gap: 15px;
+  min-width: calc(1000rem / 16);
+  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 {
-  color: var(--primary-accent-light);
+.nav a:hover p {
   text-decoration: underline;
-}
\ No newline at end of file
+}
+
+.nav p {
+  margin: 0;
+  display: inline;
+}
diff --git a/components/Sections.tsx b/components/Sections.tsx
index 93f3161..27a9fa1 100644
--- a/components/Sections.tsx
+++ b/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>
-      <div className={styles.separator} />
+      {showHeader ? (
+        <>
+          <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}>{datum.name}</a>
+              <a href={datum.url}>
+                <h4>{String(index).padStart(2, "0")} </h4>
+                <p>{datum.name}</p>
+              </a>
             </div>
           );
         })}
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 58e19ae..d27efb1 100644
--- a/pages/playground.tsx
+++ b/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>
   );
 }
-- 
2.30.2


From 7f64de74b7156f03b1b46ea00168c8c210d6086e Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 7 Sep 2022 23:01:47 -0400
Subject: [PATCH 4/8] Merge main

---
 pages/playground.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/pages/playground.tsx b/pages/playground.tsx
index a6b5bb5..06dfad7 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -72,11 +72,11 @@ export default function Home() {
       />
 
       <h2>
-<<<<<<< HEAD
         <code>{"<Sections />"}</code>
       </h2>
       <Sections data={sectionsData} />
-=======
+
+      <h2>
         <code>{"<BoxPlot />"}</code>
       </h2>
       <BoxPlot
@@ -101,7 +101,6 @@ export default function Home() {
           circleDiameter={180}
         />
       </div>
->>>>>>> main
     </div>
   );
 }
-- 
2.30.2


From c9522ece4b00468ceafd36a50586f706fb265f0b Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 7 Sep 2022 23:08:30 -0400
Subject: [PATCH 5/8] Remove margin: 0 auto

---
 components/Sections.module.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/Sections.module.css b/components/Sections.module.css
index fb2fbd0..9a2db44 100644
--- a/components/Sections.module.css
+++ b/components/Sections.module.css
@@ -3,7 +3,6 @@
   flex-direction: row;
   min-width: calc(1000rem / 16);
   gap: calc(15rem / 16);
-  margin: 0 auto;
 }
 
 .sections h1 {
@@ -52,4 +51,4 @@
 .nav p {
   margin: 0;
   display: inline;
-}
+}
\ No newline at end of file
-- 
2.30.2


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 6/8] 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>
   );
-- 
2.30.2


From cbc7be0661c028dcc6ffd5e7ad3edde4c8136bc0 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Mon, 12 Sep 2022 10:24:29 -0400
Subject: [PATCH 7/8] Change about default export

---
 components/About.tsx | 2 +-
 pages/playground.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/About.tsx b/components/About.tsx
index d176012..f409610 100644
--- a/components/About.tsx
+++ b/components/About.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import styles from "./About.module.css";
 
-export default function About() {
+export function About() {
   return (
     <div className={styles.aboutWrapper}>
       <AngleDecoration isBottom={false} />
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 6355199..4237d72 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -11,7 +11,7 @@ import {
 import { sectionsData } from "data/routes";
 import React from "react";
 
-import About from "@/components/About";
+import { About } from "@/components/About";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { Sections } from "@/components/Sections";
-- 
2.30.2


From 3da9cf1dc6646a224c5210932357df27f43447e3 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Mon, 12 Sep 2022 10:57:47 -0400
Subject: [PATCH 8/8] Change heights

---
 components/Sections.module.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/Sections.module.css b/components/Sections.module.css
index 7b84981..575dc97 100644
--- a/components/Sections.module.css
+++ b/components/Sections.module.css
@@ -15,7 +15,7 @@
   background-color: var(--label);
   height: calc(1rem / 16);
   width: 100%;
-  margin-top: calc(16rem / 16);
+  margin-top: calc(30rem / 16);
 }
 
 .nav {
@@ -36,7 +36,7 @@
 }
 
 .nav li:first-child {
-  margin-top: calc(10rem / 16);
+  margin-top: calc(18rem / 16);
 }
 
 .nav li .linkNumber {
@@ -46,6 +46,7 @@
 }
 
 .nav li a {
+  font-size: calc(24rem / 16);
   color: var(--primary-text);
 }
 
-- 
2.30.2