72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { PropsBaseLayout, TContextBaseLayout } from "./interface";
|
|
import clsx from "clsx";
|
|
import Header from "./componets/Header";
|
|
import Navbar from "./componets/Navbar";
|
|
import RequireAuth from "@/components/protected/RequiredAuth";
|
|
|
|
export const ContextBaseLayout = React.createContext<TContextBaseLayout>({});
|
|
|
|
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)}
|
|
/>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
);
|
|
};
|
|
|
|
export default BaseLayout;
|