Temporarily limit sidebar items

ShortestPathLab · Mar 18, 2024 · d9c0bae · d9c0bae
1 parent 0f92d1b
commit d9c0bae
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
diff --git a/client/src/Sidebar.tsx b/client/src/Sidebar.tsx
@@ -76,7 +76,7 @@ export function useSidebarBackground() {
   return useMemo(
     () =>
       interpolate([palette.background.paper, palette.text.primary])(
-        palette.mode === "dark" ? 0.0125 : 0.025
+        palette.mode === "dark" ? 0.025 : 0.025
       ),
     [palette]
   );
@@ -117,37 +117,41 @@ export function Sidebar({ children }: { children?: ReactNode }) {
             orientation="vertical"
             sx={{ width: 64 }}
           >
-            {values(pages).flatMap((c, i, cx) => [
-              !!i && c.color !== cx[i - 1].color && (
-                <Divider sx={{ mx: 2, my: 1 }} />
-              ),
-              <Tab
-                onClick={() => (tab === c.id ? setOpen(false) : setOpen(true))}
-                key={c.id}
-                value={c.id}
-                sx={{
-                  minWidth: 0,
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-                label={
-                  <Tooltip key={c.id} title={c.name} placement="right">
-                    <Box
-                      sx={{
-                        alignItems: "center",
-                        display: "flex",
-                        "> svg > path": {
-                          strokeWidth: 0.5,
-                          stroke: bgcolor,
-                        },
-                      }}
-                    >
-                      {c.icon}
-                    </Box>
-                  </Tooltip>
-                }
-              />,
-            ])}
+            {values(pages)
+              .filter((c) => c.showInSidebar)
+              .flatMap((c, i, cx) => [
+                !!i && c.color !== cx[i - 1].color && (
+                  <Divider sx={{ mx: 2, my: 1 }} />
+                ),
+                <Tab
+                  onClick={() =>
+                    tab === c.id ? setOpen(false) : setOpen(true)
+                  }
+                  key={c.id}
+                  value={c.id}
+                  sx={{
+                    minWidth: 0,
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                  label={
+                    <Tooltip key={c.id} title={c.name} placement="right">
+                      <Box
+                        sx={{
+                          alignItems: "center",
+                          display: "flex",
+                          "> svg > path": {
+                            strokeWidth: 0.5,
+                            stroke: bgcolor,
+                          },
+                        }}
+                      >
+                        {c.icon}
+                      </Box>
+                    </Tooltip>
+                  }
+                />,
+              ])}
           </TabList>
         </Stack>
         <Box sx={{ flex: 1 }}>

diff --git a/client/src/pages/PageMeta.tsx b/client/src/pages/PageMeta.tsx
@@ -15,4 +15,5 @@ export type PageMeta = {
   description?: string;
   content: (props: PageContentProps) => ReactNode;
   allowFullscreen?: boolean;
+  showInSidebar?: boolean;
 };
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
@@ -28,6 +28,7 @@ export const pages: Dictionary<PageMeta> = {
     icon: <RocketIcon />,
     content: ExplorePage,
     allowFullscreen: true,
+    showInSidebar: true,
   },
   viewport: {
     id: "viewport",
@@ -82,6 +83,7 @@ export const pages: Dictionary<PageMeta> = {
     icon: <LogsIcon />,
     content: InfoPage,
     allowFullscreen: true,
+    showInSidebar: true,
   },
   settings: {
     id: "settings",
@@ -91,6 +93,7 @@ export const pages: Dictionary<PageMeta> = {
     icon: <SettingsIcon />,
     content: SettingsPage,
     allowFullscreen: true,
+    showInSidebar: true,
   },
   // about: {
   //   id: "about",