Added ability for root element to be either non-semantic html (div) o…

…r semantic html (nav).
balloob · Feb 10, 2018 · faafe63 · faafe63
1 parent 12b2baa
commit faafe63
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git 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
@@ -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: {},