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 110 111 112 113 114 115 116 117 118 | 9x 58x 58x 58x 58x 9x 58x 78x | import { Box, Grid } from "@mui/material";
import navigationBg from "@assets/images/onboarding_bg.jpg";
import { styled } from "@theme/v2/Provider";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { SignOutIcon } from "@phosphor-icons/react";
import StackedNavigator from "../components/StackedNavigator";
import { GroupedSteps } from "../types";
import { useDrawerAccountWithUI } from "./DrawerAccount";
type Props = {
groupedSteps: GroupedSteps;
openLogoutModal: () => void;
persistFormData: () => void;
isFormDirty?: boolean;
};
export const Navigation = ({
groupedSteps,
openLogoutModal,
persistFormData,
isFormDirty,
}: Props) => {
const onChooseAccount = (cb: () => void) => {
if (isFormDirty) {
if (window.confirm("Changes you made may not be saved. Confirm?")) {
cb();
}
} else {
cb();
}
//here we need to block initial the redirect and change of the account.
//first we need to warn the user that he might loose filled data if he do not save them
//waiting for mockups
return false;
};
const { DrawerAccountComponent } = useDrawerAccountWithUI({
onChooseAccount,
});
return (
<NavigationContainer item md={4}>
<AbsoluteContainer
sx={{
background: "white",
opacity: 0.7,
}}
/>
<AbsoluteContainer
sx={{ padding: "40px 32px 12px 32px", backdropFilter: "blur(4px)" }}
>
<Grid container direction="column" sx={{ height: "100%" }}>
<TopContainer item>
<Box sx={{ width: "100%" }}>
<DrawerAccountComponent />
</Box>
</TopContainer>
<Grid
item
sx={{
flex: 4,
overflowY: "auto",
display: "flex",
flexDirection: "column",
marginTop: "10px",
}}
>
<StackedNavigator
groupedSteps={groupedSteps}
persistFormData={persistFormData}
/>
</Grid>
<Grid
item
sx={{ flex: 0.5, display: "flex", alignItems: "flex-end" }}
>
<StyledIconButton
Icon={SignOutIcon}
iconText="Log Out"
size="large"
variant="ghost"
onClick={openLogoutModal}
textColor="primary"
/>
</Grid>
</Grid>
</AbsoluteContainer>
</NavigationContainer>
);
};
const NavigationContainer = styled(Grid)(({ theme }) => ({
backgroundImage: `url(${navigationBg})`,
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
position: "relative",
width: "100%",
}));
const AbsoluteContainer = styled(Box)({
position: "absolute",
width: "100%",
height: "100%",
});
const TopContainer = styled(Grid)(({ theme }) => ({
flex: 0.5,
borderBottom: `1px solid ${theme.palette.border?.secondary}`,
}));
export const StyledIconButton = styled(GiveIconButton)(({ theme }) => ({
display: "flex",
flexDirection: "row-reverse",
gap: "14px",
}));
|