feat(resources): set up responsive sidebar

src/components/Markdown/styles.tsx

@@ -66,4 +66,8 @@ export const MarkdownWrapper = styled.div`
   h6 {
     ${modularScaleCSS(1)};
   }
+
+  pre[class*="language-"] {
+    overflow-x: scroll;
+  }
 `

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>
   )
 }

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;
 `

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>

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`