[Web] Left sidebar like TweetDeck (empty for now)

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,
   },
 

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,
                       ]}

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

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>
+    )
+  }
+}

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>
     )
   }