feat(archives): bootstrap what-is-archives from Github

src/components/ResourcesSidebar/index.tsx

@@ -1,15 +1,12 @@
-import { graphql, Link, useStaticQuery } from "gatsby"
+import { graphql, useStaticQuery } from "gatsby"
 import React, { FC, HTMLAttributes, memo, 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 { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
 import { humanize } from "../../utils"
-import { ThemeToggler } from "../ThemeToggler"
+import { ColumnSidebar } from "../ColumnSidebar"
+import useBuildTree from "./../../hooks/useBuildTree"
 import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
-import useBuildTree from "./useBuildTree"
 import useMatchingPath from "./useMatchingPath"
 
 const ALL_RESOURCES = graphql`
@@ -93,44 +90,14 @@ const FirstLevelFolder = memo(
   }
 )
 
-interface IMenuItemProps {
-  to: string
-}
-
-const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
-  return (
-    <SC.MenuItem to={to} activeClassName="active">
-      {children}
-    </SC.MenuItem>
-  )
-}
-
 export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
-  const tree = useBuildTree(resources)
+  const tree = useBuildTree(resources, "/resources")
   const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
 
   return (
-    <SC.ResourcesSidebarWrapper {...props}>
-      <Scrollbar>
-        <Link to="/">
-          <Banner />
-        </Link>
-        <SC.Inner>
-          {sortedTree.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>
-
-          <ThemeToggler />
-        </SC.Inner>
-      </Scrollbar>
-    </SC.ResourcesSidebarWrapper>
+    <ColumnSidebar {...props}>
+      {sortedTree.map((node, index) => plantTree(node, index, true))}
+    </ColumnSidebar>
   )
 }

src/components/ResourcesSidebar/styles.tsx

@@ -3,32 +3,6 @@ import { transparentize } from "polished"
 import styled from "styled-components"
 import ChevronUp from "../../icons/chevron-up.svg"
 
-export const ResourcesSidebarWrapper = styled.div`
-  box-sizing: border-box;
-  flex: 0 0 320px;
-  background: ${props => props.theme.sidebar.background};
-  color: ${props => props.theme.sidebar.foreground};
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 320px;
-
-  @media screen and (max-width: 767px) {
-    z-index: 100;
-    width: auto;
-    /* 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`
   padding-left: 16px;
   padding-bottom: 8px;
@@ -131,10 +105,6 @@ export const TreeWrapper = styled.div<{ collapsed: boolean }>`
 
 export const CollapseToggler = styled(ChevronUp)``
 
-export const Inner = styled.div`
-  padding: 30px 0 30px 20px;
-`
-
 export const PageLink = styled(Link)`
   display: block;
   padding: 4px 0 0;
@@ -162,27 +132,3 @@ export const PageLink = styled(Link)`
     border-color: ${props => transparentize(0.7, props.theme.sidebar.active)};
   }
 `
-
-export const Menu = styled.nav`
-  display: flex;
-  flex-direction: column;
-  border-top: 1px dashed #a5a5a5;
-  margin: 20px 0 40px;
-  padding-top: 20px;
-`
-
-export const MenuItem = styled(Link)`
-  padding: 4px 0;
-  font-size: 20px;
-  color: ${props => props.theme.sidebar.foreground};
-  text-decoration: none;
-
-  &:hover,
-  &:active {
-    text-decoration: underline;
-  }
-
-  &.active {
-    font-weight: 700;
-  }
-`

src/components/ResourcesSidebar/useBuildTree.tsx

@@ -1,10 +0,0 @@
-import { IAllResourcesQuery, IFileQuery } from "../../types"
-import { join, traversePaths } from "../../utils"
-
-export default function useBuildTree(resources: IAllResourcesQuery) {
-  const objects = resources.allFile.edges.map(({ node: file }: IFileQuery) =>
-    traversePaths(file.relativePath.split("/"))
-  )
-
-  return join(objects)
-}