{"size": 1683, "ext": "js", "max_stars_repo_path": "src/components/Sidebar/index.js", "max_stars_repo_name": "MonarchGitHub/tomper-wear-ecommerce", "max_stars_repo_stars_event_min_datetime": "2022-02-17T05:29:34.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-16T13:09:24.000Z", "max_issues_repo_path": "src/components/Sidebar/index.js", "max_issues_repo_name": "MonarchGitHub/tomper-wear-ecommerce", "max_issues_repo_issues_event_min_datetime": "2022-02-28T11:53:07.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-30T17:17:35.000Z", "max_forks_repo_path": "src/components/Sidebar/index.js", "max_forks_repo_name": "MonarchGitHub/tomper-wear-ecommerce", "max_forks_repo_forks_event_min_datetime": "2022-02-27T16:06:32.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-30T12:21:49.000Z"}
{"max_stars_count": 17, "max_issues_count": 55, "max_forks_count": 32, "avg_line_length": 28.5254237288, "max_line_length": 77, "alphanum_fraction": 0.4979203803}
import React from 'react';
import logo from '../../assets/logo.svg';
import { Link } from 'react-router-dom';
import { useProductsContext } from '../../context/products_context';
import { FaTimes } from 'react-icons/fa';
import { links } from '../../utils/constants';
import SidebarContainer from './styles';
import CartButtons from '../CartButtons/';
import { useUserContext } from '../../context/user_context';

const Sidebar = () => {
  const { currentUser } = useUserContext();
  const { isSidebarOpen, closeSidebar } = useProductsContext();

  return (
    <SidebarContainer>
      <aside
        className={`${isSidebarOpen ? 'sidebar show-sidebar' : 'sidebar'}`}
      >
        <div className='sidebar-header'>
          <img src={logo} alt='Tomper Wear' />
          <button type='button' className='close-btn' onClick={closeSidebar}>
            <FaTimes />
          </button>
        </div>
        <ul className='links'>
          {links.map((link) => {
            const { text, url, id } = link;
            return (
              <li key={id}>
                <Link to={url} onClick={closeSidebar}>
                  {text}
                </Link>
              </li>
            );
          })}
          {currentUser && (
            <li>
              <Link to='/checkout' onClick={closeSidebar}>
                checkout
              </Link>
            </li>
          )}
          {currentUser && (
            <li>
              <Link to='/orders' onClick={closeSidebar}>
                orders
              </Link>
            </li>
          )}
        </ul>
        <CartButtons />
      </aside>
    </SidebarContainer>
  );
};

export default Sidebar;
