1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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' || this.props.location.pathname === '/site.html') {
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,
},
})
|
