parent
bed10f4245
commit
578a025af5
12 changed files with 451 additions and 253 deletions
@ -1,155 +1,140 @@ |
|||||||
import React, {useState} from "react"; |
import React, { useState } from "react"; |
||||||
import { Link } from "react-router-dom"; |
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
// assets
|
// assets
|
||||||
|
|
||||||
import avatar from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg"; |
import avatar from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg"; |
||||||
import dropDownIcon from '../../assets/img/arrow-down.svg' |
import dropDownIcon from "../../assets/img/arrow-down.svg"; |
||||||
import homeIcon from './home-2.svg' |
import homeIcon from "./home-2.svg"; |
||||||
import optionsIcon from './element-3.svg' |
import optionsIcon from "./element-3.svg"; |
||||||
import notificationIcon from './notification.svg'; |
import notificationIcon from "./notification.svg"; |
||||||
import walleteIcon from './empty-wallet.svg'; |
import walleteIcon from "./empty-wallet.svg"; |
||||||
import discountIcon from './discount-shape.svg'; |
import discountIcon from "./discount-shape.svg"; |
||||||
import userIcon from './profile.svg'; |
import userIcon from "./profile.svg"; |
||||||
import receiptIcon from './receipt-text.svg'; |
import receiptIcon from "./receipt-text.svg"; |
||||||
import settingIcon from './setting-2.svg'; |
import settingIcon from "./setting-2.svg"; |
||||||
import exitIcon from './vuesax-linear-logout.svg' |
import exitIcon from "./vuesax-linear-logout.svg"; |
||||||
|
|
||||||
|
const MinimalNav = ({ logOut }) => { |
||||||
const MinimalNav = ({logOut}) => { |
let initai_navId = 1; |
||||||
let initai_navId = 1; |
|
||||||
const [navId, setNavId] = useState(initai_navId); |
const [navId, setNavId] = useState(initai_navId); |
||||||
|
|
||||||
|
|
||||||
const chaneNav = (id) => { |
const chaneNav = (id) => { |
||||||
setNavId(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) |
console.log(top); |
||||||
document.querySelector(".back-item-img").style.top = `${top}%`; |
document.querySelector(".back-item-img").style.top = `${top}%`; |
||||||
}; |
}; |
||||||
|
|
||||||
|
|
||||||
const menuOptions = [ |
const menuOptions = [ |
||||||
{ |
{ |
||||||
icon: homeIcon, |
icon: homeIcon, |
||||||
link: '/adminpanel', |
link: "/adminpanel", |
||||||
id : 1 |
id: 1, |
||||||
}, |
|
||||||
{ |
|
||||||
icon: optionsIcon, |
|
||||||
link: '/adminpanel', |
|
||||||
id : 2 |
|
||||||
}, |
}, |
||||||
{ |
{ |
||||||
icon: notificationIcon, |
icon: optionsIcon, |
||||||
link: '/adminpanel', |
link: "/adminpanel", |
||||||
id : 3 |
id: 2, |
||||||
|
|
||||||
}, |
}, |
||||||
{ |
{ |
||||||
icon: walleteIcon, |
icon: notificationIcon, |
||||||
link: '/adminpanel', |
link: "/adminpanel", |
||||||
id : 4 |
id: 3, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
icon: discountIcon, |
icon: walleteIcon, |
||||||
link: '/adminpanel', |
link: "/adminpanel", |
||||||
id : 5 |
id: 4, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
icon: receiptIcon, |
icon: discountIcon, |
||||||
link: '/adminpanel', |
link: "/adminpanel", |
||||||
id : 6 |
id: 5, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
icon: walleteIcon, |
icon: receiptIcon, |
||||||
link: '/adminpanel', |
link: "/adminpanel", |
||||||
id : 7 |
id: 6, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
icon: userIcon, |
icon: walleteIcon, |
||||||
link: '/adminpanel', |
link: "/adminpanel", |
||||||
id : 8 |
id: 7, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
icon: settingIcon, |
icon: userIcon, |
||||||
link: '/adminpanel', |
link: "/adminpanel", |
||||||
id : 9 |
id: 8, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
icon: exitIcon, |
icon: settingIcon, |
||||||
link: '/', |
link: "/adminpanel", |
||||||
id: 10 |
id: 9, |
||||||
}, |
}, |
||||||
] |
{ |
||||||
|
icon: exitIcon, |
||||||
|
link: "/", |
||||||
|
id: 10, |
||||||
return( |
}, |
||||||
<div className="nav h-full w-[4.5%] fixed top-0 right-0 z-20 overflow-hidden bg-white border-l border-l-color1"> |
]; |
||||||
<div className="h-[10%] mb-6 mt-4 flex flex-col justify-center items-center"> |
|
||||||
<img src={avatar} alt="user" className="logo w-12 h-12 rounded-full" /> |
return ( |
||||||
<img src={dropDownIcon} alt="choose User Icon" className="w-6" /> |
<div className="nav h-full w-[4.5%] fixed top-0 right-0 z-20 overflow-hidden bg-white border-l border-l-color1"> |
||||||
|
<div className="h-[10%] mb-6 mt-4 flex flex-col justify-center items-center"> |
||||||
</div> |
<img src={avatar} alt="user" className="logo w-12 h-12 rounded-full" /> |
||||||
|
<img src={dropDownIcon} alt="choose User Icon" className="w-6" /> |
||||||
|
</div> |
||||||
{/* ------------ */} |
|
||||||
<div className="flex flex-col items-center w-full h-full"> |
{/* ------------ */} |
||||||
|
<div className="flex flex-col items-center w-full h-full"> |
||||||
|
{menuOptions.slice(0, 3).map((item, index) => ( |
||||||
{ |
<Link |
||||||
menuOptions.slice(0,3).map( |
key={index} |
||||||
(item, index) => ( |
to={item.link} |
||||||
<Link to={item.link} className="w-full flex justify-center items-center h-[7%]" onClick={() => setNavId(item.id)}> |
className="w-full flex justify-center items-center h-[7%]" |
||||||
<img src={item.icon} className="w-2/5"/> |
onClick={() => setNavId(item.id)} |
||||||
<div |
> |
||||||
className="back-item-img w-1 rounded-xl h-12 bg-red52 absolute right-0 z-20 transition-all duration-300" |
<img src={item.icon} className="w-2/5" /> |
||||||
style={ |
<div |
||||||
navId != item.id ? {display: 'none'} : null |
className="back-item-img w-1 rounded-xl h-12 bg-red52 absolute right-0 z-20 transition-all duration-300" |
||||||
} |
style={navId != item.id ? { display: "none" } : null} |
||||||
></div> |
></div> |
||||||
</Link> |
</Link> |
||||||
) |
))} |
||||||
) |
<div className="h-1 w-4/5 rounded-xl bg-red82OP my-4"></div> |
||||||
} |
{menuOptions.slice(3, 7).map((item, index) => ( |
||||||
<div className="h-1 w-4/5 rounded-xl bg-red82OP my-4"></div> |
<Link |
||||||
{ |
key={index} |
||||||
menuOptions.slice(3,7).map( |
to={item.link} |
||||||
(item, index) => ( |
className="w-full flex justify-center items-center h-[7%]" |
||||||
<Link to={item.link} className="w-full flex justify-center items-center h-[7%]" onClick={() => setNavId(item.id)}> |
onClick={() => setNavId(item.id)} |
||||||
<img src={item.icon} className="w-2/5"/> |
> |
||||||
<div |
<img src={item.icon} className="w-2/5" /> |
||||||
className="back-item-img w-1 rounded-xl h-12 bg-red52 absolute right-0 z-20 transition-all duration-300" |
<div |
||||||
style={ |
className="back-item-img w-1 rounded-xl h-12 bg-red52 absolute right-0 z-20 transition-all duration-300" |
||||||
navId != item.id ? {display: 'none'} : null |
style={navId != item.id ? { display: "none" } : null} |
||||||
} |
></div> |
||||||
></div> |
</Link> |
||||||
</Link> |
))} |
||||||
) |
<div className="h-1 w-4/5 rounded-xl bg-red82OP my-4"></div> |
||||||
) |
{menuOptions.slice(7, 12).map((item, index) => ( |
||||||
} |
<Link |
||||||
<div className="h-1 w-4/5 rounded-xl bg-red82OP my-4"></div> |
key={index} |
||||||
{ |
to={item.link} |
||||||
menuOptions.slice(7,12).map( |
className="w-full flex justify-center items-center h-[7%]" |
||||||
(item, index) => ( |
onClick={() => setNavId(item.id)} |
||||||
<Link to={item.link} className="w-full flex justify-center items-center h-[7%]" onClick={() => setNavId(item.id)}> |
> |
||||||
<img src={item.icon} className="w-2/5"/> |
<img src={item.icon} className="w-2/5" /> |
||||||
<div |
<div |
||||||
className="back-item-img w-1 rounded-xl h-12 bg-red52 absolute right-0 z-20 transition-all duration-300" |
className="back-item-img w-1 rounded-xl h-12 bg-red52 absolute right-0 z-20 transition-all duration-300" |
||||||
style={ |
style={navId != item.id ? { display: "none" } : null} |
||||||
navId != item.id ? {display: 'none'} : null |
></div> |
||||||
} |
</Link> |
||||||
></div> |
))} |
||||||
</Link> |
</div> |
||||||
) |
</div> |
||||||
) |
); |
||||||
} |
}; |
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default MinimalNav; |
export default MinimalNav; |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import proxy from "../proxy"; |
||||||
|
const question = { |
||||||
|
info: |
||||||
|
(data = {}) => |
||||||
|
async (dispatch) => |
||||||
|
await proxy.get("question/info", data, { dispatch }), |
||||||
|
list: |
||||||
|
(data = {}) => |
||||||
|
async (dispatch) => |
||||||
|
await proxy.get("question/list", data, { dispatch }), |
||||||
|
add: |
||||||
|
(data = {}) => |
||||||
|
async (dispatch) => |
||||||
|
await proxy.post("question/add", data, { dispatch }), |
||||||
|
delete: |
||||||
|
(data = {}) => |
||||||
|
async (dispatch) => |
||||||
|
await proxy.delete("question/delete", data, { dispatch }), |
||||||
|
}; |
||||||
|
|
||||||
|
export default question; |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import { toast } from "react-toastify"; |
||||||
|
|
||||||
|
const initialState = { |
||||||
|
loading: false, |
||||||
|
error: null, |
||||||
|
info: null, |
||||||
|
list: null, |
||||||
|
lastAdd: null, |
||||||
|
}; |
||||||
|
export default function question(state = initialState, action) { |
||||||
|
let { type, data } = action; |
||||||
|
switch (type) { |
||||||
|
case "question/info": |
||||||
|
return { ...state, loading: false, info: data, error: null }; |
||||||
|
case "question/add": |
||||||
|
toast.success("درخواست با موفقیت انجام شد"); |
||||||
|
return { ...state, loading: false, error: null, lastAdd: data.id }; |
||||||
|
case "question/list": |
||||||
|
return { ...state, loading: false, error: null, list: data }; |
||||||
|
case "question/loading": |
||||||
|
return { ...state, loading: true }; |
||||||
|
case "question/error": |
||||||
|
toast.error(data.message); |
||||||
|
return { ...state, loading: false, error: data.message }; |
||||||
|
default: |
||||||
|
return state; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue