victorAnumudu
66 lines
2.8 KiB
React
66 lines
2.8 KiB
React
import { useEffect, useState } from 'react'
|
|
import { Outlet } from 'react-router-dom'
|
|
import { FaArrowRight, FaArrowLeft } from "react-icons/fa6";
|
|
|
|
import DashboardAside from './aside/DashboardAside'
|
|
import DashboardHeader from './DashboardHeader'
|
|
|
|
export default function DashboardLayout() {
|
|
const [shrinkAside, setShrinkAside] = useState(false)
|
|
|
|
const [showAsideDrawer, setShowAsideDrawer] = useState(false)
|
|
|
|
useEffect(()=>{
|
|
window.addEventListener('resize', ()=>{
|
|
setShrinkAside(false)
|
|
setShowAsideDrawer(false)
|
|
})
|
|
},[])
|
|
return (
|
|
<div className='w-full flex relative m-auto h-screen overflow-hidden'>
|
|
<div
|
|
className={`${shrinkAside ? 'w-28' : 'w-72'} hidden lg:block relative z-[999] bg-black text-white-light`}
|
|
>
|
|
<div className='sticky top-0 h-full'>
|
|
<DashboardAside shrinkAside={shrinkAside} />
|
|
<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'
|
|
onClick={()=>setShrinkAside(prev => !prev)}
|
|
>
|
|
{shrinkAside ? <FaArrowRight />: <FaArrowLeft />}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
// onClick={()=>setShowAsideDrawer(prev => !prev)}
|
|
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'
|
|
onClick={(e)=>setShowAsideDrawer(prev => !prev)}
|
|
>
|
|
<FaArrowLeft />
|
|
</button>
|
|
</div>
|
|
|
|
<div className='relative w-full h-full overflow-y-auto'>
|
|
{/* HEADER SECTION generalLayoutContext*/}
|
|
<DashboardHeader showAsideDrawer={showAsideDrawer} setShowAsideDrawer={setShowAsideDrawer} />
|
|
|
|
{/* BODY SECTION */}
|
|
{/* main takes the full width minus that of the header and footer 72 for header, 39 for footer total 111 */}
|
|
<div className='main p-3 md:p-10 bg-white-light dark:bg-slate-800 text-brown dark:text-white-light min-h-[calc(99vh-111px)]'>
|
|
<Outlet />
|
|
</div>
|
|
|
|
{/* FOOTER SECTION */}
|
|
<footer className="sticky bottom-0 text-center lg:text-end w-full bg-white dark:bg-slate-800 dark:text-white-light p-3 md:px-10 shadow-[0px_0px_2px_black]">
|
|
<p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|