Kain344/History-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update layout

Browse Source
This commit is contained in:
bokhonglo
2026-04-28 14:20:29 +07:00
parent 9006adbb70
commit e0608eb05b
5 changed files with 63 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/(admin)/layout.tsx
View File

@@ -1,56 +0,0 @@
"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>
);
}

42
src/app/(admin)/page.tsx
View File

@@ -1,42 +0,0 @@
import type { Metadata } from "next";
import { EcommerceMetrics } from "@/components/ecommerce/EcommerceMetrics";
import React from "react";
import MonthlyTarget from "@/components/ecommerce/MonthlyTarget";
import MonthlySalesChart from "@/components/ecommerce/MonthlySalesChart";
import StatisticsChart from "@/components/ecommerce/StatisticsChart";
import RecentOrders from "@/components/ecommerce/RecentOrders";
import DemographicCard from "@/components/ecommerce/DemographicCard";
export const metadata: Metadata = {
title:
"Admin Dashboard",
description: "This is Dashboard Home for History Web",
};
export default function Ecommerce() {
return (
<div className="grid grid-cols-12 gap-4 md:gap-6">
<div className="col-span-12 space-y-6 xl:col-span-7">
<EcommerceMetrics />
<MonthlySalesChart />
</div>
<div className="col-span-12 xl:col-span-5">
<MonthlyTarget />
</div>
<div className="col-span-12">
<StatisticsChart />
</div>
<div className="col-span-12 xl:col-span-5">
<DemographicCard />
</div>
<div className="col-span-12 xl:col-span-7">
<RecentOrders />
</div>
</div>
);
}

9
src/app/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import AdminLayout from "./user/layout";
export default function Page() {
return (
<AdminLayout>
<div className=''>Page</div>
</AdminLayout>
);
}

11
src/app/user/layout.tsx
View File

@@ -8,6 +8,7 @@ import { apiGetCurrentUser } from "@/service/auth";
import { setUserData } from "@/store/features/userSlice";
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { usePathname } from "next/navigation";
export default function AdminLayout({
children,
@@ -16,6 +17,8 @@ export default function AdminLayout({
}) {
const { isExpanded, isHovered, isMobileOpen } = useSidebar();
const dispatch = useDispatch()
const pathname = usePathname();
const isHomePage = pathname === "/";
useEffect(() => {
const fetchUser = async () => {
@@ -31,7 +34,9 @@ export default function AdminLayout({
// Dynamic class for main content margin based on sidebar state
const mainContentMargin = isMobileOpen
const mainContentMargin = isHomePage
? "ml-0"
: isMobileOpen
? "ml-0"
: isExpanded || isHovered
? "lg:ml-[290px]"
@@ -40,8 +45,8 @@ export default function AdminLayout({
return (
<div className="min-h-screen xl:flex">
{/* Sidebar and Backdrop */}
<AppSidebar />
<Backdrop />
{!isHomePage && <AppSidebar />}
{!isHomePage && <Backdrop />}
{/* Main Content Area */}
<div
className={`flex-1 transition-all duration-300 ease-in-out ${mainContentMargin}`}

6
src/layout/AppHeader.tsx
View File

@@ -5,12 +5,15 @@ import UserDropdown from "@/components/header/UserDropdown";
import { useSidebar } from "@/context/SidebarContext";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { useState ,useEffect,useRef} from "react";
const AppHeader: React.FC = () => {
const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false);
const { isMobileOpen, toggleSidebar, toggleMobileSidebar } = useSidebar();
const pathname = usePathname();
const isHomePage = pathname === "/";
const handleToggle = () => {
if (window.innerWidth >= 1024) {
@@ -44,6 +47,7 @@ const AppHeader: React.FC = () => {
<header className="sticky top-0 flex w-full bg-white border-gray-200 z-99 dark:border-gray-800 dark:bg-gray-900 lg:border-b">
<div className="flex flex-col items-center justify-between grow lg:flex-row lg:px-6">
<div className="flex items-center justify-between w-full gap-2 px-3 py-3 border-b border-gray-200 dark:border-gray-800 sm:gap-4 lg:justify-normal lg:border-b-0 lg:px-0 lg:py-4">
{!isHomePage && (
<button
className="items-center justify-center w-10 h-10 text-gray-500 border-gray-200 rounded-lg z-99999 dark:border-gray-800 lg:flex dark:text-gray-400 lg:h-11 lg:w-11 lg:border"
onClick={handleToggle}
@@ -82,6 +86,7 @@ const AppHeader: React.FC = () => {
)}
{/* Cross Icon */}
</button>
)}
<Link href="/" className="lg:hidden">
<Image
@@ -178,4 +183,3 @@ const AppHeader: React.FC = () => {
};
export default AppHeader;