ui: first pass on redesign (#228)

src/components/Sidebar/index.tsx

@@ -1,8 +1,7 @@
-import { Link } from "gatsby"
 import React, { FC, HTMLAttributes, PropsWithChildren } from "react"
 import Scrollbar from "react-perfect-scrollbar"
 import "react-perfect-scrollbar/dist/css/styles.css"
-import Banner from "../../images/tph-banner.svg"
+import cx from "classnames"
 import { ThemeToggler } from "../ThemeToggler"
 import * as SC from "./styles"
 
@@ -22,18 +21,21 @@ export const Sidebar: FC<PropsWithChildren<
   HTMLAttributes<HTMLDivElement>
 >> = props => {
   const { children, ...restProps } = props
-  const isBorderVisible = children === undefined ? false : true
 
   return (
     <SC.SidebarWrapper {...restProps}>
       <Scrollbar>
-        <Link to="/">
-          <Banner />
-        </Link>
+        <SC.Title to="/">
+          The
+          <br />
+          Programmer's
+          <br />
+          Hangout
+        </SC.Title>
         <SC.Inner>
           {children}
 
-          <SC.Menu borderVisibility={isBorderVisible}>
+          <SC.Menu className={cx({ "has-border": Boolean(children) })}>
             <MenuItem to="/about">about</MenuItem>
             <MenuItem to="/rules">rules</MenuItem>
             <MenuItem to="/resources">resources</MenuItem>