From fa1ad02690f26b92817812b56712f109a4e7d250 Mon Sep 17 00:00:00 2001
From: William Tran <william.tran1@uwaterloo.ca>
Date: Mon, 24 May 2021 20:52:25 -0400
Subject: [PATCH] Start mobile changes

---
 components/OrganizedContent.module.css |  2 +-
 components/OrganizedContent.tsx        | 77 +++++++++++++++++++++++++-
 pages/playground.mdx                   |  2 +-
 3 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css
index 8a1c772f..f0839419 100644
--- a/components/OrganizedContent.module.css
+++ b/components/OrganizedContent.module.css
@@ -45,7 +45,7 @@
 
 .selectedMarker {
   background-color: var(--blue-2);
-  width: 0.22rem;
+  width: calc(4rem / 16);
   margin-right: 0.5rem;
 }
 
diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index af22a0cb..f83f55fa 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -37,7 +37,7 @@ export const OrganizedContent: React.FC<Props> = ({
       ? headings[currentIndex + 1]
       : undefined;
 
-  const isMobile = true;
+  const isMobile = false;
 
   if (!isMobile) {
     return (
@@ -146,6 +146,79 @@ export const OrganizedContent: React.FC<Props> = ({
       </div>
     );
   } else {
-    return <div>Test</div>;
+    return (
+      <div>
+        {!isReadAll ? (
+          <h2 className={styles.contentHeading}>
+            {headings[currentIndex].name}
+          </h2>
+        ) : (
+          <div>
+            {headings
+              .filter(
+                (heading: { name: string }) => heading.name !== "Read All"
+              )
+              .map((heading) => (
+                <div key={heading.url}>
+                  <h2 className={styles.contentHeading}>{heading.name}</h2>
+                  {heading.content}
+                </div>
+              ))}
+          </div>
+        )}
+        {children}
+        <div className={styles.footer}>
+          {prevHeading && (
+            <div className={styles.clickable}>
+              <Link url={prevHeading.url}>
+                <div className={styles.footerSection}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="9"
+                    viewBox="0 0 14 9"
+                    className={styles.arrow + " " + styles.prevArrow}
+                  >
+                    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
+                  </svg>
+                  <div>
+                    <div className={styles.prevNext}>Previous</div>
+                    <div className={styles.arrowHeading}>
+                      {prevHeading.name}
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            </div>
+          )}
+          <div></div>
+          {nextHeading && (
+            <div className={styles.clickable}>
+              <Link url={nextHeading.url}>
+                <div className={styles.footerSection}>
+                  <div>
+                    <div className={styles.prevNext + " " + styles.nextText}>
+                      Next
+                    </div>
+                    <div className={styles.arrowHeading}>
+                      {nextHeading.name}
+                    </div>
+                  </div>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="9"
+                    viewBox="0 0 14 9"
+                    className={styles.arrow + " " + styles.nextArrow}
+                  >
+                    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
+                  </svg>
+                </div>
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    );
   }
 };
diff --git a/pages/playground.mdx b/pages/playground.mdx
index ef893953..603f70f0 100644
--- a/pages/playground.mdx
+++ b/pages/playground.mdx
@@ -67,6 +67,6 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
 
 ## `<OrganizedContent />`
 
-Works without JS!
+Codey is supposed to say something here...
 
 <OrganizedContentDemo />