Merge pull request #82 from the-programmers-hangout/feat-add-scrollbar-to-sidebar

feat(resources): add scrollbar to sidebar

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%;
   }
 

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

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