-
Notifications
You must be signed in to change notification settings - Fork 51
/
index.jsx
109 lines (107 loc) · 4.43 KB
/
index.jsx
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
import React, {Component} from 'react'
import { DropdownButton, MenuItem, ProgressBar,
Nav, NavItem } from 'react-bootstrap'
import { Icon } from '../../components'
/**
* Root component for Sidebar
*/
class Sidebar extends Component {
constructor (props) {
super(props)
this.state = {
display: false,
arrow: false,
sideshow: false
}
}
toggleDisplay () {
this.setState(prevState => ({display: !prevState.display}))
this.setState(prevState => ({arrow: !prevState.arrow}))
}
/* eslint-disable react/jsx-no-bind, no-return-assign */
render () {
const displayAccordion = this.state.display ? 'accordion-section-content' +
' open' : 'accordion-section-content'
const toggleArrow = this.state.arrow ? 'hide-desktop up' : 'hide-desktop' +
' down'
return (
<div className='sidebar accordion'>
<div className='sidebar-wrapper'>
<div className='sidebar-container'>
<div className='sidebar-content'>
<a className='accordion-section-title'
onClick={::this.toggleDisplay}>
<Icon name='project' className='iconProject' />
<span className='projtitle'>Zanata Server</span>
<svg className={toggleArrow}>
<use xlinkHref='#Icon-chevron-down'></use></svg>
</a>
<div id='accordion-1' className={displayAccordion}>
<Nav bsStyle='pills' stacked activeKey={1}>
<NavItem eventKey={1} href=''>
<Icon name='users' className='s1 iconSidebar' />
People</NavItem>
<NavItem eventKey={2} href=''>
<Icon name='info' className='s1 iconSidebar' />
About</NavItem>
<NavItem eventKey={3} href=''>
<Icon name='settings' className='s1 iconSidebar' />
Settings </NavItem>
</Nav>
<DropdownButton title='Options' id='optionsDropdown'
className='btn-sm btn-default'>
<MenuItem eventKey='1'>Copy translations</MenuItem>
<MenuItem eventKey='2'>Merge translations</MenuItem>
<MenuItem eventKey='3'>Copy to new version</MenuItem>
<MenuItem eventKey='4'>Download config file</MenuItem>
<MenuItem eventKey='5'>Export version to TMX</MenuItem>
</DropdownButton>
<div id='sidebarVersion'>
<div className='sidebarVersion-inline'>
<span className='sidebarVersion-title'>
<Icon name='version' className='s2' />
<span className='versionHeading'>VERSION</span>
</span>
<DropdownButton id='version-dropdown'
className='btn-sm btn-default'
title='master'>
<MenuItem eventKey='1'>release</MenuItem>
<MenuItem eventKey='2'>test-1</MenuItem>
</DropdownButton>
</div>
<p className='sidebarVersion-settings'>
<a href=''>Version settings</a>
</p>
<div className='sidebarVersion-percent'>
<p><span className='percent'>10%</span> translated</p>
</div>
<ProgressBar>
<ProgressBar className='progress-bar-success'
now={10} key={1} />
<ProgressBar className='progress-bar-warning'
now={7} key={2} />
<ProgressBar className='progress-bar-danger'
now={3} key={3} />
<ProgressBar className='progress-bar-info'
now={10} key={4} />
</ProgressBar>
<Nav className='v-links'
bsStyle='pills' stacked activeKey={1}>
<NavItem eventKey={1} href=''>
Languages</NavItem>
<NavItem eventKey={2} href=''>
Documents</NavItem>
<NavItem eventKey={3} href=''>
Groups </NavItem>
</Nav>
</div>
</div>
</div>
</div>
</div>
</div>
)
/* eslint-enable react/jsx-no-bind, no-return-assign */
}
}
export default Sidebar