Add Bottom Navigation (#64)

Co-authored-by: Beihao Zhou <b72zhou@csclub.uwaterloo.ca>
Co-committed-by: Beihao Zhou <b72zhou@csclub.uwaterloo.ca>

components/BottomNav.module.css

@@ -0,0 +1,98 @@
+.container {
+  display: flex;
+  flex-flow: center;
+  align-items: center;
+  justify-content: space-between;
+  margin: calc(40rem / 16) 0;
+}
+
+.subBox {
+  display: inline-block;
+}
+
+.item {
+  color: var(--primary-text);
+  font-size: calc(28rem / 16);
+  position: relative;
+  margin: calc(24rem / 16);
+}
+
+.subBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.arrow {
+  width: calc(250rem / 16);
+  height: calc(20rem / 16);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.item:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: calc(2rem / 16);
+  bottom: 0;
+  left: 0;
+  background-color: var(--primary-accent);
+  cursor: pointer;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.item:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
+.linePath {
+  stroke: var(--primary-text);
+}
+
+.arrowPath {
+  fill: var(--primary-text);
+}
+
+.right {
+  transform: rotate(180deg);
+}
+
+@media screen and (max-width: 768px) {
+  .subBox {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .subBoxLeft {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+  }
+
+
+  .item {
+    font-size: calc(20rem / 16);
+    margin: 0;
+    margin-bottom: calc(10rem / 16);
+  }
+
+  .arrow {
+    width: calc(200rem / 16);
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .container {
+    justify-content: center;
+    gap: calc(50rem / 16);
+  }
+
+  .arrow {
+    width: calc(200rem / 16);
+  }
+}

components/BottomNav.tsx

@@ -0,0 +1,72 @@
+import Link from "next/link";
+import React from "react";
+
+import styles from "./BottomNav.module.css";
+
+interface PagesInfo {
+  leftPageLink: string;
+  leftPageName: string;
+  rightPageLink: string;
+  rightPageName: string;
+}
+
+export function BottomNav(props: PagesInfo) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.subBox + " " + styles.subBoxLeft}>
+        <Link href={props.leftPageLink}>
+          <a>
+            <Arrow />
+          </a>
+        </Link>
+        <Link href={props.leftPageLink}>
+          <a className={styles.item}>{props.leftPageName}</a>
+        </Link>
+      </div>
+      <div className={styles.subBox}>
+        <Link href={props.rightPageLink}>
+          <a className={styles.item}>{props.rightPageName}</a>
+        </Link>
+        <Link href={props.rightPageLink}>
+          <a>
+            <Arrow isPointingRight />
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+interface ArrowProps {
+  isPointingRight?: boolean;
+}
+
+function Arrow({ isPointingRight }: ArrowProps) {
+  return (
+    <svg className={(isPointingRight ? styles.right : "") + " " + styles.arrow}>
+      <defs>
+        <marker
+          id="arrow"
+          markerWidth="10"
+          markerHeight="10"
+          refX="5"
+          refY="3"
+          orient="auto"
+          markerUnits="strokeWidth"
+        >
+          <path d="M0,0 L0,6 L9,3 z" className={styles.arrowPath} />
+        </marker>
+      </defs>
+
+      <line
+        x1="250"
+        y1="10"
+        x2="100"
+        y2="10" // half of svg height
+        strokeWidth="3"
+        markerEnd="url(#arrow)"
+        className={styles.linePath}
+      />
+    </svg>
+  );
+}

package.json

@@ -28,6 +28,7 @@
     "@visx/tooltip": "^2.10.0",
     "@visx/wordcloud": "^2.10.0",
     "next": "12.1.6",
+    "npm": "^8.19.0",
     "react": "18.1.0",
     "react-dom": "18.1.0"
   },

pages/playground.tsx

@@ -22,6 +22,7 @@ import {
   GroupedBarGraphHorizontal,
   GroupedBarGraphVertical,
 } from "@/components/GroupedBarGraph";
+import { LineGraph } from "@/components/LineGraph";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { Sections } from "@/components/Sections";
@@ -31,9 +32,9 @@ import {
 } from "@/components/StackedBarGraph";
 import { Timeline } from "@/components/Timeline";
 
+import { BottomNav } from "../components/BottomNav";
 import { CenterWrapper } from "../components/CenterWrapper";
 import { ColorPalette } from "../components/ColorPalette";
-import { LineGraph } from "../components/LineGraph";
 import { WordCloud } from "../components/WordCloud";
 
 import styles from "./playground.module.css";
@@ -240,6 +241,16 @@ export default function Home() {
         />
       </div>
 
+      <h2>
+        <code>{"<BottomNav />"}</code>
+      </h2>
+      <BottomNav
+        leftPageLink="/"
+        leftPageName="Demographics"
+        rightPageLink="/"
+        rightPageName="Co-ops"
+      ></BottomNav>
+
       <h2>
         <code>{"<GroupedBarGraphVertical />"}</code>
       </h2>

pages/samplePage.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
 
+import { BottomNav } from "@/components/BottomNav";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
 
 import { WordCloud } from "../components/WordCloud";
@@ -122,6 +123,12 @@ export default function SamplePage() {
           height={500}
         />
       </ComponentWrapper>
+      <BottomNav
+        leftPageLink="/"
+        leftPageName="Demographics"
+        rightPageLink="/"
+        rightPageName="Co-ops"
+      ></BottomNav>
     </div>
   );
 }