header updated
This commit is contained in:
victorAnumudu
@@ -7,10 +7,24 @@ import UserAvatar from '../../assets/user_avatar.jpg'
|
||||
import HandBurger from "./HandBurger"
|
||||
import { Link } from "react-router-dom"
|
||||
import RouteLinks from "../../RouteLinks"
|
||||
import { useState } from "react";
|
||||
import MainBtn from "../MainBtn";
|
||||
import { TbLogout2 } from "react-icons/tb";
|
||||
|
||||
export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
|
||||
|
||||
const {theme, handleTheme, handleDrawer, setLogoutModal} = generalLayoutContext()
|
||||
|
||||
const [activeMenu, setActiveMenu] = useState('')
|
||||
|
||||
const handleActiveMenu = (name) => {
|
||||
if(activeMenu == name){
|
||||
setActiveMenu('')
|
||||
}else{
|
||||
setActiveMenu(name)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* HEADER SECTION*/}
|
||||
@@ -50,31 +64,32 @@ export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
|
||||
</div>
|
||||
|
||||
{/* USER AVATRA */}
|
||||
<div className='w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
|
||||
{/* <div className='w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
|
||||
<img src={UserAvatar} alt='user image' className='w-full h-full p-1 rounded-full' />
|
||||
</div>
|
||||
<div className='hidden relative group'>
|
||||
<button id="dropdownActionButton" data-dropdown-toggle="dropdownAction" className="inline-flex items-center text-gray-500 border-0 focus:outline-none ring-0 font-medium rounded-md text-sm p-1 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700" type="button">
|
||||
<span className="sr-only">Action button</span>
|
||||
<div className='w-10 h-10 md:w-12 md:h-12 rounded-full shadow-sm shadow-brown'>
|
||||
<img src={UserAvatar} alt='user image' className='w-full h-full p-1 rounded-full' />
|
||||
</div> */}
|
||||
|
||||
<button onClick={()=>handleActiveMenu('avatar')} className='relative w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
|
||||
<img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
|
||||
{activeMenu == 'avatar' &&
|
||||
<div className="pop-modal absolute p-4 w-52 sm:w-96 bg-white dark:bg-black right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
|
||||
<div className="w-full h-full flex flex-col gap-4">
|
||||
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
|
||||
<h1 className="font-semibold">Username</h1>
|
||||
<p className="-mt-2">username@gmail.com</p>
|
||||
</div>
|
||||
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
|
||||
<MainBtn
|
||||
text='Logout'
|
||||
className="w-full text-center text-white font-medium text-lg flex justify-center gap-2 items-center"
|
||||
onClick={()=>setLogoutModal(true)}
|
||||
>
|
||||
<TbLogout2 className="text-base" />
|
||||
</MainBtn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg className="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</button>
|
||||
{/* <!-- Dropdown menu --> */}
|
||||
<div id="dropdownAction" className={`hidden group-hover:block absolute right-0 z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600`}>
|
||||
<ul className="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownActionButton">
|
||||
<li>
|
||||
<Link to={RouteLinks.walletPage} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Wallet</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="py-1">
|
||||
<button onClick={()=>setLogoutModal(true)} className="block w-full px-4 py-2 text-sm text-red-700 hover:bg-red-100 dark:hover:bg-red-600 dark:text-red-200 dark:hover:text-white">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function DashboardLayout() {
|
||||
|
||||
<div
|
||||
// onClick={()=>setShowAsideDrawer(prev => !prev)}
|
||||
className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}>
|
||||
className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-4/5 sm:w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}>
|
||||
<DashboardAside />
|
||||
<button
|
||||
className='absolute top-[72px] -translate-y-[50px] -right-5 block p-2 rounded shadow-round_black dark:shadow-round_white bg-white dark:bg-black text-black dark:text-white'
|
||||
|
||||
@@ -39,7 +39,7 @@ export default function DashboardAside({shrinkAside=false}) {
|
||||
</div>
|
||||
<hr className="border-slate-400" />
|
||||
|
||||
<div className="p-4 w-full h-full overflow-y-auto">
|
||||
<div className="p-4 w-full flex flex-col gap-2 h-full overflow-y-auto">
|
||||
{asideNavLinks.map((link, index) => {
|
||||
let active = link.status == 1 ? true : false
|
||||
let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
|
||||
|
||||
Reference in New Issue
Block a user