feat: Update

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

@@ -9,7 +9,7 @@ import {
   TilingSprite,
   Text,
 } from "pixi.js";
-import { Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import { MapDataProvider, useMapData } from "./MapDataContext";
 import { TransformProvider, useTransform } from "./TransformContext";
 import { InfiniteCanvas } from "./InfiniteCanvas";
@@ -26,6 +26,7 @@ import { Sight } from "./Sight";
 import { SightData } from "./types";
 import { Station } from "./Station";
 import { UP_SCALE } from "./Constants";
+import { WebGLRouteMapPrototype } from "./webgl-prototype/WebGLRouteMapPrototype";
 import CircularProgress from "@mui/material/CircularProgress";
 
 extend({
@@ -51,14 +52,33 @@ const Loading = () => {
   return null;
 };
 export const RoutePreview = () => {
-  const { routeData, stationData, sightData } = useMapData();
+  const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(true);
   return (
     <MapDataProvider>
       <TransformProvider>
         <Stack direction="row" height="100vh" width="100vw" overflow="hidden">
-          {routeData && stationData && sightData ? <LanguageSwitcher /> : null}
           <Loading />
-          <LeftSidebar />
+          <Box
+            sx={{
+              position: "relative",
+              width: isLeftSidebarOpen ? 300 : 0,
+              transition: "width 0.3s ease",
+              overflow: "visible",
+              height: "100%",
+              bgcolor: "primary.main",
+              borderRight: isLeftSidebarOpen
+                ? "1px solid rgba(255,255,255,0.08)"
+                : "none",
+              display: "flex",
+              justifyContent: "flex-start",
+              flexShrink: 0,
+            }}
+          >
+            <LeftSidebar
+              open={isLeftSidebarOpen}
+              onToggle={() => setIsLeftSidebarOpen((prev) => !prev)}
+            />
+          </Box>
           <Stack direction="row" flex={1} position="relative" height="100%">
             <RouteMap />
             <Widgets />
@@ -165,8 +185,7 @@ export const RouteMap = observer(() => {
 
   return (
     <div style={{ width: "100%", height: "100%" }} ref={parentRef}>
-      <LanguageSwitcher />
-      <Application resizeTo={parentRef} background="#fff" preference="webgl">
+      {/* <Application resizeTo={parentRef} background="#000" preference="webgl">
         <InfiniteCanvas>
           <TravelPath points={points} />
           {stationData[language].map((obj, index) => (
@@ -184,7 +203,8 @@ export const RouteMap = observer(() => {
             return <Sight sight={sight} id={index} key={sight.id} />;
           })}
         </InfiniteCanvas>
-      </Application>
+      </Application> */}
+      <WebGLRouteMapPrototype />
     </div>
   );
 });