|
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 |