From 07733d8a32d858502c310e0d9bdea03bb0314289 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Wed, 4 Sep 2019 21:08:10 -0400
Subject: [PATCH 1/5] ui(resources): prevent vertical scroll on desktop

---
 src/components/ResourcesLayout/styles.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ResourcesLayout/styles.tsx b/src/components/ResourcesLayout/styles.tsx
index 232913d..2dd138e 100644
--- a/src/components/ResourcesLayout/styles.tsx
+++ b/src/components/ResourcesLayout/styles.tsx
@@ -9,6 +9,7 @@ export const Main = styled.div`
 export const MainContent = styled.main`
   flex: 1 1 auto;
   margin-top: 128px;
+  width: calc(100% - 320px);
 
   & > :first-child {
     margin-top: 0;

From 9202824d443f502a45e48a50930867c382f42564 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Wed, 4 Sep 2019 19:04:59 -0400
Subject: [PATCH 2/5] feat(resources): set up responsive sidebar

---
 src/components/Markdown/styles.tsx         |  4 ++
 src/components/ResourcesLayout/index.tsx   | 22 ++++++-
 src/components/ResourcesLayout/styles.tsx  | 70 ++++++++++++++++++++++
 src/components/ResourcesSidebar/index.tsx  |  4 +-
 src/components/ResourcesSidebar/styles.tsx | 17 ++++++
 5 files changed, 113 insertions(+), 4 deletions(-)

diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx
index caef2c2..9c6b4ad 100644
--- a/src/components/Markdown/styles.tsx
+++ b/src/components/Markdown/styles.tsx
@@ -66,4 +66,8 @@ export const MarkdownWrapper = styled.div`
   h6 {
     ${modularScaleCSS(1)};
   }
+
+  pre[class*="language-"] {
+    overflow-x: scroll;
+  }
 `
diff --git a/src/components/ResourcesLayout/index.tsx b/src/components/ResourcesLayout/index.tsx
index 46b302f..a7b9520 100644
--- a/src/components/ResourcesLayout/index.tsx
+++ b/src/components/ResourcesLayout/index.tsx
@@ -5,7 +5,7 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React, { PropsWithChildren } from "react"
+import React, { PropsWithChildren, useState } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
 import { SidebarProvider } from "../../SidebarProvider"
@@ -13,15 +13,33 @@ import { ResourcesSidebar } from "../ResourcesSidebar"
 import * as SC from "./styles"
 
 export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
+  const [activeMobileMenu, setActiveMobileMenu] = useState(false)
+
+  function openMenu() {
+    setActiveMobileMenu(true)
+  }
+
+  function closeMenu() {
+    setActiveMobileMenu(false)
+  }
+
   return (
     <SidebarProvider>
       <GlobalStyles />
       <SC.Main>
-        <ResourcesSidebar />
+        <SC.MobileHeader>
+          TPH Resources
+          <SC.Burger onClick={openMenu} />
+        </SC.MobileHeader>
+        <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
         <SC.MainContent>
           <SC.Container>{children}</SC.Container>
         </SC.MainContent>
       </SC.Main>
+      <SC.Overlay
+        className={activeMobileMenu ? "is-open" : ""}
+        onClick={closeMenu}
+      />
     </SidebarProvider>
   )
 }
diff --git a/src/components/ResourcesLayout/styles.tsx b/src/components/ResourcesLayout/styles.tsx
index 2dd138e..f186d4f 100644
--- a/src/components/ResourcesLayout/styles.tsx
+++ b/src/components/ResourcesLayout/styles.tsx
@@ -6,11 +6,79 @@ export const Main = styled.div`
   min-height: 100vh;
 `
 
+export const MobileHeader = styled.div`
+  display: none;
+  z-index: 50;
+  background: rgba(255, 255, 255, 0.8);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 16px 32px;
+  align-items: center;
+
+  @media screen and (max-width: 767px) {
+    display: flex;
+  }
+`
+
+export const Overlay = styled.div`
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: background-color 0.3s;
+  background-color: rgba(0, 0, 0, 0);
+  pointer-events: none;
+
+  @media screen and (min-width: 768px) {
+    display: none;
+  }
+
+  &.is-open {
+    pointer-events: auto;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`
+
+export const Burger = styled.div`
+  margin-left: auto;
+  width: 16px;
+  height: 9px;
+  padding: 8px;
+  position: relative;
+  cursor: pointer;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 16px;
+    background: #222;
+    margin: 0 auto;
+  }
+
+  &::before {
+    top: 8px;
+  }
+
+  &::after {
+    bottom: 8px;
+  }
+`
+
 export const MainContent = styled.main`
   flex: 1 1 auto;
   margin-top: 128px;
   width: calc(100% - 320px);
 
+  @media screen and (max-width: 767px) {
+    width: 100%;
+  }
+
   & > :first-child {
     margin-top: 0;
   }
@@ -22,5 +90,7 @@ export const MainContent = styled.main`
 
 export const Container = styled.div`
   width: 650px;
+  max-width: calc(100% - 64px);
+  padding: 0 32px;
   margin: 0 auto;
 `
diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx
index a905160..f9d33d6 100644
--- a/src/components/ResourcesSidebar/index.tsx
+++ b/src/components/ResourcesSidebar/index.tsx
@@ -117,12 +117,12 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   )
 }
 
-export function ResourcesSidebar() {
+export function ResourcesSidebar(props: React.HTMLAttributes<HTMLDivElement>) {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
   const tree = useBuildTree(resources)
 
   return (
-    <SC.ResourcesSidebarWrapper>
+    <SC.ResourcesSidebarWrapper {...props}>
       <Link to="/">
         <Banner />
       </Link>
diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx
index 834d481..964d002 100644
--- a/src/components/ResourcesSidebar/styles.tsx
+++ b/src/components/ResourcesSidebar/styles.tsx
@@ -6,6 +6,23 @@ export const ResourcesSidebarWrapper = styled.div`
   box-sizing: border-box;
   flex: 0 0 320px;
   background: #f9f9f9;
+
+  @media screen and (max-width: 767px) {
+    z-index: 100;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    /* TODO: maybe find a less "awkward" way to animate this */
+    left: calc(-100% - 100px);
+    right: calc(100% - 0px);
+    transition: left 0.3s, right 0.3s;
+  }
+
+  &.is-open {
+    left: 0;
+    right: 100px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  }
 `
 
 export const Children = styled.div`

From 1a717cda1817c76b49b346e9cea8dc8064a43b53 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Wed, 4 Sep 2019 19:25:38 -0400
Subject: [PATCH 3/5] ui(resources): tweak resource page for mobile

---
 src/components/ResourceBreadcrumb/styles.tsx |  5 +++++
 src/components/ResourceHeader/index.tsx      |  4 ++--
 src/components/ResourceHeader/styles.tsx     | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/ResourceBreadcrumb/styles.tsx b/src/components/ResourceBreadcrumb/styles.tsx
index 458b295..ebc8d3b 100644
--- a/src/components/ResourceBreadcrumb/styles.tsx
+++ b/src/components/ResourceBreadcrumb/styles.tsx
@@ -4,6 +4,11 @@ import styled from "styled-components"
 export const ResourceBreadcrumbWrapper = styled.div`
   display: flex;
   align-items: flex-start;
+
+  @media screen and (max-width: 767px) {
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+  }
 `
 
 export const LinkWrapper = styled.div`
diff --git a/src/components/ResourceHeader/index.tsx b/src/components/ResourceHeader/index.tsx
index e388b7c..c73bcba 100644
--- a/src/components/ResourceHeader/index.tsx
+++ b/src/components/ResourceHeader/index.tsx
@@ -65,9 +65,9 @@ export function ResourceHeader({
       <SC.Title>{title}</SC.Title>
 
       <SC.Top>
-        <StackedAvatars authors={authors} />
         <SC.Meta>
-          {authors.length} contributor{authors.lenght > 1 && "s"}
+          <StackedAvatars authors={authors} /> {authors.length} contributor
+          {authors.lenght > 1 && "s"}
         </SC.Meta>
         <SC.Meta>{dateToHuman}</SC.Meta>
         <SC.Meta>
diff --git a/src/components/ResourceHeader/styles.tsx b/src/components/ResourceHeader/styles.tsx
index 8a716eb..a73c25e 100644
--- a/src/components/ResourceHeader/styles.tsx
+++ b/src/components/ResourceHeader/styles.tsx
@@ -11,6 +11,11 @@ export const ResourceHeaderWrapper = styled.div`
 export const Top = styled.div`
   display: flex;
   align-items: center;
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 `
 
 export const Title = styled.h1`
@@ -22,10 +27,23 @@ export const Title = styled.h1`
 `
 
 export const Meta = styled.div`
+  display: flex;
+  align-items: center;
+
   & + &::before {
     content: "•";
     margin: 0 8px;
   }
+
+  @media screen and (max-width: 767px) {
+    & + & {
+      margin-top: 8px;
+    }
+
+    & + &::before {
+      display: none;
+    }
+  }
 `
 
 const ExtraLinks = styled.div`

From 875a69eda72320c2de47d5a6a639d43cf2b586db Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Wed, 4 Sep 2019 19:37:35 -0400
Subject: [PATCH 4/5] ui(resources): tweak mobile header styles with logo

---
 src/components/ResourcesLayout/index.tsx  |  5 ++++-
 src/components/ResourcesLayout/styles.tsx | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/ResourcesLayout/index.tsx b/src/components/ResourcesLayout/index.tsx
index a7b9520..da82154 100644
--- a/src/components/ResourcesLayout/index.tsx
+++ b/src/components/ResourcesLayout/index.tsx
@@ -28,7 +28,10 @@ export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
       <GlobalStyles />
       <SC.Main>
         <SC.MobileHeader>
-          TPH Resources
+          <SC.LogoWrapper>
+            <SC.StyledLogo />
+          </SC.LogoWrapper>
+          Resources
           <SC.Burger onClick={openMenu} />
         </SC.MobileHeader>
         <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
diff --git a/src/components/ResourcesLayout/styles.tsx b/src/components/ResourcesLayout/styles.tsx
index f186d4f..dadf89c 100644
--- a/src/components/ResourcesLayout/styles.tsx
+++ b/src/components/ResourcesLayout/styles.tsx
@@ -1,4 +1,6 @@
 import styled from "styled-components"
+import { fontFamily } from "../../design/typography"
+import Logo from "../../images/tph-logo.svg"
 
 export const Main = styled.div`
   display: flex;
@@ -16,12 +18,30 @@ export const MobileHeader = styled.div`
   right: 0;
   padding: 16px 32px;
   align-items: center;
+  font-weight: 700;
+  font-family: ${fontFamily.header};
+  font-size: 22px;
 
   @media screen and (max-width: 767px) {
     display: flex;
   }
 `
 
+export const LogoWrapper = styled.div`
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #222;
+  border-radius: 7px;
+  margin-right: 8px;
+`
+
+export const StyledLogo = styled(Logo)`
+  height: 25px;
+`
+
 export const Overlay = styled.div`
   z-index: 99;
   position: fixed;

From ae530d05c5c830a0bbef8a4f8acd126d0be865e6 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Wed, 4 Sep 2019 19:43:34 -0400
Subject: [PATCH 5/5] refact(resources): extract mobile header to its own
 component

---
 src/components/MobileHeader/index.tsx     | 18 +++++++
 src/components/MobileHeader/styles.tsx    | 64 +++++++++++++++++++++++
 src/components/ResourcesLayout/index.tsx  |  9 +---
 src/components/ResourcesLayout/styles.tsx | 63 ----------------------
 4 files changed, 84 insertions(+), 70 deletions(-)
 create mode 100644 src/components/MobileHeader/index.tsx
 create mode 100644 src/components/MobileHeader/styles.tsx

diff --git a/src/components/MobileHeader/index.tsx b/src/components/MobileHeader/index.tsx
new file mode 100644
index 0000000..d316039
--- /dev/null
+++ b/src/components/MobileHeader/index.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import * as SC from "./styles"
+
+interface IMobileHeaderProps {
+  openMenu: () => void
+}
+
+export function MobileHeader({ openMenu }: IMobileHeaderProps) {
+  return (
+    <SC.MobileHeaderWrapper>
+      <SC.LogoWrapper>
+        <SC.StyledLogo />
+      </SC.LogoWrapper>
+      Resources
+      <SC.Burger onClick={openMenu} />
+    </SC.MobileHeaderWrapper>
+  )
+}
diff --git a/src/components/MobileHeader/styles.tsx b/src/components/MobileHeader/styles.tsx
new file mode 100644
index 0000000..52f6226
--- /dev/null
+++ b/src/components/MobileHeader/styles.tsx
@@ -0,0 +1,64 @@
+import styled from "styled-components"
+import { fontFamily } from "../../design/typography"
+import Logo from "../../images/tph-logo.svg"
+
+export const MobileHeaderWrapper = styled.div`
+  z-index: 50;
+  background: rgba(255, 255, 255, 0.8);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 16px 32px;
+  display: none;
+  align-items: center;
+  font-weight: 700;
+  font-family: ${fontFamily.header};
+  font-size: 22px;
+
+  @media screen and (max-width: 767px) {
+    display: flex;
+  }
+`
+
+export const LogoWrapper = styled.div`
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #222;
+  border-radius: 7px;
+  margin-right: 8px;
+`
+
+export const StyledLogo = styled(Logo)`
+  height: 25px;
+`
+
+export const Burger = styled.div`
+  margin-left: auto;
+  width: 16px;
+  height: 9px;
+  padding: 8px;
+  position: relative;
+  cursor: pointer;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 16px;
+    background: #222;
+    margin: 0 auto;
+  }
+
+  &::before {
+    top: 8px;
+  }
+
+  &::after {
+    bottom: 8px;
+  }
+`
diff --git a/src/components/ResourcesLayout/index.tsx b/src/components/ResourcesLayout/index.tsx
index da82154..06bcc9e 100644
--- a/src/components/ResourcesLayout/index.tsx
+++ b/src/components/ResourcesLayout/index.tsx
@@ -9,6 +9,7 @@ import React, { PropsWithChildren, useState } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
 import { SidebarProvider } from "../../SidebarProvider"
+import { MobileHeader } from "../MobileHeader"
 import { ResourcesSidebar } from "../ResourcesSidebar"
 import * as SC from "./styles"
 
@@ -27,13 +28,7 @@ export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
     <SidebarProvider>
       <GlobalStyles />
       <SC.Main>
-        <SC.MobileHeader>
-          <SC.LogoWrapper>
-            <SC.StyledLogo />
-          </SC.LogoWrapper>
-          Resources
-          <SC.Burger onClick={openMenu} />
-        </SC.MobileHeader>
+        <MobileHeader openMenu={openMenu} />
         <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
         <SC.MainContent>
           <SC.Container>{children}</SC.Container>
diff --git a/src/components/ResourcesLayout/styles.tsx b/src/components/ResourcesLayout/styles.tsx
index dadf89c..edccb12 100644
--- a/src/components/ResourcesLayout/styles.tsx
+++ b/src/components/ResourcesLayout/styles.tsx
@@ -1,6 +1,4 @@
 import styled from "styled-components"
-import { fontFamily } from "../../design/typography"
-import Logo from "../../images/tph-logo.svg"
 
 export const Main = styled.div`
   display: flex;
@@ -8,40 +6,6 @@ export const Main = styled.div`
   min-height: 100vh;
 `
 
-export const MobileHeader = styled.div`
-  display: none;
-  z-index: 50;
-  background: rgba(255, 255, 255, 0.8);
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 16px 32px;
-  align-items: center;
-  font-weight: 700;
-  font-family: ${fontFamily.header};
-  font-size: 22px;
-
-  @media screen and (max-width: 767px) {
-    display: flex;
-  }
-`
-
-export const LogoWrapper = styled.div`
-  width: 35px;
-  height: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #222;
-  border-radius: 7px;
-  margin-right: 8px;
-`
-
-export const StyledLogo = styled(Logo)`
-  height: 25px;
-`
-
 export const Overlay = styled.div`
   z-index: 99;
   position: fixed;
@@ -63,33 +27,6 @@ export const Overlay = styled.div`
   }
 `
 
-export const Burger = styled.div`
-  margin-left: auto;
-  width: 16px;
-  height: 9px;
-  padding: 8px;
-  position: relative;
-  cursor: pointer;
-
-  &::before,
-  &::after {
-    position: absolute;
-    content: "";
-    height: 2px;
-    width: 16px;
-    background: #222;
-    margin: 0 auto;
-  }
-
-  &::before {
-    top: 8px;
-  }
-
-  &::after {
-    bottom: 8px;
-  }
-`
-
 export const MainContent = styled.main`
   flex: 1 1 auto;
   margin-top: 128px;