3 files changed, 193 insertions, 0 deletions
diff --git a/frontend/app/screens/menu/categoryMenu.js b/frontend/app/screens/menu/categoryMenu.js
new file mode 100644
index 0000000..6ed6400
--- /dev/null
+++ b/frontend/app/screens/menu/categoryMenu.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  TouchableHighlight,
+  View,
+  FlatList,
+  StyleSheet,
+} from 'react-native';
+import {
+  RkStyleSheet,
+  RkTheme,
+  RkText,
+} from 'react-native-ui-kitten';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class CategoryMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string.isRequired,
+    })).isRequired,
+  };
+
+  onItemPressed = (item) => {
+    const url = item.action || item.id;
+    this.props.navigation.navigate(url);
+  };
+
+  extractItemKey = (item) => item.id;
+
+  renderItem = ({ item }) => (
+    <TouchableHighlight
+      style={styles.item}
+      underlayColor={RkTheme.current.colors.button.underlay}
+      activeOpacity={1}
+      onPress={() => this.onItemPressed(item)}>
+      <View>
+        <RkText>{item.title}</RkText>
+      </View>
+    </TouchableHighlight>
+  );
+
+  renderPlaceholder = () => (
+    <View style={styles.emptyContainer}>
+      <RkText rkType='light subtitle'>Coming Soon...</RkText>
+    </View>
+  );
+
+  renderList = () => (
+    <FlatList
+      style={styles.list}
+      data={this.props.items}
+      keyExtractor={this.extractItemKey}
+      renderItem={this.renderItem}
+    />
+  );
+
+  render = () => (this.props.items.length === 0 ? this.renderPlaceholder() : this.renderList());
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  item: {
+    paddingVertical: 32.5,
+    paddingHorizontal: 16.5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border.base,
+  },
+  list: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.screen.base,
+  },
+}));
diff --git a/frontend/app/screens/menu/index.js b/frontend/app/screens/menu/index.js
new file mode 100644
index 0000000..4bea133
--- /dev/null
+++ b/frontend/app/screens/menu/index.js
@@ -0,0 +1,2 @@
+export * from './categoryMenu';
+export * from './menus';
diff --git a/frontend/app/screens/menu/menus.js b/frontend/app/screens/menu/menus.js
new file mode 100644
index 0000000..8cd8ff2
--- /dev/null
+++ b/frontend/app/screens/menu/menus.js
@@ -0,0 +1,114 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react';
+
+import { CategoryMenu } from './categoryMenu';
+import * as Routes from '../../config/navigation/routesBuilder';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class LoginMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Login'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.LoginRoutes} />
+  );
+}
+
+export class NavigationMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Navigation'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.NavigationRoutes} />
+  );
+}
+
+export class SocialMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Social'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.SocialRoutes} />
+  );
+}
+
+export class ArticleMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Articles'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.ArticleRoutes} />
+  );
+}
+
+export class MessagingMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Messaging'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.MessagingRoutes} />
+  );
+}
+
+export class DashboardMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Dashboards'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.DashboardRoutes} />
+  );
+}
+
+export class WalkthroughMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Walkthrough'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.WalkthroughRoutes} />
+  );
+}
+
+export class EcommerceMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Ecommerce'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.EcommerceRoutes} />
+  );
+}
+
+export class OtherMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Other'.toUpperCase(),
+  };
+  render = () => (
+    <CategoryMenu navigation={this.props.navigation} items={Routes.OtherRoutes} />
+  );
+}