import Link from "next/link";

import styles from '../styles/Sidebar.module.css';

const Sidebar = () => {
  return (
    <aside className={styles.sidebar}>
      <h1 className={styles.title}>Hex: Unlocked</h1>

      <nav>
        <Link href="/characters" className={styles.navLink}>Characters</Link>
        <Link href="/customizations" className={styles.navLink}>Customizations</Link>
        <Link href="/items" className={styles.navLink}>Items</Link>
        <Link href="/dlcs" className={styles.navLink}>DLCs</Link>
      </nav>

      <button className={styles.syncButton}>
        Synchronize
      </button>
    </aside>
  );
};

export default Sidebar;