update ui

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>

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>