feat update

src/components/layouts/BaseLayout/BaseLayout.tsx

@@ -1,9 +1,9 @@
 "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>({});
@@ -15,49 +15,22 @@ const BaseLayout = ({ children, title, breadcrumb }: PropsBaseLayout) => {
   return (
     <RequireAuth>
       <ContextBaseLayout
-        value={{ showFull, setShowFull, openMenuMobile, setOpenMenuMobile }}
+        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-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 />
-          </nav>
-
+        <div className="min-h-screen w-full overflow-x-hidden bg-[#f8f8f8]">
           {/* HEADER */}
           <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)]"
-                : "xl:left-0 xl:w-full",
-
-              /* MOBILE */
-              "left-0 w-full",
+              "top-0 right-0 z-[11] h-[68px]",
+              "w-full",
+              "border-b border-[#f4f7fa]",
+              "bg-white",
+              "transition-all duration-300",
             )}
           >
             <Header title={title} breadcrumb={breadcrumb} />
@@ -66,12 +39,10 @@ const BaseLayout = ({ children, title, breadcrumb }: PropsBaseLayout) => {
           {/* MAIN CONTENT */}
           <main
             className={clsx(
-              "pt-[92px] pb-6 px-6 transition-all duration-300 ease-in-out",
-
-              /* DESKTOP */
-              showFull ? "xl:ml-[240px]" : "xl:ml-0",
-
-              /* MOBILE */
+              "w-full",
+              "min-w-0",
+              "overflow-x-hidden",
+              "transition-all duration-300 ease-in-out",
               "ml-0",
             )}
           >