You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
5.0 KiB
143 lines
5.0 KiB
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 ( |
|
<div className="flex flex-col w-4/5 h-screen top-0 rtl right-0 fixed bg-white z-50"> |
|
<div className="w-full mt-6 px-2 h-2/12 flex items-start justify-between"> |
|
<img src={profilePic} className="rounded-full border border-green-600 w-1/5" /> |
|
<div className="w-full flex flex-col pb-3 text-right mx-3"> |
|
<div className="w-full flex justify-between border-b border-gray-300 pb-3"> |
|
<div className="w-full"> |
|
<h1 className="text-red52 text-xl">{users[0].name}</h1> |
|
<h3 className="text-gray-400">{users[0].title}</h3> |
|
</div> |
|
<img src={arrowIcon} className={`w-8 ${showUsers && 'transform rotate-180 duration-900 transition'}`} onClick={() => setShowUsers(!showUsers)}/> |
|
</div> |
|
{ |
|
showUsers && users.slice(1, 100).map((user) => ( |
|
<div className="w-full flex justify-between border-b border-gray-300 py-2"> |
|
<div className="w-full"> |
|
<h1 className="text-blue3A text-md">{user.name}</h1> |
|
<h3 className="text-gray-400 text-xs">{user.title}</h3> |
|
</div> |
|
|
|
</div> |
|
)) |
|
} |
|
</div> |
|
</div> |
|
{ |
|
options.map((item) => ( |
|
<Link to={item.link} |
|
|
|
onClick={() => {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'}} |
|
> |
|
<img src={location.pathname == item.link ? item.activeIcon : item.icon} className="w-1/6 p-2"/> |
|
<p className="mr-3">{item.title}</p> |
|
</Link> |
|
)) |
|
} |
|
</div> |
|
) |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
}); |
|
|
|
const mapDispatchToProps = { |
|
logOut: user.logout, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(MobileSideMenu); |