Added header button

components/Header.module.css

@@ -5,41 +5,45 @@
 	padding: calc(10rem / 16) calc(100rem / 16) 0 calc(100rem / 16);
 }
 
-.menu > ul {
-	list-style: none;
-	display: flex;
-	gap: calc(10rem / 16);
-}
-
-
-.menu > ul > li > a {
-	padding: calc(10rem / 16);
-	background-color: var(--secondary-background);
-	color: var(--label);
-	border-radius: calc(50rem / 16);
-}
-
 .sideBar {
 	position: fixed;
-	width: 20vw;
-	background: var(--secondary-background);
-	padding: 100px;
-	height: 100vh;
 	right: 0;
 	top: 0;
+	width: 20vw;
+	height: 100vh;
+	background: var(--secondary-background);
+	padding: 100px;
 	margin: 0;
-	list-style: decimal-leading-zero;
 	z-index: 100;
-	color: var(--secondary-heading);
+	padding: 0;
+	padding-right: calc(20rem / 16);
 }
 
-.closeMenu {
+.menuHeader {
+	margin-bottom: 0px;
+	padding-left: calc(40rem / 16);
+	padding-bottom: 0px;
+	font-size: 50px;
+	color: var(--dark--secondary-heading);
+}
+
+.closeMenuButton {
 	background: var(--primary-heading);
-	margin: 10px;
-	padding: 10px;
-	border-radius: 10px;
-	font-size: 92px;
+	padding: 0px calc(20rem / 16);
+	border-radius: calc(50rem / 16);
 	display: flex;
-	justify-content: center;
-	align-items: center;
+	flex-direction: row;
+	margin-left: calc(20rem / 16);
+}
+
+.lineWrapper {
+	width: 100%;
+	display: flex;
+}
+
+.lineWrapper:before {
+	content: "";
+	flex: 1 1;
+	border-bottom: 3px solid white;
+	margin: auto;
 }

components/Header.tsx

@@ -1,8 +1,10 @@
+import { sectionsData } from "data/routes";
 import Link from "next/link";
 import React from "react";
-import { Color } from "utils/Color";
 
 import styles from "./Header.module.css";
+import Sections from "./Sections";
+import Image from 'next/image';
 
 export function Header() {
   return (
@@ -21,15 +23,12 @@ export function Header() {
       </div>
       <div className={styles.sideBar}>
         <h1 className={styles.menuHeader}>Sections</h1>
-        <button className={styles.closeMenu}>⭢</button>
-        <hr />
-        <nav className={styles.navbarMenu}>
-          <ol>
-            <ListItem link="/">Demographics</ListItem>
-            <ListItem link="/">Academics</ListItem>
-            <ListItem link="/">Co-op</ListItem>
-          </ol>
-        </nav>
+        <div className={styles.lineWrapper}>
+          <button className={styles.closeMenuButton}>
+            <Image className={styles.arrowIcon} src="/images/rightArrow.svg" width="50" height="50" />
+          </button>
+        </div>
+        <Sections data={sectionsData} />
       </div>
     </>
   );

components/Sections.tsx

@@ -14,8 +14,8 @@ interface SectionsProps {
 export default function Sections({ data }: SectionsProps) {
   return (
     <section className={styles.sections}>
-      <h1>Sections</h1>
-      <div className={styles.separator} />
+      {/* <h1>Sections</h1> */}
+      {/* <div className={styles.separator} /> */}
       <nav className={styles.nav}>
         {data.map((datum, index) => {
           return (

public/images/rightArrow.svg

@@ -0,0 +1,3 @@
+<svg width="118" height="63" viewBox="0 0 118 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M116.615 34.4078C118.278 32.7447 118.278 30.0483 116.615 28.3852L89.513 1.28349C87.8499 -0.379606 85.1535 -0.379606 83.4904 1.28349C81.8273 2.94658 81.8273 5.64299 83.4904 7.30609L107.581 31.3965L83.4904 55.4869C81.8273 57.15 81.8273 59.8464 83.4904 61.5095C85.1535 63.1726 87.8499 63.1726 89.513 61.5095L116.615 34.4078ZM0.75 35.6551H113.603V27.1379H0.75V35.6551Z" fill="#603E2F"/>
+</svg>