SideBar integration

src/components/SideBar.js

@@ -1,17 +0,0 @@
-// @flow
-
-import React, { PureComponent } from 'react'
-
-import Box from 'components/base/Box'
-
-class SideBar extends PureComponent<{}> {
-  render() {
-    return (
-      <Box bg="night" py={3} noShrink style={{ width: 250 }}>
-        {''}
-      </Box>
-    )
-  }
-}
-
-export default SideBar

src/components/SideBar/Item.js

@@ -0,0 +1,56 @@
+// @flow
+
+import React from 'react'
+import type { Element } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+
+type Props = {
+  children: string,
+  desc?: string | null,
+  icon?: Element<*> | null,
+}
+
+const Container = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+  color: 'lead',
+  p: 2,
+})`
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+`
+
+const IconWrapper = styled(Box)`
+  width: 30px;
+  height: 30px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+`
+
+export default function Item({ children, desc, icon }: Props) {
+  return (
+    <Container>
+      <IconWrapper mr={2}>{icon || null}</IconWrapper>
+      <div>
+        <Text fontWeight="bold" fontSize={1}>
+          {children}
+        </Text>
+        {desc && (
+          <Box color="steel" fontSize={0}>
+            {desc}
+          </Box>
+        )}
+      </div>
+    </Container>
+  )
+}
+
+Item.defaultProps = {
+  icon: null,
+  desc: null,
+}

src/components/SideBar/index.js

@@ -0,0 +1,47 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+import Box, { GrowScroll } from 'components/base/Box'
+import Item from './Item'
+
+const CapsSubtitle = styled(Box).attrs({
+  px: 2,
+  fontSize: 0,
+  color: 'shark',
+})`
+  text-transform: uppercase;
+  font-weight: bold;
+`
+
+class SideBar extends PureComponent<{}> {
+  render() {
+    return (
+      <Box noShrink style={{ width: 250 }}>
+        <GrowScroll flow={4} py={4} bg="night">
+          <Box flow={2}>
+            <CapsSubtitle>{'Menu'}</CapsSubtitle>
+            <div>
+              <Item>{'Dashboard'}</Item>
+              <Item>{'Send'}</Item>
+              <Item>{'Receive'}</Item>
+              <Item>{'Settings'}</Item>
+            </div>
+          </Box>
+          <Box flow={2}>
+            <CapsSubtitle>{'Accounts'}</CapsSubtitle>
+            <div>
+              <Item desc="BTC 3.78605936">{'Brian Account'}</Item>
+              <Item desc="ETH 0.05944">{'Virginie Account'}</Item>
+              <Item desc="DOGE 2.2658">{'Ledger Account'}</Item>
+              <Item desc="BTC 0.00015486">{'Nicolas Account'}</Item>
+            </div>
+          </Box>
+        </GrowScroll>
+      </Box>
+    )
+  }
+}
+
+export default SideBar

src/styles/global.js

@@ -11,6 +11,7 @@ injectGlobal`
     font: inherit;
     color: inherit;
     user-select: none;
+    cursor: inherit;
     min-width: 0;
   }