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}

src/components/layouts/BaseLayout/componets/Header/Header.tsx

@@ -20,8 +20,10 @@ const Header = ({ title, breadcrumb }: PropsHeader) => {
 
   //Đóng menu mobile khi đổi route
   useEffect(() => {
-    context.setOpenMenuMobile?.(false);
-  }, [pathname, context]);
+    if (window.innerWidth < 1280) {
+      context.setOpenMenuMobile?.(false);
+    }
+  }, [pathname]);
 
   const toggleFullScreen = () => {
     if (!document.fullscreenElement) {
@@ -37,7 +39,7 @@ const Header = ({ title, breadcrumb }: PropsHeader) => {
         {/* Nút bấm Mobile: Mở menu mobile */}
         <div
           className="xl:hidden cursor-pointer"
-          onClick={() => context?.setOpenMenuMobile?.(true)}
+          onClick={() => context?.setOpenMenuMobile?.(!context?.openMenuMobile)}
         >
           <Image src={icons.hamburger} alt="menu" width={20} height={20} />
         </div>

src/components/layouts/BaseLayout/componets/MenuProfile/MenuProfile.tsx

@@ -51,7 +51,7 @@ const MenuProfile = ({ onClose }: PropsMenuProfile) => {
   return (
     <div className="w-[260px] bg-white rounded-xl shadow-md p-2">
       {/* PROFILE */}
-      {/* <Link
+      <Link
         href={PATH.PROFILE}
         onClick={onClose}
         className={clsx(
@@ -65,7 +65,7 @@ const MenuProfile = ({ onClose }: PropsMenuProfile) => {
           <p className="text-xs text-gray-500">Chi tiết tài khoản</p>
         </div>
       </Link>
-      <div className="h-px bg-gray-200 my-1" /> */}
+      <div className="h-px bg-gray-200 my-1" />
 
       {/* CHANGE PASSWORD */}
       {/* <Link