text: import React,{useState} from 'react'
  import './styles.css'
  import logo from '../../assets/images/logo.png'
  import {Link} from 'react-router-dom';
  const Sidebar = ({setAll}) => {
      const handleActive = (e) => {
          e.preventDefault();
          // e.target.classList.add('active');
      }
      const [current, setCurrent] = useState(true);
      const handleAll = (e) => {
          setCurrent(true);
          setAll(true);
      };
    const  handleCreate = (e) => {
          setCurrent(false);
          setAll(false);
      }
  
      return (
          <>
              <div className="md:flex md:flex-col md:h-full h-screen md:p-0 ">
                              <div className="bg-logo p-4">
                                  <img src={logo} alt="logo" className="logo-img" />
                              </div>
                      <div className="sidebar-menu flex-col justify-center ">
                           <ul className="list-none flex-col list-container">
                              <li className="sidebar-menu-item" onClick={handleActive}>
                                  <Link to="/dashboard" className="sidebar-menu-item-link">
                                      <i className="fas fa-home mr-2"></i>
                                      <span className="sidebar-menu-item-text">Dashboard</span>
                                  </Link>
                                  </li>
                              <li className="sidebar-menu-item" onClick={handleActive}>
                                  <Link to="/dashboard" className="sidebar-menu-item-link">
                                      
                                      <i className="fas fa-file-alt mr-2"></i>
                                      <span className="sidebar-menu-item-text">Pages</span>
                                  </Link>
                                  </li>
                              <li className="sidebar-menu-item" onClick={handleActive}>
                                  <Link to="/dashboard" className="sidebar-menu-item-link">
                                  <i className="fas fa-book-reader mr-2"></i>
                                      <span className="sidebar-menu-item-text">Post</span>
                                  </Link>
                                  </li>
                              <li className="sidebar-menu-item" onClick={handleActive}>
                                  <Link to="/dashboard" className="sidebar-menu-item-link">
                                  <i className="fas fa-gem mr-2"></i>
                                      <span className="sidebar-menu-item-text">Commerce</span>
                                  </Link>
                                  </li>
                              <li className="sidebar-menu-item active" onClick={handleActive}>
                                  <Link to="/dashboard" className="sidebar-menu-item-link">
                                  <i className="fas fa-user mr-2"></i>
                                      <span className="sidebar-menu-item-text">Publisher</span>
                                  </Link>
                                  </li>
                                  <li className="sidebar-menu-item sublink" onClick={handleActive}>
                                      <button className={current?'sublink-item-active': 'sublink-item'} onClick={handleAll}>
                                      All Publishers
                                      </button>
                                      <button className={current? 'sublink-item' :'sublink-item-active'} onClick={handleCreate}>
                                          Create Publisher
                                      </button>
                                  </li>
  
                              <li className="sidebar-menu-item" onClick={handleActive}>
                                  <Link to="/dashboard" className="sidebar-menu-item-link">
                                  <i className="far fa-newspaper mr-2"></i>
                                      <span className="sidebar-menu-item-text">Newsletter</span>
                                  </Link>
                                  </li>
                              <li className="sidebar-menu-item" onClick={handleActive}>
                                  <Link to="/dashboard" className="sidebar-menu-item-link">
                                      <i className="fas fa-cog mr-2"></i>
                                      <span className="sidebar-menu-item-text">Settings</span>
                                  </Link>
                                  </li>
                              <li className="sidebar-menu-item"  onClick={handleActive}>
                                  <Link to="/dashboard" className="sidebar-menu-item-link">
                                      <i className="fas fa-power-off mr-2"></i>
                                      <span className="sidebar-menu-item-text">Logout</span>
                                  </Link>
                                  </li>
                                  </ul>
                                  </div>
                              </div>  
          </>
      )
  }
  
  export default Sidebar
  