fix(SidebarNav): add missing itemAttr to item/item with children (optional)

Author: xidedix

src/Breadcrumb.js

@@ -28,6 +28,7 @@ const BreadcrumbsItem = ({ match }) => {
   const routeName = findRouteName(match.url);
   if (routeName) {
     return (
+        // eslint-disable-next-line react/prop-types
       match.isExact ?
         <BreadcrumbItem active>{routeName}</BreadcrumbItem>
        :

src/Breadcrumb2.js

@@ -30,6 +30,7 @@ const BreadcrumbsItem2 = ({ match }) => {
   const Link = router.Link;
   if (routeName) {
     return (
+        // eslint-disable-next-line react/prop-types
       match.isExact ?
         <BreadcrumbItem active>{routeName}</BreadcrumbItem>
        :

src/SidebarNav.md

@@ -49,7 +49,8 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
     text: 'NEW',
     class: ''                   // optional
   },
-  attributes: { target: '_blank', rel: "noreferrer noopener", disabled: false, hidden: false }, // (v2.1.0 up) optional valid JS object with JS API naming
+  attributes: { target: '_blank', rel: "noreferrer noopener", disabled: false, hidden: false }, // (v2.1.0 up) link html attributes - optional valid JS object with JS API naming
+  itemAttr: { id: 'item-1'},    // item html attributes - optional
 },
 ```
 - item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items`
@@ -59,7 +60,8 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
   url: '/icons',
   icon: 'icon-star',
   class: 'text-uppercase',             // (v2.5.1 up) optional
-  attributes: { class: 'bg-success' }, // (v2.5.1 up) optional valid JS object with JS API naming,
+  attributes: { class: 'bg-success' }, // (v2.5.1 up) nav-dropdown link html attributes - optional valid JS object with JS API naming,
+  itemAttr: { id: 'drop-1' },          // (v2.5.3 up) item html attributes - optional
   children: [
     {
       name: 'Flags',     // item options apply

src/SidebarNav2.js

@@ -57,6 +57,10 @@ class AppSidebarNav2 extends Component {
     }
   }
 
+  getAttribs(attributes) {
+    return JSON.parse(JSON.stringify(attributes || {}));
+  }
+
   // nav list
   navList(items) {
     return items.map((item, index) => this.navType(item, index));
@@ -110,11 +114,14 @@ class AppSidebarNav2 extends Component {
   // nav dropdown
   navDropdown(item, key) {
     const classIcon = classNames('nav-icon', item.icon);
-    const attributes = JSON.parse(JSON.stringify(item.attributes || {}));
+    const attributes = this.getAttribs(item.attributes);
     const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
     delete attributes.class;
+    const itemAttr = this.getAttribs(item.itemAttr);
+    const liClasses = classNames(this.activeRoute(item.url, this.props), itemAttr.class)
+    delete itemAttr.class;
     return (
-      <li key={key} className={this.activeRoute(item.url, this.props)}>
+      <li key={key} className={liClasses} {...itemAttr}>
         <a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
           {item.name}{this.navBadge(item.badge)}
         </a>
@@ -141,10 +148,15 @@ class AppSidebarNav2 extends Component {
     const url = item.url || '';
     const itemIcon = <i className={classes.icon} />
     const itemBadge = this.navBadge(item.badge)
-    const attributes = item.attributes || {}
+    const attributes = this.getAttribs(item.attributes)
+    classes.link = classNames(classes.link, attributes.class)
+    delete attributes.class;
+    const itemAttr = this.getAttribs(item.itemAttr)
+    classes.item = classNames(classes.item, itemAttr.class)
+    delete itemAttr.class;
     const NavLink = this.props.router.NavLink || RsNavLink
     return (
-      <NavItem key={key} className={classes.item}>
+      <NavItem key={key} className={classes.item} {...itemAttr}>
         { attributes.disabled ?
             <RsNavLink href={''} className={classes.link} {...attributes}>
               {itemIcon}{item.name}{itemBadge}