104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
"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(() => {
|
|
if (window.innerWidth < 1280) {
|
|
context.setOpenMenuMobile?.(false);
|
|
}
|
|
}, [pathname]);
|
|
|
|
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?.(!context?.openMenuMobile)}
|
|
>
|
|
<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;
|