first commit

2026-05-23 09:48:07 +07:00
parent 03b9101bd5
commit b6ccde2c74
134 changed files with 7178 additions and 110 deletions
@@ -0,0 +1,101 @@
+"use client";
+import React, { useContext, useEffect, useState } from "react";
+import { PropsHeader } from "./interface";
+import { usePathname } from "next/dist/client/components/navigation";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { ContextBaseLayout } from "../../BaseLayout";
+import Image from "next/image";
+import icons from "@/constant/images/icons";
+import { ChevronDown } from "lucide-react";
+import clsx from "clsx";
+import MenuProfile from "../MenuProfile";
+
+const Header = ({ title, breadcrumb }: PropsHeader) => {
+  const pathname = usePathname();
+  const { infoUser } = useSelector((state: RootState) => state.user);
+  const context = useContext(ContextBaseLayout);
+
+  const [openProfile, setOpenProfile] = useState(false);
+
+  //Đóng menu mobile khi đổi route
+  useEffect(() => {
+    context.setOpenMenuMobile?.(false);
+  }, [pathname, context]);
+
+  const toggleFullScreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+
+  return (
+    <div className="h-full w-full px-6 flex items-center justify-between bg-white relatives">
+      <div className="flex items-center gap-4">
+        {/* Nút bấm Mobile: Mở menu mobile */}
+        <div
+          className="xl:hidden cursor-pointer"
+          onClick={() => context?.setOpenMenuMobile?.(true)}
+        >
+          <Image src={icons.hamburger} alt="menu" width={20} height={20} />
+        </div>
+        {/* Nút bấm Desktop: Thu gọn/Mở rộng sidebar */}
+        <div
+          className="hidden xl:block cursor-pointer"
+          onClick={() => context?.setShowFull?.(!context?.showFull)}
+        >
+          <Image src={icons.hamburger} alt="menu" width={20} height={20} />
+        </div>
+        {breadcrumb ? (
+          breadcrumb
+        ) : (
+          <h4 className="text-[18px] font-bold text-[#141416]">{title}</h4>
+        )}
+      </div>
+
+      <div className="flex items-center gap-7">
+        <div className="cursor-pointer" onClick={toggleFullScreen}>
+          <Image src={icons.full_screen} alt="" width={24} height={24} />
+        </div>
+
+        <div
+          className="relative flex items-center gap-2 cursor-pointer"
+          onClick={() => setOpenProfile(!openProfile)}
+        >
+          <div className="w-10 h-10 rounded-full border-2 border-blue-500 overflow-hidden">
+            <Image
+              src={
+                infoUser?.avatar
+                  ? `${process.env.NEXT_PUBLIC_IMAGE}/${infoUser.avatar}`
+                  : icons.avatar
+              }
+              alt="avatar"
+              width={40}
+              height={40}
+            />
+          </div>
+          <p className="hidden md:block text-sm font-semibold text-[#171832]">
+            {infoUser?.fullname || "User admin"}
+          </p>
+          <ChevronDown
+            size={16}
+            className={clsx(
+              "transition-transform",
+              openProfile && "rotate-180",
+            )}
+          />
+
+          {openProfile && (
+            <div className="absolute right-0 top-[120%] z-50">
+              <MenuProfile onClose={() => setOpenProfile(false)} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;