aside bar width increased

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -12,48 +12,40 @@ export default function BreadcrumbCom({title, span, paths}) {
 
       // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
       var rect = 10;
-      // window.addEventListener('scroll', ()=>{
-      //     if(window.scrollY >= rect + 20){
-      //         setStickNav(true)
-      //         console.log('tru')
-      //     }else{
-      //         setStickNav(false)
-      //         console.log('false')
-      //     }
-      // })
-
-    //   return () => window.removeEventListener('scroll', window.addEventListener('scroll', ()=>{
-    //     if(window.scrollY >= rect + 20){
-    //         setStickNav(true)
-    //     }else{
-    //         setStickNav(false)
-    //     }
-    // }))
+      window.addEventListener('scroll', ()=>{
+          if(window.scrollY >= rect + 20){
+              setStickNav(true)
+              console.log('tru')
+          }else{
+              setStickNav(false)
+              console.log('false')
+          }
+      })
   },[])
 
   return (
-    <div className={`${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}`}>
-
-    <div className= {`w-full py-2 flex justify-between items-center`}>
-      <div className='flex flex-col gap-2'>
-        <div className='flex flex-col md:flex-row gap-1 md:items-center'>
-          <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
-          <span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
+    // ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
+    <div className={`sticky -top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
+      <div className= {`w-full py-2 flex justify-between items-center`}>
+        <div className='flex flex-col gap-2'>
+          <div className='flex flex-col md:flex-row gap-1 md:items-center'>
+            <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
+            <span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
+          </div>
+          <div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
+              <TiHomeOutline className='text-black dark:text-white-body' />
+              {paths.map((item, index) => (
+                <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
+                  <MdKeyboardDoubleArrowRight />
+                  <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
+                </div>
+              ))}
+          </div>
         </div>
-        <div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
-            <TiHomeOutline className='text-black dark:text-white-body' />
-            {paths.map((item, index) => (
-              <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
-                <MdKeyboardDoubleArrowRight />
-                <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
-              </div>
-            ))}
+        <div className='hidden lg:flex'>
+          <DashboardHeader />
         </div>
       </div>
-      <div className='hidden lg:flex'>
-        <DashboardHeader />
-      </div>
-    </div>
     </div>
   )
 }

src/components/layouts/DashboardLayout.jsx

@@ -20,13 +20,13 @@ export default function DashboardLayout() {
             <DashboardAside />
         </div> */}
         <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} lg:hidden w-full fixed inset-0 z-[999]`}>
-            <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
-            <div className={`px-8 py-4 h-full w-4/5 sm:w-72 bg-white-aside dark:bg-black-aside dark:text-white-light`}>
+            <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
+            <div className={`fixed px-8 py-4 h-full w-4/5 sm:w-[400px] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
                 <DashboardAside />
             </div>
         </div>
 
-        <div className='main w-full bg-inherit large:mr-[350px]'>
+        <div className='main w-full bg-inherit large:mr-[400px]'>
             <div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
                 <DashboardHeader />
             </div> 
@@ -43,12 +43,12 @@ export default function DashboardLayout() {
         </div>
 
         {/* Right Aisde */}
-        <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+        <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
             <RightAsideBar />
         </div>
-        <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
+        <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
             {/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
-            <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+            <div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
                 <RightAsideBar />
             </div>
         </div>

src/context/GeneralLayoutContext.jsx

@@ -80,10 +80,12 @@ export default function GeneralLayoutContext({children}) {
       window.addEventListener('resize', ()=>{
           setShrinkAside(false)
           setShowAsideDrawer('')
+          setActiveMenu('')
       })
       return () => window.removeEventListener('resize', window.addEventListener('resize', ()=>{
           setShrinkAside(false)
           setShowAsideDrawer('')
+          setActiveMenu('')
       }))
   },[])
 

src/pages/HomePage.jsx

@@ -7,10 +7,18 @@ export default function HomePage() {
       <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
       <div className='grid grid-cols-1 gap-8'>
         <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-8'>
-          <div className='w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
+          <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'>
+            <p className='text-base sm:text-lg font-bold'>Earnings</p>
+          </div>
+          <div className='p-8 w-full bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'>
+            <p className='text-base sm:text-lg font-bold'>Contributions</p>
+          </div>
+          <div className='p-8 w-full bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'>
+            <p className='text-base sm:text-lg font-bold'>Summary</p>
+          </div>
+          <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'>
+            <p className='text-base sm:text-lg font-bold'>Earnings</p>
+          </div>
         </div>
         <div className='w-full'>
           <div className='w-full p-8 min-h-96 bg-white dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-full shadow-[0px_0px_2px_rgba(0,_0,_0,_50)] dark:shadow-round_white'>