import React from 'react';
import { Link } from "react-router-dom";
//import { connect } from "react-redux";

import './sidebar.scss';

const siteMenu = [
    {
        text: 'Home',
        href: '/',
        id: 0
    },
    {
        text: 'Events',
        href: '/events',
        id: 1
    },
    {
        text: 'Result',
        href: '/result',
        id: 2
    },
    {
        text: 'Gallery',
        href: '/gallery',
        id: 3
    },
    {
        text: 'Reviews',
        href: '/reviews',
        id: 4
    },
    {
        text: 'Login',
        href: '/login',
        id: 5
    }
];

export default class Sidebar extends React.Component {
    render() {
        return (
            <div className="menu">
                <nav>
                    <div className="logo">
                        <Link to="/">
                            Sport
                        </Link>
                    </div>
                    <ul>
                        {
                            siteMenu.map(link =>
                                <li key={link.id}>
                                    <Link to={link.href}>{link.text}</Link>
                                </li>
                            )
                        }
                    </ul>
                </nav>
                <div className="menu-skew">
                    <div className="img-bg"></div>
                </div>
            </div>
        )
    }
}