updated layout style

This commit is contained in:
victorAnumudu
2024-04-03 17:55:55 +01:00
parent 5e0d21b5dd
commit a7e97e1890
8 changed files with 111 additions and 56 deletions
@@ -43,6 +43,37 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
<Aside asideDisplay={asideDisplay} />
</aside>
<main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
<header className={`p-5 md:hidden sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
<div className='h-14 w-full flex justify-end items-center gap-5'>
{/* MENU HAND BURGER */}
{/* <div className='w-full'>Welcome Austin Catherine</div> */}
<div
className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
onClick={asideDisplay}
>
<div
className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
}`}
></div>
<div
className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
showAside
? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
: "top-1/2 -translate-y-1/2"
}`}
></div>
<div
className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
showAside
? "top-1/2 -translate-y-1/2 -rotate-45"
: "bottom-0"
}`}
></div>
</div>
</div>
</header>
<div className="flex p-5 relative">
<div className="w-full p-5">{children}</div>
</div>