fix breadcrumb

src/app/(main)/layout.tsx

@@ -5,7 +5,6 @@ import { redirect } from "next/navigation";
 import Box from "@mui/material/Box";
 import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
 import Stack from "@mui/material/Stack";
-import Breadcrumb from "@/components/Breadcrumb";
 import { AxiosProvider } from "@/app/(main)/axios/AxiosProvider";
 import { SetupAxiosInterceptors } from "@/app/(main)/axios/axiosInstance";
 import { CameraProvider } from "@/components/Cameras/CameraProvider";
@@ -54,7 +53,6 @@ export default async function MainLayout({
                 >
                   <Stack spacing={2}>
                     <I18nProvider namespaces={["common"]}>
-                      <Breadcrumb />
                       {children}
                     </I18nProvider>
                   </Stack>

src/components/AppBar/AppBar.tsx

@@ -6,6 +6,8 @@ import Box from "@mui/material/Box";
 import NavigationToggle from "./NavigationToggle";
 import { I18nProvider } from "@/i18n";
 import { Typography } from "@mui/material";
+import Breadcrumb from "@/components/Breadcrumb";
+import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
 
 export interface AppBarProps {
   avatarImageSrc?: string;
@@ -18,6 +20,12 @@ const AppBar: React.FC<AppBarProps> = ({ avatarImageSrc, profileName }) => {
       <MUIAppBar position="sticky" color="default" elevation={0}>
         <Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, px: 2 }}>
             <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,