1 files changed, 80 insertions, 0 deletions
diff --git a/webapp/components/admin_console/admin_sidebar_section.jsx b/webapp/components/admin_console/admin_sidebar_section.jsx
new file mode 100644
index 000000000..0492745ca
--- /dev/null
+++ b/webapp/components/admin_console/admin_sidebar_section.jsx
@@ -0,0 +1,80 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import {Link} from 'react-router';
+
+export default class AdminSidebarSection extends React.Component {
+    static get propTypes() {
+        return {
+            name: React.PropTypes.string.isRequired,
+            title: React.PropTypes.node.isRequired,
+            parentLink: React.PropTypes.string,
+            subsection: React.PropTypes.bool,
+            children: React.PropTypes.arrayOf(React.PropTypes.element),
+            action: React.PropTypes.node,
+            onlyActiveOnIndex: React.PropTypes.bool
+        };
+    }
+
+    static get defaultProps() {
+        return {
+            parentLink: '',
+            subsection: false,
+            children: [],
+            onlyActiveOnIndex: true
+        };
+    }
+
+    getLink() {
+        return this.props.parentLink + '/' + this.props.name;
+    }
+
+    render() {
+        const link = this.getLink();
+
+        let clonedChildren = null;
+        if (this.props.children.length > 0) {
+            clonedChildren = (
+                <ul className='nav nav__sub-menu subsections'>
+                    {
+                        React.Children.map(this.props.children, (child) => {
+                            if (child === null) {
+                                return null;
+                            }
+
+                            return React.cloneElement(child, {
+                                parentLink: link,
+                                subsection: true
+                            });
+                        })
+                    }
+                </ul>
+            );
+        }
+
+        let className = 'sidebar-section';
+        if (this.props.subsection) {
+            className += ' sidebar-subsection';
+        }
+
+        return (
+            <li className={className}>
+                <Link
+                    className={`${className}-title`}
+                    activeClassName={`${className}-title ${className}-title--active`}
+                    onlyActiveOnIndex={this.props.onlyActiveOnIndex}
+                    onClick={this.handleClick}
+                    to={link}
+                >
+                    <span className={`${className}-title__text`}>
+                        {this.props.title}
+                    </span>
+                    {this.props.action}
+                </Link>
+                {clonedChildren}
+            </li>
+        );
+    }
+}