Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit e2f2f78

Browse filesBrowse files
xidedixxidedix
committed
fix(SidebarNav): add missing itemAttr to item/item with children (optional)
1 parent cfd4319 commit e2f2f78
Copy full SHA for e2f2f78

File tree

Expand file treeCollapse file tree

4 files changed

+22
-6
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+22
-6
lines changed

‎src/Breadcrumb.js

Copy file name to clipboardExpand all lines: src/Breadcrumb.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const BreadcrumbsItem = ({ match }) => {
2828
const routeName = findRouteName(match.url);
2929
if (routeName) {
3030
return (
31+
// eslint-disable-next-line react/prop-types
3132
match.isExact ?
3233
<BreadcrumbItem active>{routeName}</BreadcrumbItem>
3334
:

‎src/Breadcrumb2.js

Copy file name to clipboardExpand all lines: src/Breadcrumb2.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const BreadcrumbsItem2 = ({ match }) => {
3030
const Link = router.Link;
3131
if (routeName) {
3232
return (
33+
// eslint-disable-next-line react/prop-types
3334
match.isExact ?
3435
<BreadcrumbItem active>{routeName}</BreadcrumbItem>
3536
:

‎src/SidebarNav.md

Copy file name to clipboardExpand all lines: src/SidebarNav.md
+4-2Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
4949
text: 'NEW',
5050
class: '' // optional
5151
},
52-
attributes: { target: '_blank', rel: "noreferrer noopener", disabled: false, hidden: false }, // (v2.1.0 up) optional valid JS object with JS API naming
52+
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
53+
itemAttr: { id: 'item-1'}, // item html attributes - optional
5354
},
5455
```
5556
- 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.
5960
url: '/icons',
6061
icon: 'icon-star',
6162
class: 'text-uppercase', // (v2.5.1 up) optional
62-
attributes: { class: 'bg-success' }, // (v2.5.1 up) optional valid JS object with JS API naming,
63+
attributes: { class: 'bg-success' }, // (v2.5.1 up) nav-dropdown link html attributes - optional valid JS object with JS API naming,
64+
itemAttr: { id: 'drop-1' }, // (v2.5.3 up) item html attributes - optional
6365
children: [
6466
{
6567
name: 'Flags', // item options apply

‎src/SidebarNav2.js

Copy file name to clipboardExpand all lines: src/SidebarNav2.js
+16-4Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ class AppSidebarNav2 extends Component {
5757
}
5858
}
5959

60+
getAttribs(attributes) {
61+
return JSON.parse(JSON.stringify(attributes || {}));
62+
}
63+
6064
// nav list
6165
navList(items) {
6266
return items.map((item, index) => this.navType(item, index));
@@ -110,11 +114,14 @@ class AppSidebarNav2 extends Component {
110114
// nav dropdown
111115
navDropdown(item, key) {
112116
const classIcon = classNames('nav-icon', item.icon);
113-
const attributes = JSON.parse(JSON.stringify(item.attributes || {}));
117+
const attributes = this.getAttribs(item.attributes);
114118
const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
115119
delete attributes.class;
120+
const itemAttr = this.getAttribs(item.itemAttr);
121+
const liClasses = classNames(this.activeRoute(item.url, this.props), itemAttr.class)
122+
delete itemAttr.class;
116123
return (
117-
<li key={key} className={this.activeRoute(item.url, this.props)}>
124+
<li key={key} className={liClasses} {...itemAttr}>
118125
<a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
119126
{item.name}{this.navBadge(item.badge)}
120127
</a>
@@ -141,10 +148,15 @@ class AppSidebarNav2 extends Component {
141148
const url = item.url || '';
142149
const itemIcon = <i className={classes.icon} />
143150
const itemBadge = this.navBadge(item.badge)
144-
const attributes = item.attributes || {}
151+
const attributes = this.getAttribs(item.attributes)
152+
classes.link = classNames(classes.link, attributes.class)
153+
delete attributes.class;
154+
const itemAttr = this.getAttribs(item.itemAttr)
155+
classes.item = classNames(classes.item, itemAttr.class)
156+
delete itemAttr.class;
145157
const NavLink = this.props.router.NavLink || RsNavLink
146158
return (
147-
<NavItem key={key} className={classes.item}>
159+
<NavItem key={key} className={classes.item} {...itemAttr}>
148160
{ attributes.disabled ?
149161
<RsNavLink href={''} className={classes.link} {...attributes}>
150162
{itemIcon}{item.name}{itemBadge}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.