pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Mobile Nav Done

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 2d7da703e4
commit d51b7e4faf
7 changed files with 434 additions and 310 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/App.css
  2. 4
      src/assets/img/home-2.svg
  3. 4
      src/assets/img/profile.svg
  4. 6
      src/assets/img/shopping-cart.svg
  5. 7
      src/assets/img/task-square.svg
  6. 716
      src/components/nav/Nav.js
  7. 4
      src/view/services/index.js

3
src/App.css
Unescape View File

@ -8,4 +8,7 @@ input::-webkit-inner-spin-button {
}
*{
transition: all 0.3s;
}
.rtl{
direction: rtl;
}

4
src/assets/img/home-2.svg
Unescape View File

@ -0,0 +1,4 @@
<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="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 17.99V14.99" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 538 B

4
src/assets/img/profile.svg
Unescape View File

@ -0,0 +1,4 @@
<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="#292D32" 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="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 673 B

6
src/assets/img/shopping-cart.svg
Unescape View File

@ -0,0 +1,6 @@
<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="#818181" 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="#818181" 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="#818181" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 8H21" stroke="#818181" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
src/assets/img/task-square.svg
Unescape View File

@ -0,0 +1,7 @@
<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="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.38 8.87988L7.13 9.62988L9.38 7.37988" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.37 15.8799H17.62" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.38 15.8799L7.13 16.6299L9.38 14.3799" stroke="#292D32" 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="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 777 B

716
src/components/nav/Nav.js
Unescape View File

@ -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,123 +12,243 @@ 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}%`;
};
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">
<img src={logo} alt="logo" className="logo w-full" />
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>
<div
className="back-item-img w-full h-[12.5%] bg-red52 absolute right-0 z-20 transition-all duration-300"
style={
initai_navId === 2
? { top: `${(3 / 12) * 100}%` }
: initai_navId === 5
? { top: `${(6 / 12) * 100}%` }
:
null
}
></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">
<img src={logo} alt="logo" className="logo w-full" />
{/* ------------ */}
<div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30 right-0">
<Link
to="/dashboard"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(1)}
>
<svg
id="vuesax_bold_element-4"
data-name="vuesax/bold/element-4"
xmlns="http://www.w3.org/2000/svg"
width="46.091"
height="46.091"
viewBox="0 0 46.091 46.091"
className="nav-menu-container-item-img w-2/6"
</div>
<div
className="back-item-img w-full h-[12.5%] bg-red52 absolute right-0 z-20 transition-all duration-300"
style={
initai_navId === 2
? { top: `${(3 / 12) * 100}%` }
: initai_navId === 5
? { top: `${(6 / 12) * 100}%` }
:
null
}
></div>
{/* ------------ */}
<div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30 right-0">
<Link
to="/dashboard"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(1)}
>
<g id="element-4">
<path
id="Vector"
d="M16.324,17.092V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V17.092c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,21.125,16.324,19.973,16.324,17.092Z"
transform="translate(24.966 3.841)"
fill={navId === 1 ? "#fff" : "transparent"}
stroke={navId === 1 ? "none" : "#A5A8AB"}
/>
<path
id="Vector-2"
data-name="Vector"
d="M16.324,4.033V17.092c0,2.881-1.229,4.033-4.283,4.033H4.283C1.229,21.125,0,19.973,0,17.092V4.033C0,1.152,1.229,0,4.283,0h7.759C15.095,0,16.324,1.152,16.324,4.033Z"
transform="translate(4.801 21.125)"
fill={navId === 1 ? "#fff" : "transparent"}
stroke={navId === 1 ? "none" : "#A5A8AB"}
/>
<svg
id="vuesax_bold_element-4"
data-name="vuesax/bold/element-4"
xmlns="http://www.w3.org/2000/svg"
width="46.091"
height="46.091"
viewBox="0 0 46.091 46.091"
className="nav-menu-container-item-img w-2/6"
>
<g id="element-4">
<path
id="Vector"
d="M16.324,17.092V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V17.092c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,21.125,16.324,19.973,16.324,17.092Z"
transform="translate(24.966 3.841)"
fill={navId === 1 ? "#fff" : "transparent"}
stroke={navId === 1 ? "none" : "#A5A8AB"}
/>
<path
id="Vector-2"
data-name="Vector"
d="M16.324,4.033V17.092c0,2.881-1.229,4.033-4.283,4.033H4.283C1.229,21.125,0,19.973,0,17.092V4.033C0,1.152,1.229,0,4.283,0h7.759C15.095,0,16.324,1.152,16.324,4.033Z"
transform="translate(4.801 21.125)"
fill={navId === 1 ? "#fff" : "transparent"}
stroke={navId === 1 ? "none" : "#A5A8AB"}
/>
<path
id="Vector-3"
data-name="Vector"
d="M0,0H46.091V46.091H0Z"
transform="translate(46.091 46.091) rotate(180)"
fill="none"
opacity="0"
/>
<path
id="Vector-4"
data-name="Vector"
d="M16.324,9.41V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V9.41c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,13.443,16.324,12.291,16.324,9.41Z"
transform="translate(24.966 28.807)"
fill={navId === 1 ? "#fff" : "transparent"}
stroke={navId === 1 ? "none" : "#A5A8AB"}
/>
<path
id="Vector-5"
data-name="Vector"
d="M16.324,9.41V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V9.41c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,13.443,16.324,12.291,16.324,9.41Z"
transform="translate(4.801 3.841)"
fill={navId === 1 ? "#fff" : "transparent"}
stroke={navId === 1 ? "none" : "#A5A8AB"}
/>
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={1 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
منوی اصلی
</div>
</Link>
{/* ---------- */}
<Link
to="/services"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(2)}
>
<svg
id="empty-wallet"
xmlns="http://www.w3.org/2000/svg"
width="46.091"
height="46.091"
viewBox="0 0 46.091 46.091"
className="nav-menu-container-item-img w-2/6"
>
<g id="Group" transform="translate(4.801 3.929)">
<path
id="Vector"
d="M29.844,11.139a3.857,3.857,0,0,0-1.152,3.13A4.1,4.1,0,0,0,32.84,17.86h3.649v2.285a7.237,7.237,0,0,1-7.221,7.221H7.221A7.237,7.237,0,0,1,0,20.146V7.221A7.237,7.237,0,0,1,7.221,0H29.268a7.237,7.237,0,0,1,7.221,7.221V9.986H32.61A3.827,3.827,0,0,0,29.844,11.139Z"
transform="translate(0 10.955)"
fill="none"
stroke={navId === 2 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-2"
data-name="Vector"
d="M0,19.9V11.128A5.469,5.469,0,0,1,3.534,6L18.782.239a3.649,3.649,0,0,1,4.936,3.418v7.3"
transform="translate(0 0)"
fill="none"
stroke={navId === 2 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</g>
<path
id="Vector-3"
data-name="Vector"
d="M0,0H46.091V46.091H0Z"
transform="translate(46.091 46.091) rotate(180)"
d="M9.85,1.959V5.915A1.972,1.972,0,0,1,7.93,7.874H4.166A4.1,4.1,0,0,1,.018,4.283,3.857,3.857,0,0,1,1.17,1.152,3.827,3.827,0,0,1,3.935,0H7.93A1.972,1.972,0,0,1,9.85,1.959Z"
transform="translate(33.473 24.87)"
fill="none"
opacity="0"
stroke={navId === 2 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-4"
data-name="Vector"
d="M16.324,9.41V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V9.41c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,13.443,16.324,12.291,16.324,9.41Z"
transform="translate(24.966 28.807)"
fill={navId === 1 ? "#fff" : "transparent"}
stroke={navId === 1 ? "none" : "#A5A8AB"}
/>
<path
id="Vector-5"
data-name="Vector"
d="M16.324,9.41V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V9.41c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,13.443,16.324,12.291,16.324,9.41Z"
transform="translate(4.801 3.841)"
fill={navId === 1 ? "#fff" : "transparent"}
stroke={navId === 1 ? "none" : "#A5A8AB"}
/>
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={1 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
منوی اصلی
</div>
</Link>
{/* ---------- */}
<Link
to="/services"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(2)}
>
<svg
id="empty-wallet"
xmlns="http://www.w3.org/2000/svg"
width="46.091"
height="46.091"
viewBox="0 0 46.091 46.091"
className="nav-menu-container-item-img w-2/6"
>
<g id="Group" transform="translate(4.801 3.929)">
<path
id="Vector"
d="M29.844,11.139a3.857,3.857,0,0,0-1.152,3.13A4.1,4.1,0,0,0,32.84,17.86h3.649v2.285a7.237,7.237,0,0,1-7.221,7.221H7.221A7.237,7.237,0,0,1,0,20.146V7.221A7.237,7.237,0,0,1,7.221,0H29.268a7.237,7.237,0,0,1,7.221,7.221V9.986H32.61A3.827,3.827,0,0,0,29.844,11.139Z"
transform="translate(0 10.955)"
d="M0,0H13.443"
transform="translate(13.443 23.046)"
fill="none"
stroke={navId === 2 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
@ -136,236 +256,216 @@ const Nav = ({ logOut }) => {
strokeWidth="2"
/>
<path
id="Vector-2"
id="Vector-5"
data-name="Vector"
d="M0,19.9V11.128A5.469,5.469,0,0,1,3.534,6L18.782.239a3.649,3.649,0,0,1,4.936,3.418v7.3"
transform="translate(0 0)"
d="M0,0H46.091V46.091H0Z"
fill="none"
stroke={navId === 2 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
opacity="0"
/>
</g>
<path
id="Vector-3"
data-name="Vector"
d="M9.85,1.959V5.915A1.972,1.972,0,0,1,7.93,7.874H4.166A4.1,4.1,0,0,1,.018,4.283,3.857,3.857,0,0,1,1.17,1.152,3.827,3.827,0,0,1,3.935,0H7.93A1.972,1.972,0,0,1,9.85,1.959Z"
transform="translate(33.473 24.87)"
fill="none"
stroke={navId === 2 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-4"
data-name="Vector"
d="M0,0H13.443"
transform="translate(13.443 23.046)"
fill="none"
stroke={navId === 2 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-5"
data-name="Vector"
d="M0,0H46.091V46.091H0Z"
fill="none"
opacity="0"
/>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={2 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
انتخاب خدمات
</div>
</Link>
{/* ---------- */}
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={2 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
انتخاب خدمات
</div>
</Link>
{/* ---------- */}
<Link
to="/settings"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(3)}
>
<svg id="vuesax_linear_setting-2" data-name="vuesax/linear/setting-2" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="setting-2">
<path id="Vector" d="M11.523,5.761A5.761,5.761,0,1,1,5.761,0,5.761,5.761,0,0,1,11.523,5.761Z" transform="translate(17.284 17.284)" fill="none" stroke={navId === 3 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-2" data-name="Vector" d="M0,19.817v-3.38a3.66,3.66,0,0,1,3.649-3.649c3.476,0,4.9-2.458,3.15-5.473A3.647,3.647,0,0,1,8.143,2.341L11.465.44a3.205,3.205,0,0,1,4.379,1.152l.211.365c1.728,3.015,4.571,3.015,6.318,0l.211-.365A3.205,3.205,0,0,1,26.963.44l3.322,1.9A3.647,3.647,0,0,1,31.63,7.315c-1.748,3.015-.326,5.473,3.15,5.473a3.66,3.66,0,0,1,3.649,3.649v3.38a3.66,3.66,0,0,1-3.649,3.649c-3.476,0-4.9,2.458-3.15,5.473a3.643,3.643,0,0,1-1.344,4.974l-3.322,1.9a3.205,3.205,0,0,1-4.379-1.152l-.211-.365c-1.728-3.015-4.571-3.015-6.318,0l-.211.365a3.205,3.205,0,0,1-4.379,1.152l-3.322-1.9A3.647,3.647,0,0,1,6.8,28.939c1.748-3.015.326-5.473-3.15-5.473A3.66,3.66,0,0,1,0,19.817Z" transform="translate(3.841 4.919)" fill="none" stroke={navId === 3 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-3" data-name="Vector" d="M0,0H46.091V46.091H0Z" fill="none" opacity="0" />
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={3 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
<Link
to="/settings"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(3)}
>
خدمات من
</div>
</Link>
<svg id="vuesax_linear_setting-2" data-name="vuesax/linear/setting-2" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="setting-2">
<path id="Vector" d="M11.523,5.761A5.761,5.761,0,1,1,5.761,0,5.761,5.761,0,0,1,11.523,5.761Z" transform="translate(17.284 17.284)" fill="none" stroke={navId === 3 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-2" data-name="Vector" d="M0,19.817v-3.38a3.66,3.66,0,0,1,3.649-3.649c3.476,0,4.9-2.458,3.15-5.473A3.647,3.647,0,0,1,8.143,2.341L11.465.44a3.205,3.205,0,0,1,4.379,1.152l.211.365c1.728,3.015,4.571,3.015,6.318,0l.211-.365A3.205,3.205,0,0,1,26.963.44l3.322,1.9A3.647,3.647,0,0,1,31.63,7.315c-1.748,3.015-.326,5.473,3.15,5.473a3.66,3.66,0,0,1,3.649,3.649v3.38a3.66,3.66,0,0,1-3.649,3.649c-3.476,0-4.9,2.458-3.15,5.473a3.643,3.643,0,0,1-1.344,4.974l-3.322,1.9a3.205,3.205,0,0,1-4.379-1.152l-.211-.365c-1.728-3.015-4.571-3.015-6.318,0l-.211.365a3.205,3.205,0,0,1-4.379,1.152l-3.322-1.9A3.647,3.647,0,0,1,6.8,28.939c1.748-3.015.326-5.473-3.15-5.473A3.66,3.66,0,0,1,0,19.817Z" transform="translate(3.841 4.919)" fill="none" stroke={navId === 3 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-3" data-name="Vector" d="M0,0H46.091V46.091H0Z" fill="none" opacity="0" />
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={3 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
خدمات من
</div>
</Link>
{/* ---------- */}
<Link
to="/messages"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(4)}
>
<svg
id="vuesax_linear_sms"
data-name="vuesax/linear/sms"
xmlns="http://www.w3.org/2000/svg"
width="46.091"
height="46.091"
viewBox="0 0 46.091 46.091"
className="nav-menu-container-item-img w-2/6"
>
<g id="sms">
<path
id="Vector"
d="M28.807,32.648H9.6c-5.761,0-9.6-2.881-9.6-9.6V9.6C0,2.881,3.841,0,9.6,0h19.2c5.761,0,9.6,2.881,9.6,9.6V23.046C38.409,29.767,34.568,32.648,28.807,32.648Z"
transform="translate(3.841 6.722)"
fill="none"
stroke={navId === 4 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-2"
data-name="Vector"
d="M19.2,0,13.194,4.8a6.08,6.08,0,0,1-7.2,0L0,0"
transform="translate(13.443 17.284)"
fill="none"
stroke={navId === 4 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-3"
data-name="Vector"
d="M0,0H46.091V46.091H0Z"
fill="none"
opacity="0"
/>
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={4 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
پشتیبانی
</div>
</Link>
{/* ---------- */}
<Link
to="/contacts"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(5)}
>
<svg id="vuesax_linear_calculator" data-name="vuesax/linear/calculator" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="calculator" transform="translate(0)">
<path id="Vector" d="M13.443,38.409h7.682c9.6,0,13.443-3.841,13.443-13.443V13.443C34.568,3.841,30.727,0,21.125,0H13.443C3.841,0,0,3.841,0,13.443V24.966C0,34.568,3.841,38.409,13.443,38.409Z" transform="translate(5.761 3.841)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-2" data-name="Vector" d="M17.284,2.881V4.8A2.889,2.889,0,0,1,14.4,7.682H2.881A2.889,2.889,0,0,1,0,4.8V2.881A2.889,2.889,0,0,1,2.881,0H14.4A2.877,2.877,0,0,1,17.284,2.881Z" transform="translate(14.403 11.676)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-3" data-name="Vector" d="M.636.5H.658" transform="translate(14.989 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-4" data-name="Vector" d="M.636.5H.658" transform="translate(22.4 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-5" data-name="Vector" d="M.636.5H.658" transform="translate(29.812 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-6" data-name="Vector" d="M.636.5H.658" transform="translate(14.989 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-7" data-name="Vector" d="M.636.5H.658" transform="translate(22.4 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-8" data-name="Vector" d="M.636.5H.658" transform="translate(29.812 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-9" data-name="Vector" d="M0,0H46.091V46.091H0Z" transform="translate(46.091 46.091) rotate(180)" fill="none" opacity="0" />
</g>
</svg>
{/* ---------- */}
<Link
to="/messages"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(4)}
>
<svg
id="vuesax_linear_sms"
data-name="vuesax/linear/sms"
xmlns="http://www.w3.org/2000/svg"
width="46.091"
height="46.091"
viewBox="0 0 46.091 46.091"
className="nav-menu-container-item-img w-2/6"
>
<g id="sms">
<path
id="Vector"
d="M28.807,32.648H9.6c-5.761,0-9.6-2.881-9.6-9.6V9.6C0,2.881,3.841,0,9.6,0h19.2c5.761,0,9.6,2.881,9.6,9.6V23.046C38.409,29.767,34.568,32.648,28.807,32.648Z"
transform="translate(3.841 6.722)"
fill="none"
stroke={navId === 4 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-2"
data-name="Vector"
d="M19.2,0,13.194,4.8a6.08,6.08,0,0,1-7.2,0L0,0"
transform="translate(13.443 17.284)"
fill="none"
stroke={navId === 4 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-3"
data-name="Vector"
d="M0,0H46.091V46.091H0Z"
fill="none"
opacity="0"
/>
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={4 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
پشتیبانی
</div>
</Link>
{/* ---------- */}
<div
className="nav-menu-container-item-title text-sm"
style={5 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
<Link
to="/contacts"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={() => chaneNav(5)}
>
اطلاعات تماس
</div>
</Link>
<svg id="vuesax_linear_calculator" data-name="vuesax/linear/calculator" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
<g id="calculator" transform="translate(0)">
<path id="Vector" d="M13.443,38.409h7.682c9.6,0,13.443-3.841,13.443-13.443V13.443C34.568,3.841,30.727,0,21.125,0H13.443C3.841,0,0,3.841,0,13.443V24.966C0,34.568,3.841,38.409,13.443,38.409Z" transform="translate(5.761 3.841)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-2" data-name="Vector" d="M17.284,2.881V4.8A2.889,2.889,0,0,1,14.4,7.682H2.881A2.889,2.889,0,0,1,0,4.8V2.881A2.889,2.889,0,0,1,2.881,0H14.4A2.877,2.877,0,0,1,17.284,2.881Z" transform="translate(14.403 11.676)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-3" data-name="Vector" d="M.636.5H.658" transform="translate(14.989 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-4" data-name="Vector" d="M.636.5H.658" transform="translate(22.4 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-5" data-name="Vector" d="M.636.5H.658" transform="translate(29.812 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-6" data-name="Vector" d="M.636.5H.658" transform="translate(14.989 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-7" data-name="Vector" d="M.636.5H.658" transform="translate(22.4 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-8" data-name="Vector" d="M.636.5H.658" transform="translate(29.812 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Vector-9" data-name="Vector" d="M0,0H46.091V46.091H0Z" transform="translate(46.091 46.091) rotate(180)" fill="none" opacity="0" />
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm"
style={5 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
اطلاعات تماس
</div>
</Link>
<Link
to="/"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={logOut}
>
<svg
id="vuesax_linear_logout"
data-name="vuesax/linear/logout"
xmlns="http://www.w3.org/2000/svg"
width="46.091"
height="46.091"
viewBox="0 0 46.091 46.091"
className="nav-menu-container-item-img w-2/6 translate-y-[-10%]"
>
<g id="logout">
<path
id="Vector"
d="M0,9.737C.6,2.823,4.148,0,11.926,0h.25C20.76,0,24.2,3.438,24.2,12.022V24.544c0,8.585-3.438,12.022-12.022,12.022h-.25c-7.72,0-11.273-2.785-11.907-9.583"
transform="translate(17.092 4.782)"
fill="none"
stroke={navId === 6 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-2"
data-name="Vector"
d="M21.855,0H0"
transform="translate(6.952 23.046)"
fill="none"
stroke={navId === 6 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-3"
data-name="Vector"
d="M6.434,0,0,6.434l6.434,6.434"
transform="translate(4.801 16.612)"
fill="none"
stroke={navId === 6 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-4"
data-name="Vector"
d="M0,0H46.091V46.091H0Z"
transform="translate(46.091 46.091) rotate(180)"
fill="none"
opacity="0"
/>
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm translate-y-[-10%]"
style={6 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
<Link
to="/"
className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
onClick={logOut}
>
خروج
</div>
</Link>
<svg
id="vuesax_linear_logout"
data-name="vuesax/linear/logout"
xmlns="http://www.w3.org/2000/svg"
width="46.091"
height="46.091"
viewBox="0 0 46.091 46.091"
className="nav-menu-container-item-img w-2/6 translate-y-[-10%]"
>
<g id="logout">
<path
id="Vector"
d="M0,9.737C.6,2.823,4.148,0,11.926,0h.25C20.76,0,24.2,3.438,24.2,12.022V24.544c0,8.585-3.438,12.022-12.022,12.022h-.25c-7.72,0-11.273-2.785-11.907-9.583"
transform="translate(17.092 4.782)"
fill="none"
stroke={navId === 6 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-2"
data-name="Vector"
d="M21.855,0H0"
transform="translate(6.952 23.046)"
fill="none"
stroke={navId === 6 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-3"
data-name="Vector"
d="M6.434,0,0,6.434l6.434,6.434"
transform="translate(4.801 16.612)"
fill="none"
stroke={navId === 6 ? "#fff" : "#a5a8ab"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
id="Vector-4"
data-name="Vector"
d="M0,0H46.091V46.091H0Z"
transform="translate(46.091 46.091) rotate(180)"
fill="none"
opacity="0"
/>
</g>
</svg>
<div
className="nav-menu-container-item-title text-sm translate-y-[-10%]"
style={6 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
>
خروج
</div>
</Link>
</div>
</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

4
src/view/services/index.js
Unescape View File

@ -415,9 +415,9 @@ const Services = ({
}
</div>
</div>
<div className="w-1/4 fixed left-0" style={{ height: "100vh" }}>
{!isMobile && <div className="w-1/4 fixed left-0" style={{ height: "100vh" }}>
<ShoppingCart />
</div>
</div> }
</div>
);
};

Write Preview
Loading…
Cancel
Save