aside settings btn fixed

This commit was merged in pull request #8.
This commit is contained in:
victorAnumudu
2025-04-08 18:12:08 +01:00
parent 92688000ff
commit 18fc4505dc
9 changed files with 140 additions and 130 deletions
+15 -9
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Outlet, useLocation } from 'react-router-dom'
import DashboardHeader from './DashboardHeader'
import { generalLayoutContext } from '../../context/GeneralLayoutContext'
@@ -8,6 +8,8 @@ import RightAsideBar from './rightaside/RightAsideBar'
export default function DashboardLayout() {
let {pathname} = useLocation()
const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
return (
@@ -26,7 +28,7 @@ export default function DashboardLayout() {
</div>
</div>
<div className='main w-full bg-inherit large:mr-[400px]'>
<div className={`main w-full bg-inherit ${pathname == '/' && 'large:mr-[400px]'}`}>
<div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
<DashboardHeader />
</div>
@@ -43,15 +45,19 @@ 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-[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-[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 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`}>
{pathname == '/' &&
<>
<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>
<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 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>
</>
}
</div>
)
}