import React from "react";
import Link from "next/link";

const menu = [
	{id: 1, name: "Календарь оплат", link: "/documents/calendar"},
	{id: 2, name: "Акты сверок", link: "/documents/reconciliations"},
	{id: 3, name: "Закрывающие документы", link: "/documents/finals"},
]

export default class InnerMenu extends React.Component
{
	constructor(props)
	{
		super(props);
		this.menuList = React.createRef();
		menu.forEach(item => {
			this[item.id] = React.createRef();
		});
	}

	componentDidMount() {

	}

	scrollToCategory = id => {
		
	  };

	render()
	{
		
		return (
			<aside>
				<ul className="aside_nav" ref={this.menuList}>
				{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>
		)
	}
}