Moves navigation to the state

components/menu/index.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import MenuItem from './menu-item'
+
+import { connect } from 'react-redux'
+import { getNavigation, navigate } from '../../slices/navigation'
+
+import { menuItems } from './menu-config'
+
+import styles from '../../styles'
+
+const Menu = ({ navigation, navigate }) => {
+  return (
+    <View style={styles.menu}>
+      { menuItems.map(({ icon, labelKey, component, children }) => {
+        const isActive = (component === navigation.current) ||
+          (children && children.indexOf(navigation.current) !== -1)
+        return (
+          <MenuItem
+            key={labelKey}
+            labelKey={labelKey}
+            icon={icon}
+            active={isActive}
+            onPress={() => navigate(component)}
+          />
+        )}
+      )}
+    </View >
+  )
+}
+
+Menu.propTypes = {
+  navigation: PropTypes.object,
+  navigate: PropTypes.func,
+}
+
+const mapStateToProps = (state) => {
+  return({
+    navigation: getNavigation(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Menu)

components/menu/menu-config.js

@@ -0,0 +1,30 @@
+import settingsViews from '../settings'
+
+export const menuItems = [
+  {
+    labelKey: 'Home',
+    icon: 'home',
+    component: 'Home',
+  },
+  {
+    labelKey: 'Calendar',
+    icon: 'calendar-range',
+    component: 'Calendar',
+  },
+  {
+    labelKey: 'Chart',
+    icon: 'chart-line',
+    component: 'Chart',
+  },
+  {
+    labelKey: 'Stats',
+    icon: 'chart-pie',
+    component: 'Stats',
+  },
+  {
+    labelKey: 'Settings',
+    icon: 'settings',
+    component: 'SettingsMenu',
+    children: Object.keys(settingsViews),
+  }
+]

components/menu/menu-item.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Text, TouchableOpacity } from 'react-native'
+
+import styles, { iconStyles, secondaryColor } from '../../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+import { menuTitles } from '../../i18n/en/labels'
+
+const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
+  acc[curr] = menuTitles[curr].toLowerCase()
+  return acc
+}, {})
+
+const MenuItem = ({ icon, labelKey, active, onPress }) => {
+  const styleActive = active ? { color: secondaryColor } : null
+  return (
+    <TouchableOpacity
+      style={styles.menuItem}
+      onPress={onPress}
+    >
+      <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
+      <Text
+        testID={active ? 'activeMenuItem' : `menuItem${labelKey}`}
+        style={[styles.menuText, styleActive]}
+      >
+        {menuTitlesLowerCase[labelKey]}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+export default MenuItem