Initial sections commit

Made without visx, because that was easier.

Closes #10.

Co-authored-by: Amy Wang <a258wang@csclub.uwaterloo.ca>
Reviewed-on: #36
Reviewed-by: j285he <j285he@localhost>

@@ -0,0 +1,144 @@
+.headerWrapper {
+	display: flex;

@@ -0,0 +2,4 @@
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: fixed;

@@ -0,0 +9,4 @@
+	background: var(--dark--primary-background);
+	z-index: 98;
+	box-sizing: border-box;
+	padding: calc(10rem / 16) calc(100rem / 16) 0 calc(100rem / 16);

@@ -0,0 +20,4 @@
+	position: fixed;
+	right: 0;
+	top: 0;
+	width: 20vw;

@@ -0,0 +33,4 @@
+.sideBarShown {
+	composes: sideBarCommon;
+	transition: transform 0.8s;
+	transform: translateX(0%);

@@ -0,0 +55,4 @@
+
+.backgroundTintShow {
+	composes: backgroundTintCommon;
+	transition: opacity 0.8s;

@@ -0,0 +72,4 @@
+	margin-bottom: 0;
+	padding-left: calc(20rem / 16);
+	padding-bottom: 0;
+	font-size: cacl(50rem / 16);

@@ -0,0 +96,4 @@
+
+@media screen and (max-width: 768px) {
+	.sideBarCommon {
+		width: 90vw;

@@ -0,0 +108,4 @@
+	}
+
+	.headerWrapper {
+		padding: calc(10rem / 16) calc(20rem / 16) 0 calc(20rem / 16);

@@ -0,0 +136,4 @@
+	display: flex;
+}
+
+.lineWrapper:before {

@@ -0,0 +22,4 @@
+          }}
+          className={styles.menuIcon}
+        >
+          <img src="/images/menuIcon.svg" width="50" draggable="false" />

@@ -0,0 +26,4 @@
+        </button>
+      </div>
+
+      <div className={styles.mobileSpacer} />

@@ -0,0 +53,4 @@
+        </div>
+      </div>
+
+      <div

@@ -0,0 +60,4 @@
+            : styles.backgroundTintHidden
+        }
+        onClick={(_) => {
+          setIsShowingMenu(false);

@@ -0,0 +67,4 @@
+  );
+}
+
+const ListItem: React.FC<{ link: string; children: string }> = ({

@@ -84,2 +84,4 @@
 const DEFAULT_LEGEND_GAP = 16;
 
+// TODO: Address unused props in this file
+/* eslint-disable unused-imports/no-unused-vars*/

@@ -19,1 +18,4 @@
+  plugins: ["@typescript-eslint", "react", "react-hooks", "prettier", "unused-imports"],
   rules: {
+    "no-unused-vars": "off",
+		"unused-imports/no-unused-imports": "error",

@@ -0,0 +15,4 @@
+  margin: calc(16rem / 16) 0;
+}
+
+.sideBarCommon {

@@ -0,0 +33,4 @@
+.sideBarShown {
+  composes: sideBarCommon;
+  /* -1% to hide slight line tip showing in some browsers */
+  transform: translateX(-1%);