Added menu animation

components/Header.module.css

@@ -1,11 +1,12 @@
-.wrapper {
+.headerWrapper {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding: calc(10rem / 16) calc(100rem / 16) 0 calc(100rem / 16);
 }
 
-.sideBar {
+
+.sideBarCommon {
 	position: fixed;
 	right: 0;
 	top: 0;
@@ -19,6 +20,44 @@
 	padding-right: calc(20rem / 16);
 }
 
+.sideBarShown {
+	composes: sideBarCommon;
+	transition: transform 0.8s;
+	transform: translateX(0%);
+}
+
+.sideBarHidden {
+	composes: sideBarCommon;
+	transition: transform 0.8s;
+	transform: translateX(100%);
+}
+
+.backgroundTintCommon {
+	background-color: var(--label);
+	animation: fadeIn 1s;
+	position: fixed;
+	z-index: 99;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+}
+
+.backgroundTintShow {
+	composes: backgroundTintCommon;
+	transition: opacity 0.8s;
+	opacity: 0.2;
+	visibility: visible;
+}
+
+.backgroundTintHidden {
+	composes: backgroundTintCommon;
+	transition: opacity 0.8s, visibility 0.8s;
+	opacity: 0;
+	visibility: hidden;
+}
+
+
 .menuHeader {
 	margin-bottom: 0px;
 	padding-left: calc(40rem / 16);
@@ -27,6 +66,31 @@
 	color: var(--dark--secondary-heading);
 }
 
+
+.menuIcon {
+	background: none;
+	border: none;
+}
+
+.menuIcon:hover {
+	opacity: 0.8;
+	cursor: pointer;
+}
+
+@media screen and (max-width: 768px) {
+	.sideBarCommon {
+		width: 90vw;
+	}
+
+	.menuHeader {
+		padding-left: calc(10rem / 16);
+	}
+
+	.headerWrapper {
+		padding: calc(10rem / 16) calc(20rem / 16) 0 calc(20rem / 16);
+	}
+}
+
 .closeMenuButton {
 	background: var(--primary-heading);
 	padding: 0px calc(20rem / 16);

components/Header.tsx

@@ -1,35 +1,47 @@
 import { sectionsData } from "data/routes";
 import Link from "next/link";
-import React from "react";
+import React, { useState } from "react";
 
 import styles from "./Header.module.css";
 import Sections from "./Sections";
 import Image from 'next/image';
 
 export function Header() {
+  const [isShowingMenu, setIsShowingMenu] = useState(false);
+
   return (
     <>
-      <div className={styles.wrapper}>
+      <div className={styles.headerWrapper}>
         <h1>CS 2022</h1>
-        <nav className={styles.menu}>
+        <button onClick={(e) => {
-          <ul>
+          e.preventDefault();
-            <li>
+          setIsShowingMenu(true);
-              <Link href="/blog/hello-world">
+        }}
-                <a>Go to</a>
+        className={styles.menuIcon}
-              </Link>
+        >
-            </li>
+            <Image src="/images/menuIcon.svg" width="50" height="50" />
-          </ul>
+        </button>
-        </nav>
       </div>
-      <div className={styles.sideBar}>
+
-        <h1 className={styles.menuHeader}>Sections</h1>
+      <>
-        <div className={styles.lineWrapper}>
+
-          <button className={styles.closeMenuButton}>
+
-            <Image className={styles.arrowIcon} src="/images/rightArrow.svg" width="50" height="50" />
+        <div className={ isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}>
-          </button>
+          <h1 className={styles.menuHeader}>Sections</h1>
+          <div className={styles.lineWrapper}>
+            <button className={styles.closeMenuButton} onClick={(_) => {
+              setIsShowingMenu(false);
+            }}>
+              <Image className={styles.arrowIcon} src="/images/rightArrow.svg" width="50" height="50" />
+            </button>
+          </div>
+          <Sections data={sectionsData} />
         </div>
-        <Sections data={sectionsData} />
+        <div className={isShowingMenu ? styles.backgroundTintShow : styles.backgroundTintHidden} onClick={(_) => {
-      </div>
+          setIsShowingMenu(false);
+        }} />
+        </>
+
     </>
   );
 }

pages/samplePage.tsx

@@ -22,7 +22,6 @@ export default function SamplePage() {
         heading="What program are you in?"
         bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
       >
-        <Header />
         <BarGraphVertical
           data={mockCategoricalData}
           // For components that are in the side wrappers, it looks better if they fill a certain amount of width, so we can make the width dynamic like this

public/images/menuIcon.svg

@@ -0,0 +1,5 @@
+<svg width="144" height="100" viewBox="0 0 144 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="139" y1="5" x2="5.00003" y2="4.99999" stroke="#E18E89" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="139" y1="50" x2="5.00003" y2="50" stroke="#E18E89" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="139" y1="95" x2="5.00003" y2="95" stroke="#E18E89" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>