header updated

src/components/layouts/DashboardHeader.jsx

@@ -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> */}
-                    <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">
+                    <button onClick={()=>handleActiveMenu('avatar')} className='relative w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
-                            <span className="sr-only">Action button</span>
+                        <img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
-                            <div className='w-10 h-10 md:w-12 md:h-12 rounded-full shadow-sm shadow-brown'>
+                        {activeMenu == 'avatar' &&
-                                <img src={UserAvatar} alt='user image' className='w-full h-full p-1 rounded-full' />
+                            <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"/>
+                    </button>
-                            </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>
                 </div>
                 </div>
         </header>

src/components/layouts/DashboardLayout.jsx

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

src/components/layouts/aside/DashboardAside.jsx

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