80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
import React from "react";
|
||
import Link from "next/link";
|
||
|
||
export default class InnerMenu extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.menuRef = React.createRef();
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
let l = 0;
|
||
let m = 0;
|
||
const menu = ["payments", "services", "agreement", "documents", "materials","events","change"];
|
||
|
||
for(let i in menu)
|
||
{
|
||
if(this.props.router.asPath.indexOf(menu[i]) > -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;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { number } = this.props;
|
||
|
||
return (
|
||
<aside>
|
||
<ul className="aside_nav" ref={ this.menuRef }>
|
||
<li>
|
||
<Link href={`/contract/${ number }/events`} shallow>
|
||
<a className={ this.props.router && this.props.router.asPath.indexOf("events") > -1 ? "active" : "" }>Все события</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={`/contract/${ number }/change`} shallow>
|
||
<a className={ this.props.router && this.props.router.asPath.indexOf("change") > -1 ? "active" : "" }>Ограничения</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={`/contract/${ number }/services`} shallow>
|
||
<a className={ this.props.router && this.props.router.asPath.indexOf("services") > -1 ? "active" : "" }>Платежи</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={`/contract/${ number }/agreement`} shallow>
|
||
<a className={ this.props.router && this.props.router.asPath.indexOf("agreement") > -1 ? "active" : "" }>Дополнительные услуги</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={`/contract/${ number }/documents`} shallow>
|
||
<a className={ this.props.router && this.props.router.asPath.indexOf("documents") > -1 ? "active" : "" }>Штрафы</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={`/contract/${ number }/materials`} shallow>
|
||
<a className={ this.props.router && this.props.router.asPath.indexOf("materials") > -1 ? "active" : "" }>Банки</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={`/contract/${ number }/payments`} shallow>
|
||
<a className={ this.props.router && this.props.router.asPath.indexOf("payments") > -1 ? "active" : "" }>ПТС</a>
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
)
|
||
}
|
||
} |