ui: wip on styling resources page

src/components/ResourcesLayout/index.tsx

@@ -10,7 +10,6 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import { GlobalStyles } from "../../globalStyles"
 import { ResourcesSidebar } from "../ResourcesSidebar"
-import { Footer } from "../Footer"
 import * as SC from "./styles"
 
 export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
@@ -30,11 +29,12 @@ export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
       <SC.Main>
         <ResourcesSidebar />
         <SC.MainContent>
-          <h1>{data.site.siteMetadata.title}</h1>
+          <SC.Container>
-          {children}
+            <h1>{data.site.siteMetadata.title}</h1>
+            {children}
+          </SC.Container>
         </SC.MainContent>
       </SC.Main>
-      <Footer />
     </div>
   )
 }

src/components/ResourcesLayout/styles.tsx

@@ -2,12 +2,13 @@ import styled from "styled-components"
 
 export const Main = styled.div`
   display: flex;
-  margin: 128px auto 64px !important;
   width: 100%;
+  min-height: 100vh;
 `
 
 export const MainContent = styled.main`
   flex: 1 1 auto;
+  margin-top: 128px;
 
   & > :first-child {
     margin-top: 0;
@@ -17,3 +18,8 @@ export const MainContent = styled.main`
     margin-bottom: 0;
   }
 `
+
+export const Container = styled.div`
+  width: 650px;
+  margin: 0 auto;
+`

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
+    <SC.TreeWrapper>
-      collapsed={collapsed}
+      <Tree
-      nodeLabel={<div onClick={toggleCollapse}>{item.title}</div>}
+        collapsed={collapsed}
-    >
+        nodeLabel={<div onClick={toggleCollapse}>{item.title}</div>}
-      {item.children.map(plantTree)}
+      >
-    </Tree>
+        {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)`

src/globalStyles.tsx

@@ -11,6 +11,7 @@ export const GlobalStyles = createGlobalStyle`
   }
 
   body {
+    margin: 0;
     font-size: ${BASE_FONT_SIZE}px;
     line-height: ${BASE_LINE_HEIGHT}px;
   }