61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import Stack, { type StackProps } from "@mui/material/Stack";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { toggleSidebar } from "@/Features/UI/uiSlice.js";
|
|
import { useDispatch } from "react-redux";
|
|
import { useTranslation } from "react-i18next";
|
|
import useSidebar from "@/Hooks/useSidebar";
|
|
|
|
export const Logo = (props: StackProps) => {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const dispatch = useDispatch();
|
|
const { collapsed } = useSidebar();
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
gap={theme.spacing(4)}
|
|
onClick={() => {
|
|
dispatch(toggleSidebar());
|
|
}}
|
|
sx={{ cursor: "pointer" }}
|
|
{...props}
|
|
>
|
|
<Typography
|
|
minWidth={theme.spacing(16)}
|
|
minHeight={theme.spacing(16)}
|
|
display={"flex"}
|
|
justifyContent={"center"}
|
|
alignItems={"center"}
|
|
bgcolor={theme.palette.primary.main}
|
|
borderRadius={theme.shape.borderRadius}
|
|
color={theme.palette.primary.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)}
|
|
variant="h2"
|
|
fontWeight={500}
|
|
>
|
|
{t("common.appName")}
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|