From 414ba870cca5ac04b513d15003d0ef8b4d96e7aa Mon Sep 17 00:00:00 2001
From: joeflack4 <joeflack4@gmail.com>
Date: Fri, 9 Feb 2018 20:07:17 -0500
Subject: [PATCH] Added ability for root element to be either non-semantic html
 (div) or semantic html (nav).

---
 dist-modules/sidebar.js | 24 +++++++++++++++++++-----
 src/sidebar.js          | 22 +++++++++++++++++++---
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/dist-modules/sidebar.js b/dist-modules/sidebar.js
index c2e0f904ca..e4d3cee56f 100755
--- a/dist-modules/sidebar.js
+++ b/dist-modules/sidebar.js
@@ -363,14 +363,24 @@ var Sidebar = function (_Component) {
         }
       }
 
+      var sideBar = this.props.sidebarElement === 'nav' ? _react2.default.createElement(
+        'nav',
+        { className: this.props.sidebarClassName,
+          style: sidebarStyle,
+          ref: this.saveSidebarRef },
+        this.props.sidebar
+      ) : _react2.default.createElement(
+        'div',
+        { className: this.props.sidebarClassName,
+          style: sidebarStyle,
+          ref: this.saveSidebarRef },
+        this.props.sidebar
+      );
+
       return _react2.default.createElement(
         'div',
         rootProps,
-        _react2.default.createElement(
-          'div',
-          { className: this.props.sidebarClassName, style: sidebarStyle, ref: this.saveSidebarRef },
-          this.props.sidebar
-        ),
+        sideBar,
         _react2.default.createElement('div', { className: this.props.overlayClassName,
           style: overlayStyle,
           role: 'presentation',
@@ -439,6 +449,9 @@ Sidebar.propTypes = {
   // Enable/Disable sidebar shadow
   shadow: _propTypes2.default.bool,
 
+  // if an element other than 'div' is to be rendered as the sidebar root.
+  sidebarElement: _propTypes2.default.string,
+
   // distance we have to drag the sidebar to toggle open state
   dragToggleDistance: _propTypes2.default.number,
 
@@ -457,6 +470,7 @@ Sidebar.defaultProps = {
   touchHandleWidth: 20,
   pullRight: false,
   shadow: true,
+  sidebarElement: 'div',
   dragToggleDistance: 30,
   onSetOpen: function onSetOpen() {},
   styles: {},
diff --git a/src/sidebar.js b/src/sidebar.js
index a5912516e7..7ee67f38a9 100755
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -317,11 +317,23 @@ class Sidebar extends Component {
       }
     }
 
+    const sideBar = this.props.sidebarElement === 'nav'
+      ? <nav className={this.props.sidebarClassName}
+           style={sidebarStyle}
+           ref={this.saveSidebarRef}>
+          {this.props.sidebar}
+        </nav>
+      : <div className={this.props.sidebarClassName}
+           style={sidebarStyle}
+           ref={this.saveSidebarRef}>
+          {this.props.sidebar}
+        </div>;
+
     return (
       <div {...rootProps}>
-        <div className={this.props.sidebarClassName} style={sidebarStyle} ref={this.saveSidebarRef}>
-          {this.props.sidebar}
-        </div>
+
+        {sideBar}
+
         <div className={this.props.overlayClassName}
              style={overlayStyle}
              role="presentation"
@@ -386,6 +398,9 @@ Sidebar.propTypes = {
   // Enable/Disable sidebar shadow
   shadow: PropTypes.bool,
 
+  // if an element other than 'div' is to be rendered as the sidebar root.
+  sidebarElement: PropTypes.string,
+
   // distance we have to drag the sidebar to toggle open state
   dragToggleDistance: PropTypes.number,
 
@@ -404,6 +419,7 @@ Sidebar.defaultProps = {
   touchHandleWidth: 20,
   pullRight: false,
   shadow: true,
+  sidebarElement: 'div',
   dragToggleDistance: 30,
   onSetOpen: () => {},
   styles: {},