From 494d7b3095ad9194ca20b17f1854048a1571ec6b Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 5 Sep 2019 09:21:00 -0400
Subject: [PATCH 1/2] feat(resources): add scrollbar to sidebar

---
 src/components/ResourcesSidebar/index.tsx | 32 +++++++++++++----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx
index f9d33d6..40b601a 100644
--- a/src/components/ResourcesSidebar/index.tsx
+++ b/src/components/ResourcesSidebar/index.tsx
@@ -1,5 +1,7 @@
 import { graphql, Link, useStaticQuery } from "gatsby"
 import React, { memo, PropsWithChildren, useState } from "react"
+import Scrollbar from "react-perfect-scrollbar"
+import "react-perfect-scrollbar/dist/css/styles.css"
 import TriangleDown from "../../icons/triangle-down.svg"
 import Banner from "../../images/tph-banner.svg"
 import useSidebar from "./../../hooks/useSidebar"
@@ -123,21 +125,23 @@ export function ResourcesSidebar(props: React.HTMLAttributes<HTMLDivElement>) {
 
   return (
     <SC.ResourcesSidebarWrapper {...props}>
-      <Link to="/">
-        <Banner />
-      </Link>
-      <SC.Inner>
-        {tree.map((node, index) => plantTree(node, index, true))}
+      <Scrollbar>
+        <Link to="/">
+          <Banner />
+        </Link>
+        <SC.Inner>
+          {tree.map((node, index) => plantTree(node, index, true))}
 
-        <SC.Menu>
-          <MenuItem to="/about">about</MenuItem>
-          <MenuItem to="/rules">rules</MenuItem>
-          <MenuItem to="/faq">faq</MenuItem>
-          <MenuItem to="/">hotbot</MenuItem>
-          <MenuItem to="/resources">resources</MenuItem>
-          <MenuItem to="/">tech</MenuItem>
-        </SC.Menu>
-      </SC.Inner>
+          <SC.Menu>
+            <MenuItem to="/about">about</MenuItem>
+            <MenuItem to="/rules">rules</MenuItem>
+            <MenuItem to="/faq">faq</MenuItem>
+            <MenuItem to="/">hotbot</MenuItem>
+            <MenuItem to="/resources">resources</MenuItem>
+            <MenuItem to="/">tech</MenuItem>
+          </SC.Menu>
+        </SC.Inner>
+      </Scrollbar>
     </SC.ResourcesSidebarWrapper>
   )
 }

From 7a470e4c5e5c69bd55eb97c78a1b2630ebd1f964 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 5 Sep 2019 09:21:17 -0400
Subject: [PATCH 2/2] feat(resources): enforce fixed sidebar on desktop

---
 src/components/ResourcesLayout/styles.tsx  | 2 ++
 src/components/ResourcesSidebar/styles.tsx | 8 +++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ResourcesLayout/styles.tsx b/src/components/ResourcesLayout/styles.tsx
index edccb12..9fcd61e 100644
--- a/src/components/ResourcesLayout/styles.tsx
+++ b/src/components/ResourcesLayout/styles.tsx
@@ -30,9 +30,11 @@ export const Overlay = styled.div`
 export const MainContent = styled.main`
   flex: 1 1 auto;
   margin-top: 128px;
+  margin-left: 320px;
   width: calc(100% - 320px);
 
   @media screen and (max-width: 767px) {
+    margin-left: 0;
     width: 100%;
   }
 
diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx
index 964d002..1346ce2 100644
--- a/src/components/ResourcesSidebar/styles.tsx
+++ b/src/components/ResourcesSidebar/styles.tsx
@@ -6,12 +6,14 @@ export const ResourcesSidebarWrapper = styled.div`
   box-sizing: border-box;
   flex: 0 0 320px;
   background: #f9f9f9;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 320px;
 
   @media screen and (max-width: 767px) {
     z-index: 100;
-    position: fixed;
-    top: 0;
-    bottom: 0;
+    width: auto;
     /* TODO: maybe find a less "awkward" way to animate this */
     left: calc(-100% - 100px);
     right: calc(100% - 0px);