import React, {useState} from "react"; import arrowIcon from './arrow-down.svg'; import { Link } from "react-router-dom"; import { useLocation } from "react-router-dom"; //assets import profileIcon from './profile.svg' import elementIcon from './element-equal.svg'; import taskIcon from './task-square.svg'; import bookIcon from './book-1.svg'; import smsIcon from './sms.svg'; import mapIcon from './map.svg'; import radarIcon from './radar-1.svg'; import exitIcon from './logout.svg'; //active Icons import profileIconActive from './profile-active.svg' import elementIconActive from './element-equal-active.svg'; import taskIconActive from './task-square-active.svg'; import bookIconActive from './book-1-active.svg'; import smsIconActive from './sms-active.svg'; import mapIconActive from './map-active.svg'; import radarIconActive from './radar-1-active.svg'; import { connect } from "react-redux"; import { user } from "../../../redux/actions"; const MobileSideMenu = ({ profilePic, users, close, logOut }) => { const location = useLocation(); const [showUsers, setShowUsers] = useState(false); const options = [ { icon: profileIcon, activeIcon: profileIconActive, title: 'مشخصات', link: '/' }, { icon: elementIcon, activeIcon: elementIconActive, title: 'انتخاب خدمات', link: '/services' }, { icon: taskIcon, activeIcon: taskIconActive, title: 'آزمون های من', link: '' }, { icon: bookIcon, activeIcon: bookIconActive, title: 'وبلاگ', link: '' }, { icon: elementIcon, activeIcon: elementIconActive, title: 'خدمات من', link: '' }, { icon: smsIcon, activeIcon: smsIconActive, title: 'پشتیبانی', link: '/messages' }, { icon: mapIcon, activeIcon: mapIconActive, title: 'اطلاعات تماس', link: '/contacts' }, { icon: radarIcon, activeIcon: radarIconActive, title: 'گزارش ایراد یا نقص فنی', link: '' }, { icon: exitIcon, activeIcon: exitIcon, title: 'خروج', link: '', onClick: () => logOut() }, ] return (

{users[0].name}

{users[0].title}

setShowUsers(!showUsers)}/>
{ showUsers && users.slice(1, 100).map((user) => (

{user.name}

{user.title}

)) }
{ options.map((item) => ( {close(); item?.onClick()}} className={`w-full py-1 flex items-center ${location.pathname == item.link ? 'border-r-4 border-red52 text-red52 font-bold' : 'text-grayAB '}`} style={{background: location.pathname == item.link && 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(223,20,82,0.2) 100%)', borderRight: location.pathname == item.link && '8px solid #df1452'}} >

{item.title}

)) }
) } const mapStateToProps = (state) => ({ }); const mapDispatchToProps = { logOut: user.logout, }; export default connect(mapStateToProps, mapDispatchToProps)(MobileSideMenu);