import { createPortal } from 'react-dom';

import classes from './SideDrawer.module.css';

function SideDrawer({ onClose }) {
  return createPortal(
    <>
      <div className={classes.backdrop} onClick={onClose} />
      <aside className={classes.drawer}>
        <nav>
          <ul>
            <li>
              <a href="/">Panel administracyjny</a>
            </li>
            <li>
              <a href="/products">Wszystkie produkty</a>
            </li>
            <li>
              <a href="/profile">Profil użytkownika</a>
            </li>
          </ul>
        </nav>
      </aside>
    </>,
    document.getElementById('drawer')
  );
}

export default SideDrawer;
