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 f7cf829

Browse filesBrowse files
xidedixxidedix
committed
fix(SidebarNav): missing class and attribs to navDropdown item
1 parent 0446a16 commit f7cf829
Copy full SHA for f7cf829

File tree

4 files changed

+66
-45
lines changed
Filter options

4 files changed

+66
-45
lines changed

‎CHANGELOG.md

Copy file name to clipboardExpand all lines: CHANGELOG.md
+9Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
### [@coreui/react](https://coreui.io/) changelog
22

3+
##### `v2.5.1`
4+
5+
- fix(SidebarNav): add missing `class` and `attributes` to navDropdown item
6+
7+
###### dependencies update
8+
- update `core-js` to `^2.6.8`
9+
- update `enzyme-adapter-react-16` to `^1.13.1`
10+
- update `webpack-dev-server` to `^3.4.1`
11+
312
##### `v2.5.0`
413
- BREAKING CHANGE release for use with `react-router-dom v5`
514
- feat(Breadcrumb2): mandatory prop `router` :boom: see: [Breadcrumb](./src/Breadcrumb.md)

‎src/SidebarNav.js

Copy file name to clipboardExpand all lines: src/SidebarNav.js
+9-4Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,14 @@ class AppSidebarNav extends Component {
109109
// nav dropdown
110110
navDropdown(item, key) {
111111
const classIcon = classNames('nav-icon', item.icon);
112+
const attributes = JSON.parse(JSON.stringify(item.attributes || {}));
113+
const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
114+
delete attributes.class;
112115
return (
113116
<li key={key} className={this.activeRoute(item.url, this.props)}>
114-
<a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={classIcon} />{item.name}{this.navBadge(item.badge)}</a>
117+
<a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
118+
{item.name}{this.navBadge(item.badge)}
119+
</a>
115120
<ul className="nav-dropdown-items">
116121
{this.navList(item.children)}
117122
</ul>
@@ -132,14 +137,14 @@ class AppSidebarNav extends Component {
132137

133138
// nav link
134139
navLink(item, key, classes) {
135-
const url = item.url ? item.url : '';
140+
const url = item.url || '';
136141
const itemIcon = <i className={classes.icon} />
137142
const itemBadge = this.navBadge(item.badge)
138143
const attributes = item.attributes || {}
139144
return (
140145
<NavItem key={key} className={classes.item}>
141146
{ attributes.disabled ?
142-
<RsNavLink href={""} className={classes.link} {...attributes}>
147+
<RsNavLink href={''} className={classes.link} {...attributes}>
143148
{itemIcon}{item.name}{itemBadge}
144149
</RsNavLink>
145150
:
@@ -181,7 +186,7 @@ class AppSidebarNav extends Component {
181186
const navClasses = classNames(className, 'sidebar-nav');
182187

183188
// ToDo: find better rtl fix
184-
const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
189+
const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
185190

186191
// sidebar-nav root
187192
return (

‎src/SidebarNav.md

Copy file name to clipboardExpand all lines: src/SidebarNav.md
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
5858
name: 'Icons',
5959
url: '/icons',
6060
icon: 'icon-star',
61+
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,
6163
children: [
6264
{
6365
name: 'Flags', // item options apply

‎src/SidebarNav2.js

Copy file name to clipboardExpand all lines: src/SidebarNav2.js
+46-41Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ class AppSidebarNav2 extends Component {
4747

4848
activeRoute(routeName, props) {
4949
return props.location.pathname.indexOf(routeName) > -1
50-
? 'nav-item nav-dropdown open'
51-
: 'nav-item nav-dropdown';
50+
? 'nav-item nav-dropdown open'
51+
: 'nav-item nav-dropdown';
5252
}
5353

5454
hideMobile() {
@@ -65,11 +65,11 @@ class AppSidebarNav2 extends Component {
6565
// nav type
6666
navType(item, idx) {
6767
return (
68-
item.title ? this.navTitle(item, idx)
69-
: item.divider ? this.navDivider(item, idx)
70-
: item.label ? this.navLabel(item, idx)
71-
: item.children ? this.navDropdown(item, idx)
72-
: this.navItem(item, idx)
68+
item.title ? this.navTitle(item, idx)
69+
: item.divider ? this.navDivider(item, idx)
70+
: item.label ? this.navLabel(item, idx)
71+
: item.children ? this.navDropdown(item, idx)
72+
: this.navItem(item, idx)
7373
);
7474
}
7575

@@ -96,27 +96,32 @@ class AppSidebarNav2 extends Component {
9696
item: classNames('hidden-cn', item.class),
9797
link: classNames('nav-label', item.class ? item.class : ''),
9898
icon: classNames(
99-
'nav-icon',
100-
!item.icon ? 'fa fa-circle' : item.icon,
101-
item.label.variant ? `text-${item.label.variant}` : '',
102-
item.label.class ? item.label.class : '',
99+
'nav-icon',
100+
!item.icon ? 'fa fa-circle' : item.icon,
101+
item.label.variant ? `text-${item.label.variant}` : '',
102+
item.label.class ? item.label.class : '',
103103
)
104104
};
105105
return (
106-
this.navLink(item, key, classes)
106+
this.navLink(item, key, classes)
107107
);
108108
}
109109

110110
// nav dropdown
111111
navDropdown(item, key) {
112112
const classIcon = classNames('nav-icon', item.icon);
113+
const attributes = JSON.parse(JSON.stringify(item.attributes || {}));
114+
const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
115+
delete attributes.class;
113116
return (
114-
<li key={key} className={this.activeRoute(item.url, this.props)}>
115-
<a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={classIcon} />{item.name}{this.navBadge(item.badge)}</a>
116-
<ul className="nav-dropdown-items">
117-
{this.navList(item.children)}
118-
</ul>
119-
</li>);
117+
<li key={key} className={this.activeRoute(item.url, this.props)}>
118+
<a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
119+
{item.name}{this.navBadge(item.badge)}
120+
</a>
121+
<ul className="nav-dropdown-items">
122+
{this.navList(item.children)}
123+
</ul>
124+
</li>);
120125
}
121126

122127
// nav item with nav link
@@ -127,7 +132,7 @@ class AppSidebarNav2 extends Component {
127132
icon: classNames('nav-icon', item.icon)
128133
};
129134
return (
130-
this.navLink(item, key, classes)
135+
this.navLink(item, key, classes)
131136
);
132137
}
133138

@@ -139,21 +144,21 @@ class AppSidebarNav2 extends Component {
139144
const attributes = item.attributes || {}
140145
const NavLink = this.props.router.NavLink || RsNavLink
141146
return (
142-
<NavItem key={key} className={classes.item}>
143-
{ attributes.disabled ?
144-
<RsNavLink href={""} className={classes.link} {...attributes}>
145-
{itemIcon}{item.name}{itemBadge}
146-
</RsNavLink>
147-
:
148-
this.isExternal(url) || NavLink === RsNavLink ?
149-
<RsNavLink href={url} className={classes.link} active {...attributes}>
150-
{itemIcon}{item.name}{itemBadge}
151-
</RsNavLink> :
152-
<NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile} {...attributes}>
153-
{itemIcon}{item.name}{itemBadge}
154-
</NavLink>
155-
}
156-
</NavItem>
147+
<NavItem key={key} className={classes.item}>
148+
{ attributes.disabled ?
149+
<RsNavLink href={''} className={classes.link} {...attributes}>
150+
{itemIcon}{item.name}{itemBadge}
151+
</RsNavLink>
152+
:
153+
this.isExternal(url) || NavLink === RsNavLink ?
154+
<RsNavLink href={url} className={classes.link} active {...attributes}>
155+
{itemIcon}{item.name}{itemBadge}
156+
</RsNavLink> :
157+
<NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile} {...attributes}>
158+
{itemIcon}{item.name}{itemBadge}
159+
</NavLink>
160+
}
161+
</NavItem>
157162
);
158163
}
159164

@@ -162,7 +167,7 @@ class AppSidebarNav2 extends Component {
162167
if (badge) {
163168
const classes = classNames(badge.class);
164169
return (
165-
<Badge className={classes} color={badge.variant}>{badge.text}</Badge>
170+
<Badge className={classes} color={badge.variant}>{badge.text}</Badge>
166171
);
167172
}
168173
return null;
@@ -184,15 +189,15 @@ class AppSidebarNav2 extends Component {
184189
const navClasses = classNames(className, 'sidebar-nav');
185190

186191
// ToDo: find better rtl fix
187-
const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
192+
const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
188193

189194
// sidebar-nav root
190195
return (
191-
<PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
192-
<Nav>
193-
{children || this.navList(navConfig.items)}
194-
</Nav>
195-
</PerfectScrollbar>
196+
<PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
197+
<Nav>
198+
{children || this.navList(navConfig.items)}
199+
</Nav>
200+
</PerfectScrollbar>
196201
);
197202
}
198203
}

0 commit comments

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