feat: Update

src/pages/Route/route-preview/LeftSidebar.tsx

@@ -1,12 +1,19 @@
-import { Stack, Typography, Button } from "@mui/material";
+import { Box, Stack, Typography, Button } from "@mui/material";
 import { useNavigate, useNavigationType } from "react-router";
 import { MediaViewer } from "@widgets";
 import { useMapData } from "./MapDataContext";
 import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import { authInstance } from "@shared";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import LanguageSelector from "./web-gl/LanguageSelector";
 
-export const LeftSidebar = observer(() => {
+type LeftSidebarProps = {
+  open: boolean;
+  onToggle: () => void;
+};
+
+export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
   const navigate = useNavigate();
   const navigationType = useNavigationType(); // PUSH, POP, REPLACE
   const { routeData } = useMapData();
@@ -35,101 +42,146 @@ export const LeftSidebar = observer(() => {
   };
 
   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,
-          height: 40,
-          width: "100%",
-          border: "none",
-          cursor: "pointer",
-        }}
-      >
-        <p>Назад</p>
-      </button>
-
+    <Box
+      sx={{
+        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"
-        alignItems="center"
-        justifyContent="center"
-        my={10}
+        height="100%"
+        width="100%"
+        spacing={4}
+        alignItems="stretch"
+        sx={{
+          opacity: open ? 1 : 0,
+          transition: "opacity 0.25s ease",
+          pointerEvents: open ? "auto" : "none",
+          display: open ? "flex" : "none",
+        }}
       >
-        <div
-          style={{
-            maxWidth: 200,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 10,
+        <Button
+          onClick={handleBack}
+          variant="contained"
+          color="primary"
+          sx={{
+            backgroundColor: "#222",
+            color: "#fff",
+            borderRadius: 1.5,
+            px: 2,
+            py: 1,
+            "&:hover": {
+              backgroundColor: "#2d2d2d",
+            },
           }}
+          fullWidth
+          startIcon={<ArrowBackIcon />}
         >
-          {carrierThumbnail && (
+          Назад
+        </Button>
+
+        <Stack
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+          spacing={3}
+        >
+          <div
+            style={{
+              maxWidth: 200,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 10,
+            }}
+          >
+            {carrierThumbnail && (
+              <MediaViewer
+                media={{
+                  id: carrierThumbnail,
+                  media_type: 1, // Тип "Фото" для логотипа
+                  filename: "route_thumbnail",
+                }}
+                fullWidth
+                fullHeight
+              />
+            )}
+            <Typography sx={{ color: "#fff" }} textAlign="center">
+              При поддержке Правительства
+            </Typography>
+          </div>
+        </Stack>
+
+        <Stack
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+          spacing={2}
+        >
+          <Button variant="outlined" color="warning" fullWidth>
+            Достопримечательности
+          </Button>
+          <Button variant="outlined" color="warning" fullWidth>
+            Остановки
+          </Button>
+        </Stack>
+
+        <Stack
+          direction="column"
+          alignItems="center"
+          maxHeight={150}
+          justifyContent="center"
+          flexGrow={1}
+        >
+          {carrierLogo && (
             <MediaViewer
               media={{
-                id: carrierThumbnail,
+                id: carrierLogo,
                 media_type: 1, // Тип "Фото" для логотипа
-                filename: "route_thumbnail",
+                filename: "route_thumbnail_logo",
               }}
-              fullWidth
               fullHeight
             />
           )}
-          <Typography sx={{ mb: 2, color: "#fff" }} textAlign="center">
-            При поддержке Правительства
-          </Typography>{" "}
-        </div>
+        </Stack>
+
+        <Typography variant="h6" textAlign="center" sx={{ color: "#fff" }}>
+          #ВсемПоПути
+        </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>
+      {!open && (
+        <Typography
+          variant="caption"
+          sx={{
+            color: "rgba(255,255,255,0.6)",
+            writingMode: "vertical-rl",
+            transform: "rotate(180deg)",
+            letterSpacing: 4,
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transformOrigin: "center",
+            translate: "-50% -50%",
+            opacity: 0.6,
+            pointerEvents: "none",
+          }}
+        >
+          #ВсемПоПути
+        </Typography>
+      )}
 
-      <Stack
-        direction="column"
-        alignItems="center"
-        maxHeight={150}
-        justifyContent="center"
-        my={10}
-      >
-        {carrierLogo && (
-          <MediaViewer
-            media={{
-              id: carrierLogo,
-              media_type: 1, // Тип "Фото" для логотипа
-              filename: "route_thumbnail_logo",
-            }}
-            fullHeight
-          />
-        )}
-      </Stack>
-
-      <Typography
-        variant="h6"
-        textAlign="center"
-        mt="auto"
-        sx={{ color: "#fff" }}
-      >
-        #ВсемПоПути
-      </Typography>
-    </Stack>
+      <div className="absolute bottom-[20px] -right-[520px] z-10">
+        <LanguageSelector onBack={onToggle} isSidebarOpen={open} />
+      </div>
+    </Box>
   );
 });