tuan.vu/TEDI-DDP-FE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:update web

Browse Source
This commit is contained in:
TuanVT
2026-05-24 23:33:43 +07:00
parent b6ccde2c74
commit b0baa509d9
58 changed files with 4920 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/BaseLayout/BaseLayout.tsx
+50 -50
View File
@@ -12,59 +12,59 @@ const BaseLayout = ({ children, title, breadcrumb }: PropsBaseLayout) => {
const [showFull, setShowFull] = React.useState(false);
const [openMenuMobile, setOpenMenuMobile] = React.useState(false);
return (
// <RequireAuth>
<ContextBaseLayout
value={{ showFull, setShowFull, openMenuMobile, setOpenMenuMobile }}
>
<div className="min-h-screen bg-[#f8f8f8]">
{/* OVERLAY cho Mobile */}
<div
className={clsx(
"fixed inset-0 bg-black/50 backdrop-blur-sm z-[20] transition-opacity duration-300 xl:hidden",
openMenuMobile ? "opacity-100 visible" : "opacity-0 invisible",
)}
onClick={() => setOpenMenuMobile(false)}
/>
<RequireAuth>
<ContextBaseLayout
value={{ showFull, setShowFull, openMenuMobile, setOpenMenuMobile }}
>
<div className="min-h-screen bg-[#f8f8f8]">
{/* OVERLAY cho Mobile */}
<div
className={clsx(
"fixed inset-0 bg-black/50 backdrop-blur-sm z-[20] transition-opacity duration-300 xl:hidden",
openMenuMobile ? "opacity-100 visible" : "opacity-0 invisible",
)}
onClick={() => setOpenMenuMobile(false)}
/>
{/* SIDEBAR (Dùng chung cho cả Desktop & Mobile) */}
<nav
className={clsx(
"fixed top-0 left-0 h-full w-[240px] z-[21] bg-white transition-all duration-300 border-r border-[#f4f7fa]",
// Desktop logic
showFull ? "xl:translate-x-0" : "xl:-translate-x-full",
// Mobile logic
openMenuMobile ? "translate-x-0" : "-translate-x-full",
)}
>
<Navbar />
</nav>
{/* SIDEBAR (Dùng chung cho cả Desktop & Mobile) */}
<nav
className={clsx(
"fixed top-0 left-0 h-full w-[240px] z-[21] bg-white transition-all duration-300 border-r border-[#f4f7fa]",
// Desktop logic
showFull ? "xl:translate-x-0" : "xl:-translate-x-full",
// Mobile logic
openMenuMobile ? "translate-x-0" : "-translate-x-full",
)}
>
<Navbar />
</nav>
{/* HEADER */}
<header
className={clsx(
"fixed top-0 right-0 h-[68px] z-[11] bg-white transition-all duration-300 border-b border-[#f4f7fa]",
showFull
? "xl:left-[240px] xl:w-[calc(100%-240px)]"
: "left-0 w-full",
"left-0 w-full", // Mặc định full width trên mobile
)}
>
<Header title={title} breadcrumb={breadcrumb} />
</header>
{/* HEADER */}
<header
className={clsx(
"fixed top-0 right-0 h-[68px] z-[11] bg-white transition-all duration-300 border-b border-[#f4f7fa]",
showFull
? "xl:left-[240px] xl:w-[calc(100%-240px)]"
: "left-0 w-full",
"left-0 w-full", // Mặc định full width trên mobile
)}
>
<Header title={title} breadcrumb={breadcrumb} />
</header>
{/* MAIN CONTENT */}
<main
className={clsx(
"pt-[92px] pb-6 px-6 transition-all duration-300",
showFull ? "xl:pl-[264px]" : "xl:pl-6",
"pl-6", // Mặc định padding trên mobile
)}
>
{children}
</main>
</div>
</ContextBaseLayout>
// </RequireAuth>
{/* MAIN CONTENT */}
<main
className={clsx(
"pt-[92px] pb-6 px-6 transition-all duration-300",
showFull ? "xl:pl-[264px]" : "xl:pl-6",
"pl-6", // Mặc định padding trên mobile
)}
>
{children}
</main>
</div>
</ContextBaseLayout>
</RequireAuth>
);
};