feat: big update 07.05.26
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Box, Stack, Typography, Button } from "@mui/material";
|
||||
import { Button } from "@mui/material";
|
||||
import { useNavigate, useNavigationType } from "react-router";
|
||||
import { MediaViewer } from "@widgets";
|
||||
import { useMapData } from "./MapDataContext";
|
||||
@@ -15,22 +15,22 @@ type LeftSidebarProps = {
|
||||
|
||||
export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
|
||||
const navigate = useNavigate();
|
||||
const navigationType = useNavigationType(); // PUSH, POP, REPLACE
|
||||
const navigationType = useNavigationType();
|
||||
const { routeData } = useMapData();
|
||||
const [carrierThumbnail, setCarrierThumbnail] = useState<string | null>(null);
|
||||
const [carrierLogo, setCarrierLogo] = useState<string | null>(null);
|
||||
const [carrierSlogan, setCarrierSlogan] = useState<string | null>(null);
|
||||
const [carrierShortName, setCarrierShortName] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCarrierThumbnail() {
|
||||
async function fetchCarrierData() {
|
||||
if (routeData?.carrier_id) {
|
||||
const { city_id, logo } = (
|
||||
await authInstance.get(`/carrier/${routeData.carrier_id}`)
|
||||
).data;
|
||||
const { arms } = (await authInstance.get(`/city/${city_id}`)).data;
|
||||
setCarrierThumbnail(arms);
|
||||
setCarrierLogo(logo);
|
||||
const carrier = (await authInstance.get(`/carrier/${routeData.carrier_id}`)).data;
|
||||
setCarrierLogo(carrier.logo);
|
||||
setCarrierSlogan(carrier.slogan ?? null);
|
||||
setCarrierShortName(carrier.short_name ?? null);
|
||||
}
|
||||
}
|
||||
fetchCarrierThumbnail();
|
||||
fetchCarrierData();
|
||||
}, [routeData?.carrier_id]);
|
||||
|
||||
const handleBack = () => {
|
||||
@@ -42,131 +42,162 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
height: "100%",
|
||||
color: "#fff",
|
||||
transition: "padding 0.3s ease",
|
||||
p: open ? 2 : 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "stretch",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
direction="column"
|
||||
height="100%"
|
||||
width="100%"
|
||||
spacing={4}
|
||||
alignItems="stretch"
|
||||
justifyContent="space-between"
|
||||
sx={{
|
||||
{/* Кнопка назад — вне основного меню */}
|
||||
<div style={{ padding: "12px 12px 0" }}>
|
||||
<Button
|
||||
onClick={handleBack}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: "#222",
|
||||
color: "#fff",
|
||||
borderRadius: 1.5,
|
||||
px: 2,
|
||||
py: 1,
|
||||
"&:hover": { backgroundColor: "#2d2d2d" },
|
||||
}}
|
||||
fullWidth
|
||||
startIcon={<ArrowBackIcon />}
|
||||
>
|
||||
Назад
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Основное меню — повторяет .side-menu */}
|
||||
<div
|
||||
style={{
|
||||
boxSizing: "border-box",
|
||||
paddingTop: 46,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
height: "calc(100% - 56px)",
|
||||
position: "relative",
|
||||
opacity: open ? 1 : 0,
|
||||
transition: "opacity 0.25s ease",
|
||||
pointerEvents: open ? "auto" : "none",
|
||||
display: open ? "flex" : "none",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Button
|
||||
onClick={handleBack}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
backgroundColor: "#222",
|
||||
color: "#fff",
|
||||
borderRadius: 1.5,
|
||||
px: 2,
|
||||
py: 1,
|
||||
marginBottom: 10,
|
||||
"&:hover": {
|
||||
backgroundColor: "#2d2d2d",
|
||||
},
|
||||
{/* Герб — .side-menu-crest */}
|
||||
<div
|
||||
style={{
|
||||
width: 170,
|
||||
height: 170,
|
||||
alignSelf: "flex-start",
|
||||
marginLeft: 20,
|
||||
backgroundColor: "rgba(255,255,255,0.15)",
|
||||
borderRadius: 8,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "rgba(255,255,255,0.5)",
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Герб
|
||||
</div>
|
||||
|
||||
{/* Слоган — .side-menu-label */}
|
||||
{carrierSlogan && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 10,
|
||||
textAlign: "left",
|
||||
fontSize: 15,
|
||||
padding: "0 20px",
|
||||
alignSelf: "flex-start",
|
||||
fontWeight: 400,
|
||||
lineHeight: "150%",
|
||||
}}
|
||||
fullWidth
|
||||
startIcon={<ArrowBackIcon />}
|
||||
>
|
||||
Назад
|
||||
</Button>
|
||||
{carrierSlogan}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Stack
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
spacing={3}
|
||||
{/* Кнопки — .side-menu-buttons */}
|
||||
<div style={{ width: 220, marginTop: 260 }}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
color: "#000",
|
||||
textAlign: "center",
|
||||
padding: "8px 16px",
|
||||
marginBottom: 16,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 150,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
{carrierThumbnail && !isMediaIdEmpty(carrierThumbnail) && (
|
||||
<MediaViewer
|
||||
media={{
|
||||
id: carrierThumbnail,
|
||||
media_type: 1, // Тип "Фото" для логотипа
|
||||
filename: "route_thumbnail",
|
||||
}}
|
||||
fullWidth
|
||||
fullHeight
|
||||
/>
|
||||
)}
|
||||
<Typography sx={{ color: "#fff" }} textAlign="center">
|
||||
При поддержке Правительства
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<div className="flex flex-col items-center justify-center gap-2 mt-10">
|
||||
<button className="bg-[#fcd500] text-black px-4 py-2 rounded-md w-full font-medium my-10">
|
||||
Обращение губернатора
|
||||
</button>
|
||||
<button className="bg-white text-black px-4 py-2 rounded-md w-full font-medium mx-5">
|
||||
Достопримечательности
|
||||
</button>
|
||||
<button className="bg-white text-black px-4 py-2 rounded-md w-full font-medium mx-5">
|
||||
Остановки
|
||||
</button>
|
||||
Достопримечательности
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
color: "#000",
|
||||
textAlign: "center",
|
||||
padding: "8px 16px",
|
||||
marginBottom: 16,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
Остановки
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Stack
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
maxHeight={150}
|
||||
justifyContent="center"
|
||||
flexGrow={1}
|
||||
{/* Нижняя секция — .side-menu-bottom-section */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{carrierLogo && !isMediaIdEmpty(carrierLogo) && (
|
||||
<MediaViewer
|
||||
media={{
|
||||
id: carrierLogo,
|
||||
media_type: 1, // Тип "Фото" для логотипа
|
||||
filename: "route_thumbnail_logo",
|
||||
}}
|
||||
fullHeight
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
{/* .side-menu-carrier-block */}
|
||||
<div style={{ padding: "0 20px" }}>
|
||||
{carrierLogo && !isMediaIdEmpty(carrierLogo) && (
|
||||
<div style={{ width: 170 }}>
|
||||
<MediaViewer
|
||||
media={{ id: carrierLogo, media_type: 1, filename: "carrier_logo" }}
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{carrierShortName && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 4,
|
||||
textAlign: "left",
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
lineHeight: "150%",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
{carrierShortName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Typography
|
||||
variant="h6"
|
||||
textAlign="center"
|
||||
sx={{ color: "#fff", marginTop: "auto" }}
|
||||
>
|
||||
#ВсемПоПути
|
||||
</Typography>
|
||||
</Stack>
|
||||
{/* .side-menu-bottom-photo */}
|
||||
<img
|
||||
src="/side-menu-photo.png"
|
||||
alt=""
|
||||
style={{ width: "100%", marginTop: 32, display: "block", pointerEvents: "none" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[20px] -right-[520px] z-10">
|
||||
<LanguageSelector onBack={onToggle} isSidebarOpen={open} />
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user