Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 19x 19x 1x 1x 1x 1x 1x 1x 19x 95x 11x | import { AppBarProps, AppBar, styled, Box, Stack } from "@mui/material";
import { DotsMenuIcon } from "@assets/icons";
import { StyledIconButton as IconButton } from "@common/IconButton";
import { useRouting } from "@hooks/common/useRouting";
import { useDrawer } from "@components/CustomBreadcrumbsPage/hooks/useDrawer";
import CustomBreadcrumbs from "./CustomBreadcrumbs";
import BreadcrumbsTextItem from "./BreadcrumbsTextItem";
import BreadcrumbsProductItem from "./BreadcrumbsProductItem";
import { RefObject } from "react";
import React from "react";
import AppbarActions from "./AppbarMobileActions";
import { useBannerOffset } from "@hooks/common/useBannerOffset";
import { useMatch } from "react-router-dom";
import { isMobile } from "@utils/index";
export const APP_BAR_HEIGHT = 40;
interface PageContainerProps {
isPermissionsPage?: boolean;
}
interface BreadcrumbsAppBarProps extends AppBarProps {
appBarRef: RefObject<HTMLDivElement>;
showOnlyAppBarNavigation?: boolean;
}
const BreadcrumbsAppBar: React.FC<BreadcrumbsAppBarProps> = ({
appBarRef,
showOnlyAppBarNavigation,
}) => {
const bannerOffset = useBannerOffset();
const { toggleDrawer } = useDrawer();
const { subPaths, isSettingsPage, isBankAccountPage } = useRouting();
const hide = useMatch("/acquirer/settlements/:id");
Iif (hide && isMobile) return null;
return (
<AppBar
sx={{
backgroundColor: "transparent",
transition: "box-shadow 150ms ease-in",
height: APP_BAR_HEIGHT,
width: "100%",
zIndex: 100,
top: `${bannerOffset}px`,
}}
elevation={0}
ref={appBarRef}
position="sticky"
>
<PageContainer
justifyContent="space-between"
alignItems="center"
flexDirection="row"
display="flex"
maxHeight="100%"
>
<Box display="flex" alignItems="center">
{!showOnlyAppBarNavigation && (
<IconButton onClick={toggleDrawer}>
<DotsMenuIcon />
</IconButton>
)}
<CustomBreadcrumbs
maxElements={2}
paths={subPaths.slice(1)}
FallbackComponent={BreadcrumbsTextItem}
isAlwaysReturnFallback={isSettingsPage || isBankAccountPage}
breadcrumbsElements={[
{
indexes: [0],
component: BreadcrumbsTextItem,
},
{
indexes: [1],
component: BreadcrumbsProductItem,
},
]}
/>
</Box>
{!showOnlyAppBarNavigation && <AppbarActions />}
</PageContainer>
</AppBar>
);
};
export default React.memo(BreadcrumbsAppBar);
export const PageContainer = styled(Stack, {
shouldForwardProp: (prop) => prop !== "isPermissionsPage",
})<PageContainerProps>(({ theme, isPermissionsPage }) => ({
width: "100%",
marginInline: "auto",
...(!isPermissionsPage && {
padding: "0 58px",
maxWidth: "1440px",
[theme.breakpoints.down(1024)]: {
padding: "0 32px",
},
[theme.breakpoints.down("new_sm_md")]: {
padding: "0 16px",
},
[theme.breakpoints.down(600)]: {
padding: "0 16px",
},
}),
}));
|