Merge branch 'master' into feature/sparks/responsiveness-proposal

src/components/ResourcesSidebar/index.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from "react"
-import Tree from "react-treeview"
-import { useStaticQuery, graphql } from "gatsby"
+import React, { useState, PropsWithChildren } from "react"
+import { useStaticQuery, graphql, Link } from "gatsby"
 import useBuildTree from "./useBuildTree"
 import useSidebar from "./../../hooks/useSidebar"
 import banner from "../../images/tph-banner.png"
+import TriangleDown from "../../icons/triangle-down.svg"
 import * as SC from "./styles"
 
 export interface IFile {
@@ -82,13 +82,11 @@ function Folder({ item }: { item: IFolder }) {
   }
 
   return (
-    <SC.TreeWrapper>
-      <Tree
-        collapsed={collapsed}
-        nodeLabel={<SC.Label onClick={toggleCollapse}>{item.title}</SC.Label>}
-      >
-        {item.children.map(node => plantTree(node))}
-      </Tree>
+    <SC.TreeWrapper collapsed={collapsed}>
+      <SC.Label onClick={toggleCollapse}>
+        <TriangleDown /> {item.title}
+      </SC.Label>
+      <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
     </SC.TreeWrapper>
   )
 }
@@ -98,35 +96,47 @@ function FirstLevelFolder({ item, index }: { item: IFolder; index: number }) {
   const collapsed = current !== index
 
   return (
-    <SC.TreeWrapper>
-      <Tree
-        className="firstLevel"
-        collapsed={collapsed}
-        nodeLabel={
-          <SC.FirstLabel
-            className={!collapsed ? "active" : undefined}
-            onClick={() => setCurrent(index)}
-          >
-            {item.title}
-            <SC.CollapseToggler />
-          </SC.FirstLabel>
-        }
+    <SC.TreeWrapper className="firstLevel" collapsed={collapsed}>
+      <SC.FirstLabel
+        className={!collapsed ? "active" : undefined}
+        onClick={() => setCurrent(index)}
       >
-        {item.children.map(node => plantTree(node))}
-      </Tree>
+        {item.title}
+        <SC.CollapseToggler />
+      </SC.FirstLabel>
+      <SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
     </SC.TreeWrapper>
   )
 }
 
+function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
+  return (
+    <SC.MenuItem to={to} activeClassName="active">
+      {children}
+    </SC.MenuItem>
+  )
+}
+
 export function ResourcesSidebar() {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
   const tree = useBuildTree(resources)
 
   return (
     <SC.ResourcesSidebarWrapper>
-      <SC.Banner src={banner} />
+      <Link to="/">
+        <SC.Banner src={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.ResourcesSidebarWrapper>
   )

src/components/ResourcesSidebar/styles.tsx

@@ -4,7 +4,7 @@ import ChevronUp from "../../icons/chevron-up.svg"
 
 export const ResourcesSidebarWrapper = styled.div`
   box-sizing: border-box;
-  flex: 0 0 300px;
+  flex: 0 0 320px;
   background: #f9f9f9;
 `
 
@@ -13,25 +13,41 @@ export const Banner = styled.img`
   width: 100%;
 `
 
-export const TreeWrapper = styled.div`
-  width: 100%;
-
-  & + & {
-    border-top: 1px solid #dbdbdb;
-  }
+export const Children = styled.div`
+  padding-left: 16px;
+  padding-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
 `
 
 export const Label = styled.div`
-  padding: 4px 0;
+  user-select: none;
+  position: relative;
+  padding: 8px 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  svg {
+    position: absolute;
+    right: 100%;
+    margin-right: 4px;
+    width: 10px;
+  }
 `
 
 export const FirstLabel = styled.div`
+  user-select: none;
   display: flex;
   align-items: center;
   width: 100%;
+  box-sizing: border-box;
   padding: 12px 15px 12px 0;
   font-weight: 700;
   color: #a9a9a9;
+  cursor: pointer;
 
   &.active {
     color: #000;
@@ -56,62 +72,68 @@ export const FirstLabel = styled.div`
   }
 `
 
+export const TreeWrapper = styled.div<{ collapsed: boolean }>`
+  width: 100%;
+  font-size: 20px;
+
+  &.firstLevel {
+    overflow: hidden;
+  }
+
+  & + & {
+    border-top: 1px solid #dbdbdb;
+  }
+
+  ${Children} {
+    display: ${props => (props.collapsed ? "none" : "block")};
+    /* height: ${props => (props.collapsed ? 0 : "auto")}; */
+  }
+
+  & > ${Label} svg {
+    transform: rotate(${props => (props.collapsed ? -90 : 0)}deg);
+  }
+`
+
 export const CollapseToggler = styled(ChevronUp)``
 
 export const Inner = styled.div`
   padding-top: 30px;
   padding-left: 20px;
-
-  .tree-view {
-    overflow-y: hidden;
-  }
-
-  .tree-view_item {
-    display: flex;
-    cursor: pointer;
-  }
-
-  .tree-view_children {
-    margin-left: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .tree-view_children-collapsed {
-    height: 0px;
-  }
-
-  .tree-view_arrow {
-    cursor: pointer;
-    margin-right: 6px;
-    display: inline-block;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  .tree-view_arrow:after {
-    content: "▾";
-  }
-
-  .tree-view_arrow.firstLevel {
-    display: none;
-  }
-
-  .tree-view_arrow-collapsed {
-    -webkit-transform: rotate(-90deg);
-    -moz-transform: rotate(-90deg);
-    -ms-transform: rotate(-90deg);
-    transform: rotate(-90deg);
-  }
 `
 
 export const PageLink = styled(Link)`
   display: block;
   padding: 4px 0;
-  color: #1c61df;
+  color: #000;
+  text-decoration: none;
+
+  & + & {
+    margin-top: 4px;
+  }
+
+  &.active {
+    font-weight: 700;
+  }
+`
+
+export const Menu = styled.nav`
+  display: flex;
+  flex-direction: column;
+  border-top: 1px dashed #a5a5a5;
+  margin-top: 20px;
+  padding-top: 20px;
+`
+
+export const MenuItem = styled(Link)`
+  padding: 4px 0;
+  font-size: 20px;
+  color: #000;
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
 
   &.active {
     font-weight: 700;

src/icons/triangle-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.362 292.362">
+  <path d="M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z"/>
+</svg>

src/layouts/index.tsx

@@ -0,0 +1,18 @@
+import React, { PropsWithChildren } from "react"
+import { Layout } from "../components/Layout"
+import { ResourcesLayout } from "../components/ResourcesLayout"
+
+export default function BaseLayout({
+  children,
+  pageContext,
+}: PropsWithChildren<{
+  pageContext: {
+    layout?: string
+  }
+}>) {
+  if (pageContext.layout === "resources") {
+    return <ResourcesLayout>{children}</ResourcesLayout>
+  }
+
+  return <Layout>{children}</Layout>
+}

src/pages/404.tsx

@@ -1,15 +1,14 @@
-import React from "react"
+import React, { Fragment } from "react"
 
-import { Layout } from "../components/Layout"
 import { SEO } from "../components/SEO"
 
 function NotFoundPage() {
   return (
-    <Layout>
+    <Fragment>
       <SEO title="404: Not found" />
       <h1>NOT FOUND</h1>
       <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </Layout>
+    </Fragment>
   )
 }
 

src/pages/about.tsx

@@ -1,7 +1,6 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { graphql } from "gatsby"
 import { Markdown } from "../components/Markdown"
-import { Layout } from "../components/Layout"
 import { MarkdownRemark, Query } from "../generated/graphql"
 import { SEO } from "../components/SEO"
 
@@ -9,10 +8,10 @@ function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   const { md } = data
 
   return (
-    <Layout>
+    <Fragment>
       <SEO title="About" />
       <Markdown content={md.html!} />
-    </Layout>
+    </Fragment>
   )
 }
 

src/pages/index.tsx

@@ -1,19 +1,18 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { Link } from "gatsby"
 
-import { Layout } from "../components/Layout"
 import { SEO } from "../components/SEO"
 
 function IndexPage() {
   return (
-    <Layout>
+    <Fragment>
       <SEO title="Home" />
       <h1>Hi people</h1>
       <p>Welcome to your new Gatsby site.</p>
       <p>Now go build something great.</p>
       <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
       <Link to="/page-2/">Go to page 2</Link>
-    </Layout>
+    </Fragment>
   )
 }
 

src/pages/resources.tsx

@@ -1,14 +1,13 @@
-import React from "react"
+import React, { Fragment } from "react"
 
-import { ResourcesLayout } from "../components/ResourcesLayout"
 import { SEO } from "../components/SEO"
 
 function ResourcesPage() {
   return (
-    <ResourcesLayout>
+    <Fragment>
       <SEO title="Resources" />
       the resources
-    </ResourcesLayout>
+    </Fragment>
   )
 }
 

src/pages/rules.tsx

@@ -1,7 +1,6 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { graphql } from "gatsby"
 import { Markdown } from "../components/Markdown"
-import { Layout } from "../components/Layout"
 import { MarkdownRemark, Query } from "../generated/graphql"
 import { SEO } from "../components/SEO"
 
@@ -9,10 +8,10 @@ function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   const { md } = data
 
   return (
-    <Layout>
+    <Fragment>
       <SEO title="Rules" />
       <Markdown content={md.html!} />
-    </Layout>
+    </Fragment>
   )
 }
 

src/templates/languagePost.tsx

@@ -1,8 +1,7 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { graphql } from "gatsby"
 import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
-import { ResourcesLayout } from "../components/ResourcesLayout"
 import { ResourceHeader } from "../components/ResourceHeader"
 
 // @todo maybe find alternative type for data
@@ -10,7 +9,7 @@ function LanguagePost({ data }: any) {
   const { html, fields, frontmatter, timeToRead } = data.file.post
   console.log(data)
   return (
-    <ResourcesLayout>
+    <Fragment>
       <SEO title={frontmatter.title} />
       <ResourceHeader
         title={frontmatter.title}
@@ -20,7 +19,7 @@ function LanguagePost({ data }: any) {
         recommendedReading={frontmatter.recommended_reading}
       />
       <Markdown content={html} />
-    </ResourcesLayout>
+    </Fragment>
   )
 }