Add remaining menu items and icons

components/menu.js

@@ -13,27 +13,28 @@ export default class Menu extends Component {
         placeActionButtons()
         :
         <View style={styles.menu}>
-          <Text
+          {[
-            style={styles.dateHeader}
+            {title: 'Home', icon: 'home', componentName: 'Home'},
-            onPress={() => this.props.navigate('Home')}
+            {title: 'Calendar', icon: 'calendar-range', componentName: 'Calendar'},
-          >
+            {title: 'Chart', icon: 'chart-line', componentName: 'Chart'},
-            {'Home'}
+            {title: 'Stats', icon: 'chart-pie', componentName: 'Stats'},
-          </Text>
+            {title: 'Settings', icon: 'settings', componentName: 'Settings'},
-          <Text
+          ].map(makeMenuItem)}
-            style={styles.dateHeader}
-            onPress={() => this.props.navigate('Calendar')}
-          >
-            {'Calendar'}
-          </Text>
-          <Text
-            style={styles.dateHeader}
-            onPress={() => this.props.navigate('Settings')}
-          >
-            {'Settings'}
-          </Text>
         </View >
     )
   }
 }
 
-function placeActionButtons() {}
+function makeMenuItem({title, icon, componentName}) {
+  return (
+    <View style={{alignItems: 'center'}}>
+      <Icon name={icon} {...iconStyles.menuIcon}/>
+      <Text
+        style={styles.menuText}
+        onPress={() => this.props.navigate(componentName)}
+      >
+        {title}
+      </Text>
+    </View>
+  )
+}

styles/index.js

@@ -104,11 +104,14 @@ export default StyleSheet.create({
   menu: {
     backgroundColor: primaryColor,
     paddingVertical: 18,
-    paddingHorizontal: 15,
+    paddingHorizontal: 10,
     alignItems: 'center',
-    justifyContent: 'space-evenly',
+    justifyContent: 'space-between',
     flexDirection: 'row',
   },
+  menuText: {
+    color: fontOnPrimaryColor
+  },
   headerCycleDay: {
     flexDirection: 'row',
     justifyContent: 'space-between'
@@ -163,5 +166,9 @@ export const iconStyles = {
   },
   symptomBoxActive: {
     color: fontOnPrimaryColor
+  },
+  menuIcon: {
+    size: 20,
+    color: fontOnPrimaryColor
   }
 }