66 lines
1.2 KiB
JavaScript
66 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import Link from "next/link";
|
|
|
|
const menu = [
|
|
{id: 1, name: "Номер телефона", link: "/settings/phone"},
|
|
{id: 2, name: "Пароль", link: "/settings/password"},
|
|
]
|
|
|
|
export default class InnerMenu extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.menuRef = React.createRef();
|
|
|
|
menu.forEach(item =>
|
|
{
|
|
this[item.id] = React.createRef();
|
|
});
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
let l = 0;
|
|
let m = 0;
|
|
|
|
for(let i in menu)
|
|
{
|
|
if(this.props.router.asPath.indexOf(menu[i].link) > -1)
|
|
{
|
|
m = i;
|
|
}
|
|
}
|
|
|
|
for(let i = 0; i < m; i++)
|
|
{
|
|
l = l + this.menuRef.current.children[i].getBoundingClientRect().width;
|
|
}
|
|
|
|
this.menuRef.current.scrollLeft = l - 50;
|
|
}
|
|
|
|
scrollToCategory = id => {
|
|
|
|
};
|
|
|
|
render()
|
|
{
|
|
return (
|
|
<aside>
|
|
<ul className="aside_nav" ref={ this.menuRef }>
|
|
{ menu.map(item => (
|
|
<li key = {item.id} ref={this[item.id]} onClick={() => this.scrollToCategory(item.id)}>
|
|
<Link
|
|
href={item.link}
|
|
shallow
|
|
>
|
|
<a className={ this.props.router && this.props.router.route === item.link ? "active" : "" }>{item.name}</a>
|
|
</Link>
|
|
</li>
|
|
)) }
|
|
</ul>
|
|
</aside>
|
|
)
|
|
}
|
|
} |