text: import logo200Image from 'assets/img/logo/CompanyLogo.png';
  import sidebarBgImage from 'assets/img/sidebar/sidebar-4.jpg';
  import SourceLink from 'components/SourceLink';
  import React from 'react';
  import { FaGithub } from 'react-icons/fa';
  import {
    MdAccountCircle,
    MdArrowDropDownCircle,
    MdBorderAll,
    MdBrush,
    MdChromeReaderMode,
    MdDashboard,
    MdExtension,
    MdGroupWork,
    MdInsertChart,
    MdKeyboardArrowDown,
    MdNotificationsActive,
    MdPages,
    MdRadioButtonChecked,
    MdSend,
    MdStar,
    MdTextFields,
    MdViewCarousel,
    MdViewDay,
    MdViewList,
    MdWeb,
    MdWidgets,
  } from 'react-icons/md';
  import { NavLink } from 'react-router-dom';
  import {
    // UncontrolledTooltip,
    Collapse,
    Nav,
    Navbar,
    NavItem,
    NavLink as BSNavLink,
  } from 'reactstrap';
  import bn from 'utils/bemnames';
  
  const sidebarBackground = {
    backgroundImage: `url("${sidebarBgImage}")`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
  };
  
  const navComponents = [
    { to: '/buttons', name: 'buttons', exact: false, Icon: MdRadioButtonChecked },
    {
      to: '/button-groups',
      name: 'button groups',
      exact: false,
      Icon: MdGroupWork,
    },
    { to: '/forms', name: 'forms', exact: false, Icon: MdChromeReaderMode },
    { to: '/input-groups', name: 'input groups', exact: false, Icon: MdViewList },
    {
      to: '/dropdowns',
      name: 'dropdowns',
      exact: false,
      Icon: MdArrowDropDownCircle,
    },
    { to: '/badges', name: 'badges', exact: false, Icon: MdStar },
    { to: '/alerts', name: 'alerts', exact: false, Icon: MdNotificationsActive },
    { to: '/progress', name: 'progress', exact: false, Icon: MdBrush },
    { to: '/modals', name: 'modals', exact: false, Icon: MdViewDay },
  ];
  
  const navContents = [
    { to: '/typography', name: 'typography', exact: false, Icon: MdTextFields },
    { to: '/tables', name: 'tables', exact: false, Icon: MdBorderAll },
  ];
  
  const pageContents = [
    { to: '/login', name: 'login / signup', exact: false, Icon: MdAccountCircle },
    {
      to: '/login-modal',
      name: 'login modal',
      exact: false,
      Icon: MdViewCarousel,
    },
  ];
  
  const navItems = [
    { to: '/', name: 'Manage orders', exact: true, Icon: MdWeb },
    { to: '/charts', name: 'Team Operations', exact: false, Icon: MdInsertChart },
    { to: '/CampaignLocation', name: 'Campaign Location Map', exact: false, Icon: MdDashboard },
    { to: '/Optimization', name: 'Optimization', exact: false, Icon: MdWidgets },
    { to: '/widgets', name: 'Delivered orders', exact: false, Icon: MdWidgets },
  ];
  
  const bem = bn.create('sidebar');
  
  class Sidebar extends React.Component {
    state = {
      isOpenComponents: true,
      isOpenContents: true,
      isOpenPages: true,
    };
  
    handleClick = name => () => {
      this.setState(prevState => {
        const isOpen = prevState[`isOpen${name}`];
  
        return {
          [`isOpen${name}`]: !isOpen,
        };
      });
    };
  
    render() {
      return (
        <aside className={bem.b()} data-image={sidebarBgImage}>
          <div className={bem.e('background')} style={sidebarBackground} />
          <div className={bem.e('content')}>
            <Navbar>
              <SourceLink className="navbar-brand d-flex">
                <img
                  src={logo200Image}
                  width="40"
                  height="30"
                  className="pr-2"
                  alt=""
                />
                <span className="text-white2">
                  Tasweiq 
                </span>
              </SourceLink>
            </Navbar>
            <Nav vertical>
              {navItems.map(({ to, name, exact, Icon }, index) => (
                <NavItem key={index} className={bem.e('nav-item')}>
                  <BSNavLink
                    id={`navItem-${name}-${index}`}
                    className="text-uppercase"
                    tag={NavLink}
                    to={to}
                    activeClassName="active"
                    exact={exact}
                  >
                    <Icon className={bem.e('nav-item-icon')} />
                    <span className="">{name}</span>
                  </BSNavLink>
                </NavItem>
              ))}
  
             
              
  
             
            </Nav>
          </div>
        </aside>
      );
    }
  }
  
  export default Sidebar;
  