|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
import "./Nav.scss"; |
|
|
|
|
import { useState } from "react"; |
|
|
|
|
|
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { loadAnimation } from "lottie-web"; |
|
|
|
|
import { defineLordIconElement } from "lord-icon-element"; |
|
|
|
|
|
|
|
|
|
@ -12,21 +12,107 @@ import { Link } from "react-router-dom"; |
|
|
|
|
|
|
|
|
|
// let oldNavItemId = 1;
|
|
|
|
|
let location = window.location.pathname; |
|
|
|
|
let initai_navId = 1; |
|
|
|
|
// if (location.includes("accounting")) {
|
|
|
|
|
// initai_navId = 2;
|
|
|
|
|
// } else if (location.includes("messages")) {
|
|
|
|
|
// initai_navId = 5;
|
|
|
|
|
// }
|
|
|
|
|
const Nav = ({ logOut }) => { |
|
|
|
|
|
|
|
|
|
const Nav = ({ |
|
|
|
|
logOut, |
|
|
|
|
isMobile, |
|
|
|
|
isLogin, |
|
|
|
|
}) => { |
|
|
|
|
let initai_navId = 1; |
|
|
|
|
if(isMobile){ |
|
|
|
|
if (location.includes("services")) { |
|
|
|
|
initai_navId = 2; |
|
|
|
|
} else if (location.includes("exams")) { |
|
|
|
|
initai_navId = 3; |
|
|
|
|
} |
|
|
|
|
else if(location.includes('dashboard')){ |
|
|
|
|
initai_navId = 4; |
|
|
|
|
} |
|
|
|
|
}else{ |
|
|
|
|
if (location.includes("accounting")) { |
|
|
|
|
initai_navId = 2; |
|
|
|
|
} else if (location.includes("messages")) { |
|
|
|
|
initai_navId = 5; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const mobileOptions = [ |
|
|
|
|
{ |
|
|
|
|
title: 'صفحه اصلی', |
|
|
|
|
icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
<path d="M9.02 2.84004L3.63 7.04004C2.73 7.74004 2 9.23004 2 10.36V17.77C2 20.09 3.89 21.99 6.21 21.99H17.79C20.11 21.99 22 20.09 22 17.78V10.5C22 9.29004 21.19 7.74004 20.2 7.05004L14.02 2.72004C12.62 1.74004 10.37 1.79004 9.02 2.84004Z" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M12 17.99V14.99" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
</svg> |
|
|
|
|
, |
|
|
|
|
link: '/', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: 'فروشگاه', |
|
|
|
|
icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
<path d="M2 2H3.74001C4.82001 2 5.67 2.93 5.58 4L4.75 13.96C4.61 15.59 5.89999 16.99 7.53999 16.99H18.19C19.63 16.99 20.89 15.81 21 14.38L21.54 6.88C21.66 5.22 20.4 3.87 18.73 3.87H5.82001" stroke="" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M16.25 22C16.9404 22 17.5 21.4404 17.5 20.75C17.5 20.0596 16.9404 19.5 16.25 19.5C15.5596 19.5 15 20.0596 15 20.75C15 21.4404 15.5596 22 16.25 22Z" stroke="" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M8.25 22C8.94036 22 9.5 21.4404 9.5 20.75C9.5 20.0596 8.94036 19.5 8.25 19.5C7.55964 19.5 7 20.0596 7 20.75C7 21.4404 7.55964 22 8.25 22Z" stroke="" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M9 8H21" stroke="inherit" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
</svg>, |
|
|
|
|
link: '/services', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: 'آزمون ها', |
|
|
|
|
icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
<path d="M12.37 8.87988H17.62" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M6.38 8.87988L7.13 9.62988L9.38 7.37988" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M12.37 15.8799H17.62" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M6.38 15.8799L7.13 16.6299L9.38 14.3799" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
</svg> |
|
|
|
|
, |
|
|
|
|
link: '/exams', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: 'حساب کاربری', |
|
|
|
|
icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
<path d="M12.1601 10.87C12.0601 10.86 11.9401 10.86 11.8301 10.87C9.45006 10.79 7.56006 8.84 7.56006 6.44C7.56006 3.99 9.54006 2 12.0001 2C14.4501 2 16.4401 3.99 16.4401 6.44C16.4301 8.84 14.5401 10.79 12.1601 10.87Z" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
<path d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> |
|
|
|
|
</svg> |
|
|
|
|
, |
|
|
|
|
link: '/dashboard', |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const [navId, setNavId] = useState(initai_navId); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const chaneNav = (id) => { |
|
|
|
|
setNavId(id); |
|
|
|
|
let top = 100/6 + (id-1) * 100/6 * 3/4; |
|
|
|
|
let top = 100 / 6 + (id - 1) * 100 / 6 * 3 / 4; |
|
|
|
|
console.log(top) |
|
|
|
|
document.querySelector(".back-item-img").style.top = `${top}%`; |
|
|
|
|
}; |
|
|
|
|
if (isMobile) { |
|
|
|
|
return ( |
|
|
|
|
<div className="w-full flex fixed bg-white justify-center py-4 bottom-0"> |
|
|
|
|
<div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl"> |
|
|
|
|
{ |
|
|
|
|
mobileOptions.map( |
|
|
|
|
(item, index) => ( |
|
|
|
|
<Link to={item.link} className={`flex flex-col items-center pt-2 mx-1 w-1/4 pb-0 text-sm ${navId == index + 1 ? 'text-red52' : 'text-gray-500'} font-bold`} onClick={() => setNavId(index + 1)}> |
|
|
|
|
<div className="p-2 z-20" style={{ stroke: navId == index + 1 ? '#df1452' : '#818181' }}> |
|
|
|
|
{item.icon} |
|
|
|
|
</div> |
|
|
|
|
<h2 className="pb-2 z-20">{item.title}</h2> |
|
|
|
|
{ navId == index + 1 && |
|
|
|
|
<div className="h-10 bg-green-200 w-full rounded-t-full -mt-10 z-10" style={{filter: 'blur(12px)', background: 'linear-gradient(0deg, rgba(223,20,82,1) 0%, rgba(253,187,45,0) 100%)'}}> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
} |
|
|
|
|
</Link> |
|
|
|
|
) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} else { |
|
|
|
|
return ( |
|
|
|
|
<div className="nav h-full w-[6.5%] fixed top-0 right-0 z-20 overflow-hidden bg-grayEC border-l border-l-color1"> |
|
|
|
|
<div className="h-1/6 flex items-center"> |
|
|
|
|
@ -363,9 +449,23 @@ const Nav = ({ logOut }) => { |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
|
headerOptions: state.publicApi.headerOptions, |
|
|
|
|
isLogin: state.user.status, |
|
|
|
|
cartProductsLength: state.userProduct.list?.filter( |
|
|
|
|
(product) => product.condition < 2 |
|
|
|
|
)?.length, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default Nav; |
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Nav); |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
/* <lord-icon |
|
|
|
|
|
