1 files changed, 73 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
new file mode 100644
index 0000000000..feb0f813ea
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import classnames from 'classnames';
+import Collapse from 'react-bootstrap/lib/Collapse.js';
+
+class NavigationSideBar extends React.Component {
+
+	static PropTypes = {
+		activeItemId: React.PropTypes.string.isRequired,
+		onSelect: React.PropTypes.func,
+		onToggle: React.PropTypes.func,
+		groups: React.PropTypes.array
+	};
+
+	render() {
+		let {groups, activeItemId} = this.props;
+
+		return (
+			<div className='navigation-side-content'>
+				{groups.map(group => (
+					<div className='navigation-group'  key={group.id}>
+						<div className='group-name'>{group.name}</div>
+						<div className='navigation-group-items'>
+							{
+								group.items && group.items.map(item => this.renderGroupItem(item, activeItemId))
+							}
+						</div>
+					</div>
+				))}
+			</div>
+		);
+	}
+
+	renderGroupItem(item, activeItemId) {
+		let isGroup = item.items && item.items.length > 0;
+		return (
+			<div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})}>
+				<div
+					key={item.id}
+					className={classnames('navigation-group-item-name', {
+						'selected': item.id === activeItemId,
+						'disabled': item.disabled,
+						'bold-name': item.expanded,
+						'hidden': item.hidden
+					})}
+					onClick={(event) => this.handleItemClicked(event, item)}>
+					{item.name}
+				</div>
+				{isGroup &&
+					<Collapse in={item.expanded}>
+						<div>
+							{item.items.map(item => this.renderGroupItem(item, activeItemId))}
+						</div>
+					</Collapse>
+				}
+			</div>
+		);
+	}
+
+	handleItemClicked(event, item) {
+		event.stopPropagation();
+		if(this.props.onToggle) {
+			this.props.onToggle(this.props.groups, item.id);
+		}
+		if(item.onSelect) {
+			item.onSelect();
+		}
+		if(this.props.onSelect) {
+			this.props.onSelect(item);
+		}
+	}
+}
+
+export default NavigationSideBar;