Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { Avatar } from '@mui/material'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
import StatItem from './StatItem'
import './Sidebar.css'
import RecentItem from './RecentItem'

const Sidebar = () => {
  const [display, setDisplay] = useState(false)

  return (
    <div className='sidebar'>

      <div className='sidebar__top'>
        <img src='./static/profile_2.jpg' alt='Profile cover' />
        <Avatar />
        <h2>Stivens Carrasquel</h2>
        <h4>loremipsun@gmail.com</h4>
      </div>

      <div className={`sidebar__options ${display && 'show'}`}>
        <div className='sidebar__stats'>
          <StatItem title='Who viewed you' number={20} />
          <StatItem title='Who viewed you' number={20} />
        </div>

        <RecentItem />
      </div>

      <footer className='sideabar__footer'>
        <button
          onClick={() => setDisplay(!display)}
          type='button'
        >
          <span>
            {display ? 'Show less' : 'Show more'}
          </span>
          {display ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </button>
      </footer>

    </div>
  )
}

export default Sidebar