DigiFi/digifi-FirstOffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

started layout adjusting

Browse Source
This commit was merged in pull request #2.
This commit is contained in:
victorAnumudu
2025-04-06 02:24:29 +01:00
parent 4d89908200
commit 9520b2e851
15 changed files with 448 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/DashboardLayout.jsx
+22 -43
View File
@@ -1,63 +1,42 @@
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'
import { generalLayoutContext } from '../../context/GeneralLayoutContext'
import DashboardAside from './aside/DashboardAside'
export default function DashboardLayout() {
const [shrinkAside, setShrinkAside] = useState(false)
const [showAsideDrawer, setShowAsideDrawer] = useState(false)
useEffect(()=>{
window.addEventListener('resize', ()=>{
setShrinkAside(false)
setShowAsideDrawer(false)
})
},[])
const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
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`}>
<div className='w-full flex gap-10 relative m-auto h-screen overflow-x-hidden overflow-y-auto bg-white-body dark:bg-black-body p-8 pt-0 lg:p-10'>
<div className='hidden lg:block w-[370px] px-8 py-4 rounded-3xl sticky top-0 h-full bg-white-aside dark:bg-black-aside shadow-round_black dark:shadow-round_white'>
<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} />
{/* <div className={`${showAsideDrawer ? 'left-0' : '-left-full'} w-4/5 sm:w-72 px-8 py-4 lg:hidden fixed inset-0 z-[999] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
<DashboardAside />
</div> */}
<div className={`${showAsideDrawer ? 'left-0' : '-left-full'} w-full lg:hidden fixed inset-0 z-[999]`}>
<div className={`${showAsideDrawer ? 'left-0' : '-left-full'} fixed left-0 top-0 inset-0 w-full bg-white/20 transition-all`} onClick={()=>setShowAsideDrawer(prev => !prev)} ></div>
<div className={`${showAsideDrawer ? 'left-0' : '-left-full'} px-8 py-4 fixed left-0 top-0 inset-0 w-4/5 sm:w-72 bg-white-aside dark:bg-black-aside dark:text-white-light`}>
<DashboardAside />
</div>
</div>
{/* 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)]'>
<div className='main w-full bg-inherit'>
<div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
<DashboardHeader showAsideDrawer={showAsideDrawer} setShowAsideDrawer={setShowAsideDrawer} />
</div>
{/* main body section */}
<div className='min-h-[calc(99vh-111px)] pt-20 lg:pt-0'>
<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]">
<footer className="py-5 text-center lg:text-end w-full text-brown dark:text-white-light">
<p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
</footer>
</div>