90 lines
2.1 KiB
TypeScript
90 lines
2.1 KiB
TypeScript
import { Stack, Typography, Button } from "@mui/material";
|
||
|
||
import { useNavigate, useNavigationType } from "react-router";
|
||
|
||
export function LeftSidebar() {
|
||
const navigate = useNavigate();
|
||
const navigationType = useNavigationType(); // PUSH, POP, REPLACE
|
||
|
||
const handleBack = () => {
|
||
if (navigationType === "PUSH") {
|
||
navigate(-1);
|
||
} else {
|
||
navigate("/route");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Stack direction="column" width="300px" p={2} bgcolor="primary.main">
|
||
<button
|
||
onClick={handleBack}
|
||
type="button"
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
gap: 10,
|
||
color: "#fff",
|
||
backgroundColor: "#222",
|
||
borderRadius: 10,
|
||
width: "100%",
|
||
border: "none",
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
<p>Назад</p>
|
||
</button>
|
||
|
||
<Stack
|
||
direction="column"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
my={10}
|
||
>
|
||
<img src={"/Emblem.svg"} alt="logo" width={100} height={100} />
|
||
<Typography sx={{ mb: 2, color: "#fff" }} textAlign="center">
|
||
При поддержке Правительства Санкт-Петербурга
|
||
</Typography>
|
||
</Stack>
|
||
|
||
<Stack
|
||
direction="column"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
my={10}
|
||
spacing={2}
|
||
>
|
||
<Button variant="outlined" color="warning" fullWidth>
|
||
Достопримечательности
|
||
</Button>
|
||
<Button variant="outlined" color="warning" fullWidth>
|
||
Остановки
|
||
</Button>
|
||
</Stack>
|
||
|
||
<Stack
|
||
direction="column"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
my={10}
|
||
>
|
||
<img
|
||
src={"/GET.png"}
|
||
alt="logo"
|
||
width="80%"
|
||
style={{ margin: "0 auto" }}
|
||
/>
|
||
</Stack>
|
||
|
||
<Typography
|
||
variant="h6"
|
||
textAlign="center"
|
||
mt="auto"
|
||
sx={{ color: "#fff" }}
|
||
>
|
||
#ВсемПоПути
|
||
</Typography>
|
||
</Stack>
|
||
);
|
||
}
|