From 9f77dc653b96d5dababb5ab3ca5aad317b84da00 Mon Sep 17 00:00:00 2001
From: shahanneda <shahan.neda@gmail.com>
Date: Sun, 4 Sep 2022 13:45:15 -0700
Subject: [PATCH] Added mobile spacer

---
 components/Header.module.css |  9 +++++
 components/Header.tsx        | 68 ++++++++++++++++++------------------
 2 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/components/Header.module.css b/components/Header.module.css
index 5cefd74..6df496a 100644
--- a/components/Header.module.css
+++ b/components/Header.module.css
@@ -84,6 +84,10 @@
 	cursor: pointer;
 }
 
+.mobileSpacer {
+	display: none;
+}
+
 @media screen and (max-width: 768px) {
 	.sideBarCommon {
 		width: 90vw;
@@ -96,6 +100,11 @@
 	.headerWrapper {
 		padding: calc(10rem / 16) calc(20rem / 16) 0 calc(20rem / 16);
 	}
+
+	.mobileSpacer {
+		display: block;
+		padding: calc(50rem / 16);
+	}
 }
 
 .closeMenuButton {
diff --git a/components/Header.tsx b/components/Header.tsx
index 5d44d6a..4d4b4e8 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -26,41 +26,41 @@ export function Header() {
         </button>
       </div>
 
-      <>
-        <div
-          className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}
-        >
-          <h1 className={styles.menuHeader}>Sections</h1>
-          <div className={styles.lineWrapper}>
-            <button
-              className={styles.closeMenuButton}
-              onClick={(_) => {
-                setIsShowingMenu(false);
-              }}
-            >
-              <img
-                src="/images/rightArrow.svg"
-                className={styles.arrowIcon}
-                width="50"
-                height="50"
-                draggable="false"
-              />
-            </button>
-          </div>
-          <Sections data={sectionsData} />
-        </div>
+      <div className={styles.mobileSpacer} />
 
-        <div
-          className={
-            isShowingMenu
-              ? styles.backgroundTintShow
-              : styles.backgroundTintHidden
-          }
-          onClick={(_) => {
-            setIsShowingMenu(false);
-          }}
-        />
-      </>
+      <div
+        className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}
+      >
+        <h1 className={styles.menuHeader}>Sections</h1>
+        <div className={styles.lineWrapper}>
+          <button
+            className={styles.closeMenuButton}
+            onClick={(_) => {
+              setIsShowingMenu(false);
+            }}
+          >
+            <img
+              src="/images/rightArrow.svg"
+              className={styles.arrowIcon}
+              width="50"
+              height="50"
+              draggable="false"
+            />
+          </button>
+        </div>
+        <Sections data={sectionsData} />
+      </div>
+
+      <div
+        className={
+          isShowingMenu
+            ? styles.backgroundTintShow
+            : styles.backgroundTintHidden
+        }
+        onClick={(_) => {
+          setIsShowingMenu(false);
+        }}
+      />
     </>
   );
 }