5 files changed, 342 insertions, 0 deletions
diff --git a/frontend/app/screens/navigation/grid.js b/frontend/app/screens/navigation/grid.js
new file mode 100644
index 0000000..7fbe404
--- /dev/null
+++ b/frontend/app/screens/navigation/grid.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  ScrollView,
+  Dimensions,
+} from 'react-native';
+import {
+  RkButton, RkStyleSheet,
+  RkText,
+} from 'react-native-ui-kitten';
+import { MainRoutes } from '../../config/navigation/routes';
+import NavigationType from '../../config/navigation/propTypes';
+
+const paddingValue = 8;
+
+export class GridV1 extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Grid Menu'.toUpperCase(),
+  };
+
+  constructor(props) {
+    super(props);
+    const screenWidth = Dimensions.get('window').width;
+    this.itemSize = {
+      width: (screenWidth - (paddingValue * 6)) / 2,
+      height: (screenWidth - (paddingValue * 6)) / 2,
+    };
+  }
+
+  onItemPressed = (item) => {
+    this.props.navigation.navigate(item.id);
+  };
+
+  renderItems = () => MainRoutes.map(route => (
+    <RkButton
+      rkType='square shadow'
+      style={{ ...this.itemSize }}
+      key={route.id}
+      onPress={() => this.onItemPressed(route)}>
+      <RkText style={styles.icon} rkType='primary moon menuIcon'>
+        {route.icon}
+      </RkText>
+      <RkText>{route.title}</RkText>
+    </RkButton>
+  ));
+
+  render = () => (
+    <ScrollView
+      style={styles.root}
+      contentContainerStyle={styles.rootContainer}>
+      {this.renderItems()}
+    </ScrollView>
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.scroll,
+    padding: paddingValue,
+  },
+  rootContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  icon: {
+    marginBottom: 16,
+  },
+}));
diff --git a/frontend/app/screens/navigation/grid2.js b/frontend/app/screens/navigation/grid2.js
new file mode 100644
index 0000000..8773e02
--- /dev/null
+++ b/frontend/app/screens/navigation/grid2.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  ScrollView,
+  View,
+  StyleSheet,
+} from 'react-native';
+import {
+  RkText,
+  RkButton,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { MainRoutes } from '../../config/navigation/routes';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class GridV2 extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Grid Menu'.toUpperCase(),
+  };
+
+  state = {
+    dimensions: undefined,
+  };
+
+  onContainerLayout = (event) => {
+    if (this.state.height) {
+      return;
+    }
+    const dimensions = event.nativeEvent.layout;
+    this.setState({ dimensions });
+  };
+
+  renderItems = () => MainRoutes.map(this.renderItem);
+
+  renderItem = (item) => (
+    <RkButton
+      rkType='tile'
+      style={{ height: this.state.dimensions.width / 3, width: this.state.dimensions.width / 3 }}
+      key={item.id}
+      onPress={() => this.onItemPressed(item)}>
+      <RkText style={styles.icon} rkType='primary moon xxlarge'>
+        {item.icon}
+      </RkText>
+      <RkText rkType='small'>{item.title}</RkText>
+    </RkButton>
+  );
+
+  onItemPressed = (item) => {
+    this.props.navigation.navigate(item.id);
+  };
+
+  render() {
+    const items = this.state.dimensions === undefined ? <View /> : this.renderItems();
+    return (
+      <ScrollView
+        style={styles.root}
+        onLayout={this.onContainerLayout}
+        contentContainerStyle={styles.rootContainer}>
+        {items}
+      </ScrollView>
+    );
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  rootContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  empty: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border.base,
+  },
+  icon: {
+    marginBottom: 16,
+  },
+}));
diff --git a/frontend/app/screens/navigation/index.js b/frontend/app/screens/navigation/index.js
new file mode 100644
index 0000000..3f5229f
--- /dev/null
+++ b/frontend/app/screens/navigation/index.js
@@ -0,0 +1,4 @@
+export * from './grid2';
+export * from './grid';
+export * from './sideMenu';
+export * from './list';
diff --git a/frontend/app/screens/navigation/list.js b/frontend/app/screens/navigation/list.js
new file mode 100644
index 0000000..33c52ba
--- /dev/null
+++ b/frontend/app/screens/navigation/list.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  FlatList,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+} from 'react-native';
+import {
+  RkText,
+  RkStyleSheet,
+} from 'react-native-ui-kitten';
+import { MainRoutes } from '../../config/navigation/routes';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class ListMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'List Menu'.toUpperCase(),
+  };
+
+  onItemPressed = (item) => {
+    this.props.navigation.navigate(item.id);
+  };
+
+  extractItemKey = (item) => item.id;
+
+  renderItem = ({ item }) => (
+    <TouchableOpacity
+      style={styles.item}
+      onPress={() => this.onItemPressed(item)}>
+      <View style={styles.container}>
+        <RkText
+          style={styles.icon}
+          rkType='primary moon xxlarge'>{item.icon}
+        </RkText>
+        <RkText>{item.title}</RkText>
+      </View>
+    </TouchableOpacity>
+  );
+
+  render = () => (
+    <FlatList
+      style={styles.list}
+      data={MainRoutes}
+      keyExtractor={this.extractItemKey}
+      renderItem={this.renderItem}
+    />
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  item: {
+    height: 80,
+    justifyContent: 'center',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border.base,
+    paddingHorizontal: 16,
+  },
+  list: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 34,
+    textAlign: 'center',
+    marginRight: 16,
+  },
+}));
diff --git a/frontend/app/screens/navigation/sideMenu.js b/frontend/app/screens/navigation/sideMenu.js
new file mode 100644
index 0000000..7f5c5a1
--- /dev/null
+++ b/frontend/app/screens/navigation/sideMenu.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+  TouchableHighlight,
+  View,
+  ScrollView,
+  Image,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import {
+  RkStyleSheet,
+  RkText,
+  RkTheme,
+} from 'react-native-ui-kitten';
+import { MainRoutes } from '../../config/navigation/routes';
+import { FontAwesome, FontIcons } from '../../assets/icons';
+import NavigationType from '../../config/navigation/propTypes';
+import * as Screens from '../index';
+
+export const NavbarRoutes = [
+  {
+    id: 'Articles2',
+    title: 'Problems',
+    icon: FontIcons.article,
+    screen: Screens.Articles2,
+
+  }, {
+    id: 'Login1',
+    title: 'Login',
+    icon: FontIcons.login,
+    screen: Screens.LoginV1,
+
+  }, {
+    id: 'AddProblem',
+    title: 'Add Problem',
+    icon: FontIcons.article,
+    screen: Screens.AddToCardForm,
+
+  }];
+
+export class SideMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+
+  onMenuItemPressed = (item) => {
+    this.props.navigation.navigate(item.id);
+  };
+
+  getThemeImageSource = (theme) => (
+    theme.name === 'light' ?
+      require('../../assets/images/smallLogo.png') : require('../../assets/images/smallLogoDark.png')
+  );
+
+  renderIcon = () => (
+    <Image style={styles.icon} source={this.getThemeImageSource(RkTheme.current)}/>
+  );
+
+  renderMenu = () => NavbarRoutes.map(this.renderMenuItem);
+
+  renderMenuItem = (item) => (
+    <TouchableHighlight
+      style={styles.container}
+      key={item.id}
+      underlayColor={RkTheme.current.colors.button.underlay}
+      activeOpacity={1}
+      onPress={() => this.onMenuItemPressed(item)}>
+      <View style={styles.content}>
+        <View style={styles.content}>
+          <RkText
+            style={styles.icon}
+            rkType='moon primary xlarge'>{item.icon}
+          </RkText>
+          <RkText>{item.title}</RkText>
+        </View>
+        <RkText rkType='awesome secondaryColor small'>{FontAwesome.chevronRight}</RkText>
+      </View>
+    </TouchableHighlight>
+  );
+
+  render = () => (
+    <View style={styles.root}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}>
+        <View style={[styles.container, styles.content]}>
+          <RkText rkType='logo'>EcoAlerts</RkText>
+        </View>
+        {this.renderMenu()}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    height: 80,
+    paddingHorizontal: 16,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border.base,
+  },
+  root: {
+    paddingTop: Platform.OS === 'ios' ? 20 : 0,
+    backgroundColor: theme.colors.screen.base,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: 13,
+  },
+}));