1 files changed, 119 insertions, 0 deletions
diff --git a/client/src/lib/views/nav.js b/client/src/lib/views/nav.js
new file mode 100644
index 0000000..83f9aa4
--- /dev/null
+++ b/client/src/lib/views/nav.js
@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Platform,
+  View
+} from 'react-native';
+import { Link } from 'react-router-dom'
+import FadeInView from 'react-native-fade-in-view'
+
+const sections = [
+  '/',
+  '/timeline',
+  '/drones',
+  '/livestream',
+  '/information',
+  '/contact'
+]
+const images = [
+  require('../../img/nav/sidebar/home.png'),
+  require('../../img/nav/sidebar/timeline.png'),
+  require('../../img/nav/sidebar/drones.png'),
+  require('../../img/nav/sidebar/livestream.png'),
+  require('../../img/nav/sidebar/information.png'),
+  require('../../img/nav/sidebar/contact.png'),
+]
+
+export default class Nav extends Component {
+  constructor() {
+    super()
+  }
+  render() {
+    let opacity = 1
+    if (this.props.location.pathname === '/' || this.props.location.pathname === '/home') {
+      opacity = 0
+    }
+    const min = this.props.min || 0
+    const max = this.props.max || 6
+    const align = this.props.min == 0 ? styles.flexEnd : styles.flexStart
+    const links = sections.map((path, i) => {
+      const isSelected = this.props.location.pathname === path
+      const image = images[i]
+      return view(path, image, isSelected, align)
+    }).filter( (a,i) => { return min <= i && i < max })
+    return (
+      <View style={[styles.nav, align, {opacity: opacity}]}>
+        {links}
+      </View>
+    )
+  }
+}
+
+function view (path, image, isSelected, align) {
+  const key = 'link_' + (path.replace('/','') || 'home')
+  const style = [styles.image]
+  if (! isSelected) {
+    style.push(styles.unselectedNavItem)
+  }
+  else {
+    style.push(styles.selectedNavItem)
+  }
+  return (
+    <View style={[styles.item, align]} key={key}>
+      <Link to={path}>
+        <View style={[styles.item, align]}>
+          <Image key={'image_' + key} style={style} source={image} />
+        </View>
+      </Link>
+    </View>
+  )
+}
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+const styles = StyleSheet.create({
+  nav: {
+    width: '100%',
+    height: 35,
+    flex: 10,
+    flexGrow: 2,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  flexEnd: {
+    alignItems: 'flex-end',
+    paddingRight: isMobile ? 5 : 10,
+  },
+  flexStart: {
+    alignItems: 'flex-start',
+    paddingLeft: isMobile ? 5 : 10,
+  },
+  unselectedNavItem: {
+    opacity: 0.5,
+  },
+  selectedNavItem: {
+    opacity: 1.0,
+  },
+  item: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  image: {
+    margin: "0 auto",
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    width: 35,
+    height: 35,
+  },
+})
+
+