68 lines
1.6 KiB
React
68 lines
1.6 KiB
React
import Stack from "@mui/material/Stack";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { useNavigate } from "react-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import PropTypes from "prop-types";
|
|
|
|
const Logo = ({ collapsed }) => {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Stack
|
|
pt={theme.spacing(6)}
|
|
pb={theme.spacing(12)}
|
|
pl={theme.spacing(8)}
|
|
direction="row"
|
|
alignItems="center"
|
|
gap={theme.spacing(4)}
|
|
onClick={() => navigate("/")}
|
|
sx={{ cursor: "pointer" }}
|
|
>
|
|
<Typography
|
|
pl={theme.spacing("1px")}
|
|
minWidth={theme.spacing(16)}
|
|
minHeight={theme.spacing(16)}
|
|
display={"flex"}
|
|
justifyContent={"center"}
|
|
alignItems={"center"}
|
|
backgroundColor={theme.palette.accent.main}
|
|
borderRadius={theme.shape.borderRadius}
|
|
color={theme.palette.accent.contrastText}
|
|
fontSize={18}
|
|
>
|
|
C
|
|
</Typography>
|
|
<Box
|
|
overflow={"hidden"}
|
|
sx={{
|
|
transition: "opacity 900ms ease, width 900ms ease",
|
|
opacity: collapsed ? 0 : 1,
|
|
whiteSpace: "nowrap",
|
|
width: collapsed ? 0 : "100%",
|
|
}}
|
|
>
|
|
{" "}
|
|
<Typography
|
|
lineHeight={1}
|
|
mt={theme.spacing(2)}
|
|
color={theme.palette.accent.contrastText}
|
|
fontSize={"var(--env-var-font-size-medium-plus)"}
|
|
sx={{ opacity: 0.8, fontWeight: 500 }}
|
|
>
|
|
{t("common.appName")}
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
Logo.propTypes = {
|
|
collapsed: PropTypes.bool,
|
|
};
|
|
|
|
export default Logo;
|