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 (
+
+ {({ theme }) => (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ )
+ }
+}
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 (
-
+
+
+
+
)
}