From 669350398f5f16833c536b3afa5353009ec805f3 Mon Sep 17 00:00:00 2001
From: "cyril.tsui" <cyril.tsui@2fi-solutions.com.hk>
Date: Wed, 17 Sep 2025 12:19:16 +0800
Subject: [PATCH] update ui

---
 src/app/(main)/layout.tsx        |  2 +-
 src/components/AppBar/AppBar.tsx | 34 ++++++++++++++++++++------------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 4144526..b8feb8f 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -54,7 +54,7 @@ export default async function MainLayout({
                 >
                   <Stack spacing={2}>
                     <I18nProvider namespaces={["common"]}>
-                      <Breadcrumb />
+                      {/* <Breadcrumb /> */}
                       {children}
                     </I18nProvider>
                   </Stack>
diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index d2256f6..1c1cec3 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -5,7 +5,9 @@ import Profile from "./Profile";
 import Box from "@mui/material/Box";
 import NavigationToggle from "./NavigationToggle";
 import { I18nProvider } from "@/i18n";
-import { Divider, Typography } from "@mui/material";
+import { Divider, Grid, Typography } from "@mui/material";
+import Breadcrumb from "@/components/Breadcrumb";
+import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
 
 export interface AppBarProps {
   avatarImageSrc?: string;
@@ -17,18 +19,24 @@ const AppBar: React.FC<AppBarProps> = ({ avatarImageSrc, profileName }) => {
     <I18nProvider namespaces={["common"]}>
       <MUIAppBar position="sticky" color="default" elevation={4}>
         <Toolbar>
-          <NavigationToggle />
-          <Box
-            sx={{ flexGrow: 1, display: "flex", justifyContent: "flex-end", flexDirection: "column", alignItems: "flex-end" }}
-          >
-            <Profile
-              avatarImageSrc={avatarImageSrc}
-              profileName={profileName}
-            />
-            <Typography sx={{ mx: "1rem" }} fontWeight="bold">
-              {profileName}
-            </Typography>
-          </Box>
+            <NavigationToggle />
+            <Box sx={{ml: NAVIGATION_CONTENT_WIDTH, display: { xs: "none", xl: "block" } }}>
+              <Breadcrumb />
+            </Box>
+            <Box sx={{display: { xl: "none" } }}>
+              <Breadcrumb />
+            </Box>
+            <Box
+              sx={{ flexGrow: 1, display: "flex", justifyContent: "flex-end", flexDirection: "column", alignItems: "flex-end" }}
+            >
+              <Profile
+                avatarImageSrc={avatarImageSrc}
+                profileName={profileName}
+              />
+              <Typography sx={{ mx: "1rem" }} fontWeight="bold">
+                {profileName}
+              </Typography>
+            </Box>
         </Toolbar>
       </MUIAppBar>
     </I18nProvider>