|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 532 B |
@ -0,0 +1,154 @@ |
|||||||
|
import React, {useState} from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
// assets
|
||||||
|
import avatar from '../../assets/img/avatar/uglyUser.jpeg'; |
||||||
|
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) |
||||||
|
document.querySelector(".back-item-img").style.top = `${top}%`; |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
const menuOptions = [ |
||||||
|
{ |
||||||
|
icon: homeIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: optionsIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: notificationIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 3 |
||||||
|
|
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: walleteIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 4 |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: discountIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 5 |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: receiptIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 6 |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: walleteIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 7 |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: userIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 8 |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: settingIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
id : 9 |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: exitIcon, |
||||||
|
link: '/adminpanel', |
||||||
|
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 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; |
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 667 B |
|
After Width: | Height: | Size: 940 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 1.0 KiB |