update

src/components/layouts/BaseLayout/BaseLayout.tsx

@@ -9,18 +9,9 @@ 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 [showFull, setShowFull] = React.useState(true);
   const [openMenuMobile, setOpenMenuMobile] = React.useState(false);
-  // Khi mount trên client, mở sidebar mặc định nếu là màn hình desktop (xl)
-  // React.useEffect(() => {
-  //   try {
-  //     if (window?.innerWidth >= 1280) {
-  //       setShowFull(true);
-  //     }
-  //   } catch (e) {
-  //     // ignore
-  //   }
-  // }, []);
+
   return (
     <RequireAuth>
       <ContextBaseLayout
@@ -39,11 +30,17 @@ const BaseLayout = ({ children, title, breadcrumb }: PropsBaseLayout) => {
           {/* 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",
+              "fixed top-0 left-0 h-screen bg-white border-r border-[#f4f7fa] z-[30] transition-all duration-300 ease-in-out",
+
+              /* DESKTOP */
+              showFull
+                ? "xl:w-[240px] xl:translate-x-0"
+                : "xl:w-[240px] xl:-translate-x-full",
+
+              /* MOBILE + TABLET */
+              openMenuMobile
+                ? "translate-x-0 w-[240px]"
+                : "-translate-x-full w-[240px]",
             )}
           >
             <Navbar />
@@ -53,10 +50,14 @@ const BaseLayout = ({ children, title, breadcrumb }: PropsBaseLayout) => {
           <header
             className={clsx(
               "fixed top-0 right-0 h-[68px] z-[11] bg-white transition-all duration-300 border-b border-[#f4f7fa]",
+
+              /* DESKTOP */
               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
+                : "xl:left-0 xl:w-full",
+
+              /* MOBILE */
+              "left-0 w-full",
             )}
           >
             <Header title={title} breadcrumb={breadcrumb} />
@@ -65,9 +66,13 @@ const BaseLayout = ({ children, title, breadcrumb }: PropsBaseLayout) => {
           {/* 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
+              "pt-[92px] pb-6 px-6 transition-all duration-300 ease-in-out",
+
+              /* DESKTOP */
+              showFull ? "xl:ml-[240px]" : "xl:ml-0",
+
+              /* MOBILE */
+              "ml-0",
             )}
           >
             {children}