57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useSidebar } from "@/context/SidebarContext";
|
|
import AppHeader from "@/layout/AppHeader";
|
|
import AppSidebar from "@/layout/AppSidebar";
|
|
import Backdrop from "@/layout/Backdrop";
|
|
import { apiGetCurrentUser } from "@/service/auth";
|
|
import { setUserData } from "@/store/features/userSlice";
|
|
import React, { useEffect } from "react";
|
|
import { useDispatch } from "react-redux";
|
|
|
|
export default function AdminLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { isExpanded, isHovered, isMobileOpen } = useSidebar();
|
|
const dispatch = useDispatch()
|
|
|
|
useEffect(() => {
|
|
const fetchUser = async () => {
|
|
try {
|
|
const userData = await apiGetCurrentUser();
|
|
dispatch(setUserData(userData.data));
|
|
} catch (err) {
|
|
console.error("Lỗi:", err);
|
|
}
|
|
};
|
|
fetchUser();
|
|
}, [])
|
|
|
|
|
|
// Dynamic class for main content margin based on sidebar state
|
|
const mainContentMargin = isMobileOpen
|
|
? "ml-0"
|
|
: isExpanded || isHovered
|
|
? "lg:ml-[290px]"
|
|
: "lg:ml-[90px]";
|
|
|
|
return (
|
|
<div className="min-h-screen xl:flex">
|
|
{/* Sidebar and Backdrop */}
|
|
<AppSidebar />
|
|
<Backdrop />
|
|
{/* Main Content Area */}
|
|
<div
|
|
className={`flex-1 transition-all duration-300 ease-in-out ${mainContentMargin}`}
|
|
>
|
|
{/* Header */}
|
|
<AppHeader />
|
|
{/* Page Content */}
|
|
<div className="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|