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

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);