Open NatalJR opened 6 years ago
Hi @NatalJR, I got it and published new patch v1.4.0-alpha.2
. Now it supposed to be fixed.
Hi @alpertuna, thank you for the update. I've updated the component to alpha.2, and well, the issue persists. But when click a item on the menu that leads to a link that isn't routed, the menu behaves just fine. Im not sure why, but I suspect it's not exactly a problem with metismenu component, but it may be a problem in the interaction with react-router/browserHistory. Either that, or i really messed up somewhere.
Could you try adding /
to each to
property like this;
{
label: 'Abertas',
to: '/abertas'
}
Also to path
properties of <Route>
s
Sorry for taking so long to reply.
Tried that, still don't work.
I forgot to mention, when i select an item then close and open the menu drawer the sub menu is open and the item is correctly selected.
I have seen similar issues with alpha2. Even calling this.refs.menu.changeActiveLinkTo('/users'); or using <MetisMenu activeLinkTo={this.state.activeLinkTo} /> does not set the active class on the menu items.
With hot reloading though, if i add/remove/add <MetisMenu activeLinkFromLocation /> The correct menu option will be active. Is this an order of operations, race or timing issue?
I have two instances of the metis menu (unique refs) in my component for different menus.
Same Issue I am facing sub menu collapsed after click sub menu item and on click item is not active, but on second click it becomes active.
version using "react-metismenu": "^1.4.0", "react-metismenu-router-link": "^2.1.0",
Hi Alper, I created a basic Metis Menu example with Custom Links. The Menu items (parent and child both) don't seem to be getting activated. (Just the classes to colour them are not being added, Though they open and collapse without any issues) Here below is my code. Can you please help me with what am I missing.
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import MetisMenu from 'react-metismenu';
class LeftPanel extends Component {
constructor(props) {
super(props);
this.state = {
content: [
{
id: 1,
icon: 'metismenu-icon fa fa-angle-down',
label: 'A',
content: [
{
id: 2,
icon: 'metismenu-icon fa fa-ruler-combined',
label: 'B',
to: 'B'
},
{
id: 3,
icon: 'metismenu-icon fa fa-angle-double-right',
label: 'C',
to: '#C'
},
{
id: 4,
icon: 'metismenu-icon fa fa-angle-double-right',
label: 'D',
to: '#D'
},
{
id: 5,
icon: 'metismenu-icon fa fa-angle-double-right',
label: 'E',
to: '#E'
},
{
id: 6,
icon: 'metismenu-icon fa fa-angle-double-right',
label: 'F',
to: '#F'
},
]
},
{
id: 7,
icon: 'metismenu-icon fa fa-angle-down',
label: 'G',
content: [
{
id: 8,
icon: 'metismenu-icon fa fa-angle-double-right',
label: 'H',
to: '#H'
},
]
},
{
id: 9,
icon: 'metismenu-icon fa fa-angle-down',
label: 'I',
content: [
{
id: 10,
icon: 'metismenu-icon fa fa-angle-double-right',
label: 'J',
to: '#WJ'
},
]
},
{
id: 11,
icon: 'metismenu-icon fa fa-angle-down',
label: 'K',
content: [
{
id: 12,
icon: 'metismenu-icon fa fa-angle-double-right',
label: 'L',
to: '#L'
},
]
},
{
id: 13,
icon: 'metismenu-icon fa fa-angle-down',
label: 'M',
content: [
{
id: 14,
icon: 'metismenu-icon fa fa-angle-double-right',
label: 'N',
to: '#N'
},
]
}
]
};
}
render() {
return ReactDOM.render(
<MetisMenu content={this.state.content} LinkComponent={CustomLink} activeLinkId/>,
document.getElementById('left')
);
}
} export default LeftPanel;
class CustomLink extends React.Component { constructor() { super(); this.onClick = this.onClick.bind(this); }
onClick(e) {
if (this.props.hasSubMenu) { this.props.toggleSubMenu(e); }
else {
this.props.activateMe({
newLocation: this.props.to,
selectedMenuLabel: this.props.label,
});
}
}
render() {
return (
<div className="metismenu-link" onClick={this.onClick}>
{this.props.children}
</div>
);
}
};
Hey guys, I was able to solve this by holding the active link in state. I am using a hash router so if you are not then you may need to change window.location.hash.replace(/^#/,'') to whatever will match the "to" field of your menu item.
import React, {Component} from 'react';
import MetisMenu from 'react-metismenu';
class MetisSideBar extends React.Component {
constructor(props) {
super(props);
this.state = {activeLinkTo: '/#'};
}
componentDidMount() {
this.setState({
activeLinkTo: window.location.hash.replace(/^#/,'')
});
}
componentWillReceiveProps() {
this.setState({
activeLinkTo: window.location.hash.replace(/^#/,'')
});
}
render() {
const metisMenuItems = [
{
icon: 'dashboard',
label: 'Sigtrans',
to: '/'
},
{
icon: 'bell',
label: 'Ocorrencias',
content: [
{
label: 'Abertas',
to: 'abertas'
}
]
},
{
icon: 'ambulance',
label: 'Ocorrencias fatais',
to: 'obitos'
}
];
return (
<div id="metisMenu">
<MetisMenu
ref="metisMenu"
content={metisMenuItems}
activeLinkTo={this.state.activeLinkTo}
/>
</div>);
}
export default MetisSideBar;
cheers
Hey guys, I was able to solve this by holding the active link in state. I am using a hash router so if you are not then you may need to change window.location.hash.replace(/^#/,'') to whatever will match the "to" field of your menu item.
import React, {Component} from 'react'; import MetisMenu from 'react-metismenu'; class MetisSideBar extends React.Component { constructor(props) { super(props); this.state = {activeLinkTo: '/#'}; } componentDidMount() { this.setState({ activeLinkTo: window.location.hash.replace(/^#/,'') }); } componentWillReceiveProps() { this.setState({ activeLinkTo: window.location.hash.replace(/^#/,'') }); } render() { const metisMenuItems = [ { icon: 'dashboard', label: 'Sigtrans', to: '/' }, { icon: 'bell', label: 'Ocorrencias', content: [ { label: 'Abertas', to: 'abertas' } ] }, { icon: 'ambulance', label: 'Ocorrencias fatais', to: 'obitos' } ]; return ( <div id="metisMenu"> <MetisMenu ref="metisMenu" content={metisMenuItems} activeLinkTo={this.state.activeLinkTo} /> </div>); } export default MetisSideBar;
cheers
Will try this as soon as possible!
Hey guys, I was able to solve this by holding the active link in state. I am using a hash router so if you are not then you may need to change window.location.hash.replace(/^#/,'') to whatever will match the "to" field of your menu item.
import React, {Component} from 'react'; import MetisMenu from 'react-metismenu'; class MetisSideBar extends React.Component { constructor(props) { super(props); this.state = {activeLinkTo: '/#'}; } componentDidMount() { this.setState({ activeLinkTo: window.location.hash.replace(/^#/,'') }); } componentWillReceiveProps() { this.setState({ activeLinkTo: window.location.hash.replace(/^#/,'') }); } render() { const metisMenuItems = [ { icon: 'dashboard', label: 'Sigtrans', to: '/' }, { icon: 'bell', label: 'Ocorrencias', content: [ { label: 'Abertas', to: 'abertas' } ] }, { icon: 'ambulance', label: 'Ocorrencias fatais', to: 'obitos' } ]; return ( <div id="metisMenu"> <MetisMenu ref="metisMenu" content={metisMenuItems} activeLinkTo={this.state.activeLinkTo} /> </div>); } export default MetisSideBar;
cheers
Will try this as soon as possible!
Let me know how it goes!
Hi, whenever i click an item on the menu it takes me to the page it's supposed to go, but it doesn't set the "active" link and if the item is in a sub-menu, the sub-menu is closed.
At first i thought it was a problem with the store, but it seems to be working just fine.
Then i thought it was the same issue as #26, but
activeLinkFromLocation
is set.When an item is selected it behaves like this (first image is when i open the navbar):
I'm not running on server side. And since it is quite possible it's an error on my code, here is what i think is relevant.
index.js
mainMenu css
App.js