From ead1fe3dfe2a8749d892bd20994eb75ce5075ca3 Mon Sep 17 00:00:00 2001
From: Bruno Lemos <brunohplemos@gmail.com>
Date: Sat, 13 Oct 2018 20:05:04 -0300
Subject: [PATCH] [Web] Left sidebar like TweetDeck (empty for now)

---
 src/components/columns/ColumnHeader.tsx     |  4 +-
 src/components/columns/ColumnHeaderItem.tsx | 14 ++--
 src/components/common/Avatar.tsx            |  2 +-
 src/components/layout/LeftSidebar.tsx       | 76 +++++++++++++++++++++
 src/screens/MainScreen.web.tsx              | 14 +++-
 5 files changed, 100 insertions(+), 10 deletions(-)
 create mode 100644 src/components/layout/LeftSidebar.tsx

diff --git a/src/components/columns/ColumnHeader.tsx b/src/components/columns/ColumnHeader.tsx
index 07d17d9e..ef5c9b79 100644
--- a/src/components/columns/ColumnHeader.tsx
+++ b/src/components/columns/ColumnHeader.tsx
@@ -5,7 +5,7 @@ import { contentPadding } from '../../styles/variables'
 import { ThemeConsumer } from '../context/ThemeContext'
 import { columnHeaderItemContentSize } from './ColumnHeaderItem'
 
-export const columnHeaderHeight = 64
+export const columnHeaderHeight = contentPadding * 2 + columnHeaderItemContentSize
 
 export interface ColumnHeaderProps extends ViewProps {
   children?: ReactNode
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
   container: {
     alignSelf: 'stretch',
     flexDirection: 'row',
-    height: contentPadding * 2 + columnHeaderItemContentSize,
+    height: columnHeaderHeight,
     paddingVertical: contentPadding,
   },
 
diff --git a/src/components/columns/ColumnHeaderItem.tsx b/src/components/columns/ColumnHeaderItem.tsx
index bf1d8c9b..ebe03acf 100644
--- a/src/components/columns/ColumnHeaderItem.tsx
+++ b/src/components/columns/ColumnHeaderItem.tsx
@@ -20,6 +20,8 @@ import {
 } from '../common/ConditionalWrap'
 import { ThemeConsumer } from '../context/ThemeContext'
 
+export const columnHeaderItemContentSize = 20
+
 export interface ColumnHeaderItemProps {
   avatarShape?: AvatarProps['shape']
   iconName?: IGitHubIcon
@@ -44,15 +46,15 @@ const styles = StyleSheet.create({
   } as ViewStyle,
 
   icon: {
-    fontSize: 20,
+    fontSize: columnHeaderItemContentSize,
   } as TextStyle,
 
   title: {
-    fontSize: 18,
+    fontSize: columnHeaderItemContentSize - 2,
   } as TextStyle,
 
   subtitle: {
-    fontSize: 14,
+    fontSize: columnHeaderItemContentSize - 6,
   } as TextStyle,
 })
 
@@ -99,8 +101,8 @@ export default class ColumnHeaderItem extends PureComponent<
                       shape={avatarShape}
                       style={[
                         {
-                          width: 20,
-                          height: 20,
+                          width: columnHeaderItemContentSize,
+                          height: columnHeaderItemContentSize,
                         },
                         !!title || !!subtitle
                           ? {
@@ -118,7 +120,7 @@ export default class ColumnHeaderItem extends PureComponent<
                       style={[
                         styles.icon,
                         (!!title || !!subtitle) && {
-                          marginRight: 4,
+                          marginRight: 8,
                         },
                         iconStyle,
                       ]}
diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
index 98e27a84..7e5d023f 100644
--- a/src/components/common/Avatar.tsx
+++ b/src/components/common/Avatar.tsx
@@ -17,7 +17,7 @@ export interface AvatarProps {
   avatarURL?: string
   email?: string
   isBot?: boolean
-  linkURL: string
+  linkURL?: string
   repo?: string
   shape?: 'circle' | 'rounded' | 'square'
   size?: number
diff --git a/src/components/layout/LeftSidebar.tsx b/src/components/layout/LeftSidebar.tsx
new file mode 100644
index 00000000..325c4c20
--- /dev/null
+++ b/src/components/layout/LeftSidebar.tsx
@@ -0,0 +1,76 @@
+import React, { PureComponent } from 'react'
+import { Image, StyleSheet, View } from 'react-native'
+
+import { columnHeaderHeight } from '../columns/ColumnHeader'
+import Avatar from '../common/Avatar'
+import { ThemeConsumer } from '../context/ThemeContext'
+
+const logo = require('../../../assets/logo.png') // tslint:disable-line
+
+const styles = StyleSheet.create({
+  logoContainer: {
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export class LeftSidebar extends PureComponent {
+  render() {
+    return (
+      <ThemeConsumer>
+        {({ theme }) => (
+          <View
+            style={{
+              width: columnHeaderHeight,
+              backgroundColor: theme.backgroundColor,
+              borderRightWidth: StyleSheet.hairlineWidth,
+              borderRightColor: theme.backgroundColorMore08,
+            }}
+          >
+            <View
+              style={[
+                styles.logoContainer,
+                {
+                  backgroundColor: theme.backgroundColorLess08,
+                  width: '100%',
+                  height: columnHeaderHeight + StyleSheet.hairlineWidth,
+                  borderBottomWidth: StyleSheet.hairlineWidth,
+                  borderColor: theme.backgroundColorMore08,
+                },
+              ]}
+            >
+              <Avatar
+                shape="circle"
+                size={columnHeaderHeight / 2}
+                username="brunolemos"
+              />
+            </View>
+
+            <View style={{ flex: 1 }} />
+
+            <View
+              style={[
+                styles.logoContainer,
+                {
+                  width: '100%',
+                  height: columnHeaderHeight + StyleSheet.hairlineWidth,
+                },
+              ]}
+            >
+              <Image
+                resizeMode="contain"
+                source={logo}
+                style={{
+                  width: columnHeaderHeight / 2,
+                  height: columnHeaderHeight / 2,
+                  borderRadius: columnHeaderHeight / (2 * 2),
+                }}
+              />
+            </View>
+          </View>
+        )}
+      </ThemeConsumer>
+    )
+  }
+}
diff --git a/src/screens/MainScreen.web.tsx b/src/screens/MainScreen.web.tsx
index 28ac9c49..73189b82 100644
--- a/src/screens/MainScreen.web.tsx
+++ b/src/screens/MainScreen.web.tsx
@@ -1,13 +1,25 @@
 import React, { PureComponent } from 'react'
+import { StyleSheet, View } from 'react-native'
 
 import Screen from '../components/common/Screen'
+import { LeftSidebar } from '../components/layout/LeftSidebar'
 import { ColumnsContainer } from '../containers/ColumnsContainer'
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+})
+
 export default class MainScreen extends PureComponent {
   render() {
     return (
       <Screen>
-        <ColumnsContainer />
+        <View style={styles.container}>
+          <LeftSidebar />
+          <ColumnsContainer />
+        </View>
       </Screen>
     )
   }