ui: wip on styling resources page

src/components/ResourcesSidebar/index.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react"
 import Tree from "react-treeview"
 import { useStaticQuery, graphql } from "gatsby"
 import useBuildTree from "./useBuildTree"
+import banner from "../../images/tph-banner.png"
 import * as SC from "./styles"
 
 export interface IFile {
@@ -76,12 +77,14 @@ function Folder({ item }: { item: IFolder }) {
   }
 
   return (
-    <Tree
-      collapsed={collapsed}
-      nodeLabel={<div onClick={toggleCollapse}>{item.title}</div>}
-    >
-      {item.children.map(plantTree)}
-    </Tree>
+    <SC.TreeWrapper>
+      <Tree
+        collapsed={collapsed}
+        nodeLabel={<div onClick={toggleCollapse}>{item.title}</div>}
+      >
+        {item.children.map(plantTree)}
+      </Tree>
+    </SC.TreeWrapper>
   )
 }
 
@@ -91,7 +94,8 @@ export function ResourcesSidebar() {
 
   return (
     <SC.ResourcesSidebarWrapper>
-      {tree.map(node => plantTree(node))}
+      <SC.Banner src={banner} />
+      <SC.Inner>{tree.map(node => plantTree(node))}</SC.Inner>
     </SC.ResourcesSidebarWrapper>
   )
 }

src/components/ResourcesSidebar/styles.tsx

@@ -3,8 +3,32 @@ import { Link } from "gatsby"
 
 export const ResourcesSidebarWrapper = styled.div`
   box-sizing: border-box;
-  padding: 0 16px;
   flex: 0 0 300px;
+  background: #f9f9f9;
+`
+
+export const Banner = styled.img`
+  display: block;
+  width: 100%;
+`
+
+export const TreeWrapper = styled.div`
+  width: 100%;
+  padding: 12px 0;
+
+  & + & {
+    border-top: 1px solid #dbdbdb;
+  }
+`
+
+export const Inner = styled.div`
+  padding-top: 30px;
+  padding-left: 20px;
+
+  /* TODO: change this.. */
+  & > ${TreeWrapper} > .tree-view > .tree-view_item > div {
+    font-weight: 700;
+  }
 `
 
 export const PageLink = styled(Link)`