feat: Update left sidebar and fetch queries

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

@@ -61,6 +61,7 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
         width="100%"
         spacing={4}
         alignItems="stretch"
+        justifyContent="space-between"
         sx={{
           opacity: open ? 1 : 0,
           transition: "opacity 0.25s ease",
@@ -68,71 +69,72 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
           display: open ? "flex" : "none",
         }}
       >
-        <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 />}
-        >
-          Назад
-        </Button>
-
-        <Stack
-          direction="column"
-          alignItems="center"
-          justifyContent="center"
-          spacing={3}
-        >
-          <div
-            style={{
-              maxWidth: 200,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 10,
+        <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",
+              },
             }}
+            fullWidth
+            startIcon={<ArrowBackIcon />}
           >
-            {carrierThumbnail && (
-              <MediaViewer
-                media={{
-                  id: carrierThumbnail,
-                  media_type: 1, // Тип "Фото" для логотипа
-                  filename: "route_thumbnail",
-                }}
-                fullWidth
-                fullHeight
-              />
-            )}
-            <Typography sx={{ color: "#fff" }} textAlign="center">
-              При поддержке Правительства
-            </Typography>
-          </div>
-        </Stack>
+            Назад
+          </Button>
 
-        <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"
+            justifyContent="center"
+            spacing={3}
+          >
+            <div
+              style={{
+                maxWidth: 150,
+                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>
+
+          <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>
 
         <Stack
           direction="column"
@@ -153,31 +155,14 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
           )}
         </Stack>
 
-        <Typography variant="h6" textAlign="center" sx={{ color: "#fff" }}>
-          #ВсемПоПути
-        </Typography>
-      </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",
-          }}
+          variant="h6"
+          textAlign="center"
+          sx={{ color: "#fff", marginTop: "auto" }}
         >
           #ВсемПоПути
         </Typography>
-      )}
+      </Stack>
 
       <div className="absolute bottom-[20px] -right-[520px] z-10">
         <LanguageSelector onBack={onToggle} isSidebarOpen={open} />