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"; |
||||
|
||||
// assets
|
||||
|
||||
import avatar from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg"; |
||||
import dropDownIcon from '../../assets/img/arrow-down.svg' |
||||
import homeIcon from './home-2.svg' |
||||
import optionsIcon from './element-3.svg' |
||||
import notificationIcon from './notification.svg'; |
||||
import walleteIcon from './empty-wallet.svg'; |
||||
import discountIcon from './discount-shape.svg'; |
||||
import userIcon from './profile.svg'; |
||||
import receiptIcon from './receipt-text.svg'; |
||||
import settingIcon from './setting-2.svg'; |
||||
import exitIcon from './vuesax-linear-logout.svg' |
||||
|
||||
|
||||
const MinimalNav = ({logOut}) => { |
||||
let initai_navId = 1; |
||||
import dropDownIcon from "../../assets/img/arrow-down.svg"; |
||||
import homeIcon from "./home-2.svg"; |
||||
import optionsIcon from "./element-3.svg"; |
||||
import notificationIcon from "./notification.svg"; |
||||
import walleteIcon from "./empty-wallet.svg"; |
||||
import discountIcon from "./discount-shape.svg"; |
||||
import userIcon from "./profile.svg"; |
||||
import receiptIcon from "./receipt-text.svg"; |
||||
import settingIcon from "./setting-2.svg"; |
||||
import exitIcon from "./vuesax-linear-logout.svg"; |
||||
|
||||
const MinimalNav = ({ logOut }) => { |
||||
let initai_navId = 1; |
||||
const [navId, setNavId] = useState(initai_navId); |
||||
|
||||
|
||||
const chaneNav = (id) => { |
||||
setNavId(id); |
||||
let top = 100 / 6 + (id - 1) * 100 / 6 * 3 / 4; |
||||
console.log(top) |
||||
let top = 100 / 6 + ((((id - 1) * 100) / 6) * 3) / 4; |
||||
console.log(top); |
||||
document.querySelector(".back-item-img").style.top = `${top}%`; |
||||
}; |
||||
|
||||
|
||||
const menuOptions = [ |
||||
{ |
||||
icon: homeIcon, |
||||
link: '/adminpanel', |
||||
id : 1 |
||||
}, |
||||
{ |
||||
icon: optionsIcon, |
||||
link: '/adminpanel', |
||||
id : 2 |
||||
{ |
||||
icon: homeIcon, |
||||
link: "/adminpanel", |
||||
id: 1, |
||||
}, |
||||
{ |
||||
icon: notificationIcon, |
||||
link: '/adminpanel', |
||||
id : 3 |
||||
|
||||
icon: optionsIcon, |
||||
link: "/adminpanel", |
||||
id: 2, |
||||
}, |
||||
{ |
||||
icon: walleteIcon, |
||||
link: '/adminpanel', |
||||
id : 4 |
||||
icon: notificationIcon, |
||||
link: "/adminpanel", |
||||
id: 3, |
||||
}, |
||||
{ |
||||
icon: discountIcon, |
||||
link: '/adminpanel', |
||||
id : 5 |
||||
icon: walleteIcon, |
||||
link: "/adminpanel", |
||||
id: 4, |
||||
}, |
||||
{ |
||||
icon: receiptIcon, |
||||
link: '/adminpanel', |
||||
id : 6 |
||||
icon: discountIcon, |
||||
link: "/adminpanel", |
||||
id: 5, |
||||
}, |
||||
{ |
||||
icon: walleteIcon, |
||||
link: '/adminpanel', |
||||
id : 7 |
||||
icon: receiptIcon, |
||||
link: "/adminpanel", |
||||
id: 6, |
||||
}, |
||||
{ |
||||
icon: userIcon, |
||||
link: '/adminpanel', |
||||
id : 8 |
||||
icon: walleteIcon, |
||||
link: "/adminpanel", |
||||
id: 7, |
||||
}, |
||||
{ |
||||
icon: settingIcon, |
||||
link: '/adminpanel', |
||||
id : 9 |
||||
icon: userIcon, |
||||
link: "/adminpanel", |
||||
id: 8, |
||||
}, |
||||
{ |
||||
icon: exitIcon, |
||||
link: '/', |
||||
id: 10 |
||||
icon: settingIcon, |
||||
link: "/adminpanel", |
||||
id: 9, |
||||
}, |
||||
] |
||||
|
||||
|
||||
|
||||
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" /> |
||||
<img src={dropDownIcon} alt="choose User Icon" className="w-6" /> |
||||
|
||||
</div> |
||||
|
||||
|
||||
{/* ------------ */} |
||||
<div className="flex flex-col items-center w-full h-full"> |
||||
|
||||
|
||||
{ |
||||
menuOptions.slice(0,3).map( |
||||
(item, index) => ( |
||||
<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"/> |
||||
<div |
||||
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> |
||||
</Link> |
||||
) |
||||
) |
||||
} |
||||
<div className="h-1 w-4/5 rounded-xl bg-red82OP my-4"></div> |
||||
{ |
||||
menuOptions.slice(3,7).map( |
||||
(item, index) => ( |
||||
<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"/> |
||||
<div |
||||
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> |
||||
</Link> |
||||
) |
||||
) |
||||
} |
||||
<div className="h-1 w-4/5 rounded-xl bg-red82OP my-4"></div> |
||||
{ |
||||
menuOptions.slice(7,12).map( |
||||
(item, index) => ( |
||||
<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"/> |
||||
<div |
||||
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> |
||||
</Link> |
||||
) |
||||
) |
||||
} |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default MinimalNav; |
||||
{ |
||||
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" /> |
||||
<img src={dropDownIcon} alt="choose User Icon" className="w-6" /> |
||||
</div> |
||||
|
||||
{/* ------------ */} |
||||
<div className="flex flex-col items-center w-full h-full"> |
||||
{menuOptions.slice(0, 3).map((item, index) => ( |
||||
<Link |
||||
key={index} |
||||
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" /> |
||||
<div |
||||
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> |
||||
</Link> |
||||
))} |
||||
<div className="h-1 w-4/5 rounded-xl bg-red82OP my-4"></div> |
||||
{menuOptions.slice(3, 7).map((item, index) => ( |
||||
<Link |
||||
key={index} |
||||
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" /> |
||||
<div |
||||
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> |
||||
</Link> |
||||
))} |
||||
<div className="h-1 w-4/5 rounded-xl bg-red82OP my-4"></div> |
||||
{menuOptions.slice(7, 12).map((item, index) => ( |
||||
<Link |
||||
key={index} |
||||
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" /> |
||||
<div |
||||
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> |
||||
</Link> |
||||
))} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
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