Merge pull request #5 from the-programmers-hangout/ui-style-docs

ui: style docs

src/components/DocsLayout/index.tsx

@@ -26,7 +26,7 @@ const DocsLayout = ({ children }: PropsWithChildren<{}>) => {
   `)
 
   return (
-    <Scrollbar>
+    <div>
       <Main>
         <DocsSidebar />
         <MainContent>
@@ -39,7 +39,7 @@ const DocsLayout = ({ children }: PropsWithChildren<{}>) => {
         {` `}
         <a href="https://www.gatsbyjs.org">Gatsby</a>
       </footer>
-    </Scrollbar>
+    </div>
   )
 }
 

src/components/DocsLayout/styles.tsx

@@ -7,7 +7,7 @@ export const Main = styled.div`
 `
 
 export const MainContent = styled.main`
-  flex: 1 0 auto;
+  flex: 1 1 auto;
 
   & > :first-child {
     margin-top: 0;

src/components/DocsSidebar/index.tsx

@@ -1,26 +1,29 @@
 import * as R from "ramda"
-import React from "react"
+import React, { useState } from "react"
 import Tree from "react-treeview"
 import { useStaticQuery, graphql } from "gatsby"
-
+import * as SC from "./styles"
-export interface DocsSidebarProps {
-  readonly width: string | number
-}
 
 interface IFile {
   title: string
   type: "file"
+  path: string
 }
 
 interface IFolder {
   title: string
   type: "folder"
+  path: string
   children: IFileOrFolder[]
 }
 
 type IFileOrFolder = IFile | IFolder
 
-const traverse = ([head, ...tail]: string[]): IFileOrFolder => {
+const traverse = (
+  [head, ...tail]: string[],
+  basePath = "/docs"
+): IFileOrFolder => {
+  const path = basePath + "/" + head
   const isFile = !tail.length
   if (isFile) {
     // probably not more than one dot
@@ -28,20 +31,24 @@ const traverse = ([head, ...tail]: string[]): IFileOrFolder => {
     return {
       title: name,
       type: "file",
+      path,
     }
   }
   return {
     title: head,
     type: "folder",
-    children: [traverse(tail)],
+    path,
+    children: [traverse(tail, path)],
   }
 }
 
 const generateFolder = ({
   title,
+  path,
   targets,
 }: {
   title: IFolder["title"]
+  path: IFile["path"]
   targets: IFolder[]
 }): IFolder => {
   const children = join(R.chain(target => target.children, targets))
@@ -49,13 +56,21 @@ const generateFolder = ({
   return {
     title,
     type: "folder",
+    path,
     children,
   }
 }
 
-const generateFile = ({ title }: { title: IFile["title"] }): IFile => {
+const generateFile = ({
+  title,
+  path,
+}: {
+  title: IFile["title"]
+  path: IFile["path"]
+}): IFile => {
   return {
     title,
+    path,
     type: "file",
   }
 }
@@ -68,12 +83,12 @@ const join = ([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] => {
     tail
   )
   const targets = [head, ...similarFs]
-  const { title } = head
+  const { title, path } = head
 
   const current =
     head.type === "folder"
-      ? generateFolder({ title, targets: targets as IFolder[] })
+      ? generateFolder({ title, path, targets: targets as IFolder[] })
-      : generateFile({ title })
+      : generateFile({ title, path })
 
   return [current, ...join(remaining)]
 }
@@ -116,17 +131,34 @@ const ALL_DOCS = graphql`
 
 const plantTree = (item: IFileOrFolder) => {
   if (item.type === "file") {
-    return <div>{item.title}</div>
+    return (
+      <SC.PageLink to={item.path} activeClassName="active">
+        {item.title}
+      </SC.PageLink>
+    )
+  }
+
+  return <Folder item={item} />
+}
+
+function Folder({ item }: { item: IFolder }) {
+  const [collapsed, setCollapse] = useState(false)
+
+  function toggleCollapse() {
+    setCollapse(prevState => !prevState)
   }
 
   return (
-    <Tree nodeLabel={<div>{item.title}</div>}>
+    <Tree
+      collapsed={collapsed}
+      nodeLabel={<div onClick={toggleCollapse}>{item.title}</div>}
+    >
       {item.children.map(plantTree)}
     </Tree>
   )
 }
 
-const DocsSidebar = ({ width }: DocsSidebarProps) => {
+const DocsSidebar = () => {
   const docs = useStaticQuery<IAllDocsQuery>(ALL_DOCS)
 
   const objects = docs.allFile.edges.map(({ node: file }: IFileQuery) =>
@@ -136,7 +168,11 @@ const DocsSidebar = ({ width }: DocsSidebarProps) => {
 
   console.log(results)
 
-  return <div style={{ width }}>{results.map(node => plantTree(node))}</div>
+  return (
+    <SC.DocsSidebarWrapper>
+      {results.map(node => plantTree(node))}
+    </SC.DocsSidebarWrapper>
+  )
 }
 
 export default DocsSidebar

src/components/DocsSidebar/style.tsx

@@ -1,6 +0,0 @@
-import styled from "styled-components"
-
-export const DocsSidebarScroller = styled.div`
-  display: flex;
-  flex-direction: column;
-`

src/components/DocsSidebar/styles.tsx

@@ -0,0 +1,18 @@
+import styled from "styled-components"
+import { Link } from "gatsby"
+
+export const DocsSidebarWrapper = styled.div`
+  box-sizing: border-box;
+  padding: 0 16px;
+  flex: 0 0 300px;
+`
+
+export const PageLink = styled(Link)`
+  display: block;
+  padding: 4px 0;
+  color: #1c61df;
+
+  &.active {
+    font-weight: 700;
+  }
+`

src/components/Layout/layout.scss

@@ -48,11 +48,20 @@ body {
 
 .tree-view_item {
   display: flex;
+  cursor: pointer;
+}
+
+.tree-view_item,
+.tree-view_children > div {
+  padding: 4px 0;
 }
 
 /* style for the children nodes container */
 .tree-view_children {
   margin-left: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .tree-view_children-collapsed {