import Link from 'next/link'
import theme from '../../styles/theme'

const AdminSideBar = () => {
  return (
    <nav className='admin-sidebar'>
      <h3>Admin Area</h3>
      <ul className='admin-menu'>
        <Link href='/admin/training'>
          <a>
            <li className='admin-item'>Trainings</li>
          </a>
        </Link>
        <Link href='/admin/block'>
          <a>
            <li className='admin-item'>Blocks</li>
          </a>
        </Link>
        <Link href='/admin/exercise'>
          <a>
            <li className='admin-item'>Exercises</li>
          </a>
        </Link>
        <Link href='/admin/file'>
          <a>
            <li className='admin-item'>Files</li>
          </a>
        </Link>
        <Link href='/admin/user'>
          <a>
            <li className='admin-item'>Users</li>
          </a>
        </Link>
      </ul>

      <style jsx>{`
        nav {
          margin: 0;
          padding: 0;
          color: ${theme.colors.presentation};
          background-color: ${theme.colors.presentationBackground};
          min-height: 100%;
        }
        nav h1,
        nav h2,
        nav h3,
        nav h4 {
          color: ${theme.colors.mobileNav};
          padding: 0.9em;
        }
        nav ul {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        nav li {
          display: block;
          padding: 0.9em;
          border-top: 1px solid ${theme.colors.mobileNav}33;
        }
        nav a:last-child li {
          border-bottom: 1px solid ${theme.colors.mobileNav}33;
        }
        nav li:hover {
          box-shadow: ${theme.bsSmall};
        }
        nav a {
          color: ${theme.colors.mobileNav};
          text-decoration: none;
        }
        nav a:hover {
          color: ${theme.colors.mobileNav};
        }
      `}</style>
    </nav>
  )
}

export default AdminSideBar