PKPD-30 collapsible sidebar

frontend-v2/src/features/main/MainContent.tsx

@@ -28,6 +28,7 @@ function TabPanel(props: TabPanelProps) {
       hidden={value !== index}
       id={`simple-tabpanel-${index}`}
       aria-labelledby={`simple-tab-${index}`}
+      style={{ width: '100%'}}
       {...other}
     >
       <Box sx={{ p: 3, zIndex: value === index ? 1000 : 1, paddingBottom: 0 }}>{children}</Box>

frontend-v2/src/features/main/Sidebar.css

@@ -0,0 +1,21 @@
+@keyframes onExpand {
+    0%   {transform: translate(-190px); overflow-X: 'visible';}
+    100% {transform: translate(0); overflow-x: 'hidden';}
+  }
+
+  @keyframes onCollapse {
+    0%   {transform: translate(190px); overflow-X: 'visible';}
+    100% {transform: translate(0); overflow-x: 'hidden';}
+  }
+
+.on-expand {
+    animation-name: onExpand;
+    animation-duration: .35s;
+    animation-timing-function: linear;
+}
+
+.on-collapse {
+    animation-name: onCollapse;
+    animation-duration: .35s;
+    animation-timing-function: linear;
+}

frontend-v2/src/features/main/Sidebar.tsx

@@ -42,8 +42,12 @@ import ContactSupportIcon from "@mui/icons-material/ContactSupport";
 import TableViewIcon from "@mui/icons-material/TableView";
 import "@fontsource/comfortaa"; // Defaults to weight 400
 import useSubjectGroups from "../../hooks/useSubjectGroups";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import "./Sidebar.css";
 
-const drawerWidth = 240;
+const drawerExpandedWidth = 240;
+const drawerCollapsedWidth = 50;
 
 export default function Sidebar() {
   const dispatch = useAppDispatch();
@@ -214,7 +218,34 @@ export default function Sidebar() {
     (step) => step !== projectsPage && step !== helpPage,
   );
 
-  const drawer = (
+  const [isExpanded, setIsExpanded] = useState(true);
+  const onCollapse = () => {
+    const element = document.getElementById("main-content");
+    element?.classList.remove("on-expand");
+    element?.classList.add("on-collapse");
+
+    const simulationsNav = document.getElementById("simulations-content");
+    if (simulationsNav) {
+      simulationsNav?.classList.remove("on-expand");
+      simulationsNav?.classList.add("on-collapse");
+    }
+    setIsExpanded(false);
+  };
+
+  const onExpand = () => {
+    const element = document.getElementById("main-content");
+    element?.classList.remove("on-collapse");
+    element?.classList.add("on-expand");
+
+    const simulationsNav = document.getElementById("simulations-content");
+    if (simulationsNav) {
+      simulationsNav?.classList.remove("on-collapse");
+      simulationsNav?.classList.add("on-expand");
+    }
+    setIsExpanded(true);
+  };
+
+  const drawerMobile = (
     <div style={{ marginTop: "7rem" }}>
       <List>
         <ListItem key={projectsPage?.key} disablePadding>
@@ -282,14 +313,102 @@ export default function Sidebar() {
     </div>
   );
 
+  const drawer = (
+    <div style={{ marginTop: "7rem", transition: "all .35s linear" }}>
+      {isExpanded ? (
+        <IconButton onClick={onCollapse} sx={{ marginLeft: ".5rem" }}>
+          <ArrowBackIcon />
+        </IconButton>
+      ) : (
+        <IconButton onClick={onExpand} sx={{ marginLeft: ".5rem" }}>
+          <ArrowForwardIcon />
+        </IconButton>
+      )}
+
+      <List>
+        <ListItem key={projectsPage?.key} disablePadding>
+          <ListItemButton
+            onClick={handlePageClick(projectsPage?.key)}
+            disabled={isPageDisabled(projectsPage?.key)}
+            disableRipple={true}
+            selected={isPageSelected(projectsPage?.key)}
+          >
+            <ListItemIcon>
+              {projectsPage?.value in errorComponents
+                ? errorComponents[projectsPage?.value]
+                : icons[projectsPage?.value]}
+            </ListItemIcon>
+            <ListItemText primary={projectsPage?.value} />
+          </ListItemButton>
+        </ListItem>
+      </List>
+      {projectIdOrZero !== 0 && (
+        <>
+          {isExpanded ? (
+            <Typography
+              variant="subtitle1"
+              noWrap
+              component="div"
+              sx={{
+                flexGrow: 1,
+                color: "gray",
+                paddingLeft: "1rem",
+                paddingTop: "1rem",
+              }}
+            >
+              STEPS
+            </Typography>
+          ) : (
+            <Divider sx={{ paddingTop: "21px", marginBottom: "22px" }} />
+          )}
+
+          <List>
+            {steps.map(({ key, value }) => (
+              <ListItem key={key} disablePadding>
+                <ListItemButton
+                  onClick={handlePageClick(key)}
+                  disabled={isPageDisabled(key)}
+                  disableRipple={true}
+                  selected={isPageSelected(key)}
+                >
+                  <ListItemIcon>
+                    {value in errorComponents
+                      ? errorComponents[value]
+                      : icons[value]}
+                  </ListItemIcon>
+                  <ListItemText sx={{ textWrap: "nowrap" }} primary={value} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </>
+      )}
+      {isExpanded && (
+        <Typography
+          sx={{
+            position: "absolute",
+            bottom: 0,
+            margin: ".5rem",
+            color: "gray",
+            textWrap: "nowrap",
+          }}
+        >
+          pkpdx version {import.meta.env.VITE_APP_VERSION?.slice(0, 7) || "dev"}
+        </Typography>
+      )}
+    </div>
+  );
+
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box sx={{ display: "flex", overflowX: "hidden" }}>
       <CssBaseline />
       <AppBar
         position="fixed"
         sx={{
           width: { sm: `100%` },
-          ml: { sm: `${drawerWidth}px` },
+          ml: {
+            sm: `${isExpanded ? drawerExpandedWidth : drawerCollapsedWidth}px`,
+          },
           zIndex: 9998,
           backgroundColor: "white",
         }}
@@ -368,7 +487,12 @@ export default function Sidebar() {
       </AppBar>
       <Box
         component="nav"
-        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+        sx={{
+          width: {
+            sm: isExpanded ? drawerExpandedWidth : drawerCollapsedWidth,
+          },
+          flexShrink: { sm: 0 },
+        }}
         aria-label="mailbox folders"
       >
         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
@@ -383,19 +507,21 @@ export default function Sidebar() {
             display: { xs: "block", sm: "none" },
             "& .MuiDrawer-paper": {
               boxSizing: "border-box",
-              width: drawerWidth,
+              width: drawerExpandedWidth,
             },
           }}
         >
-          {drawer}
+          {drawerMobile}
         </Drawer>
         <Drawer
           variant="permanent"
           sx={{
             display: { xs: "none", sm: "block" },
             "& .MuiDrawer-paper": {
               boxSizing: "border-box",
-              width: drawerWidth,
+              transition: "all .35s linear",
+              width: isExpanded ? drawerExpandedWidth : drawerCollapsedWidth,
+              overflowX: "hidden",
             },
           }}
           open
@@ -407,23 +533,26 @@ export default function Sidebar() {
         <Box
           component="nav"
           sx={{
-            width: { sm: drawerWidth },
+            width: {
+              sm: drawerExpandedWidth,
+            },
+            transition: "all .35s linear",
             flexShrink: { sm: 0 },
             height: "100vh",
-            backgroundColor: '#FBFBFA',
-            borderRight: '1px solid #DBD6D1'
           }}
           aria-label="mailbox folders"
-          id='simulations-portal'
+          id="simulations-portal"
         />
       )}
       <Box
         component="main"
+        id="main-content"
         sx={{
           flexGrow: 1,
+          transition: "all .35s linear",
           p: 3,
-          width: { sm: `calc(100% - ${drawerWidth}px)` },
-          paddingBottom: 0
+          overflowX: "hidden",
+          paddingBottom: 0,
         }}
       >
         <Toolbar />

frontend-v2/src/features/simulation/Simulations.tsx

@@ -43,38 +43,6 @@ import { getConstVariables } from "../model/resetToSpeciesDefaults";
 import useSubjectGroups from "../../hooks/useSubjectGroups";
 import useExportSimulation from "./useExportSimulation";
 import { SimulationsSidePanel } from "./SimulationsSidePanel";
-import { getTableHeight } from "../../shared/calculateTableHeights";
-
-const PlotsWidthSteps = [
-  {
-    minHeight: "1100",
-    tableHeight: "75vw",
-  },
-  {
-    minHeight: "1000",
-    tableHeight: "72vw",
-  },
-  {
-    minHeight: "900",
-    tableHeight: "70vw",
-  },
-  {
-    minHeight: "800",
-    tableHeight: "65vw",
-  },
-  {
-    minHeight: "700",
-    tableHeight: "60vw",
-  },
-  {
-    minHeight: "600",
-    tableHeight: "55vw",
-  },
-  {
-    minHeight: "500",
-    tableHeight: "53vw",
-  },
-];
 
 type SliderValues = { [key: number]: number };
 
@@ -474,7 +442,7 @@ const Simulations: FC = () => {
       <Box
         sx={{
           maxHeight: "80vh",
-          maxWidth: getTableHeight({ steps: PlotsWidthSteps }),
+          maxWidth: '100%',
           overflow: "auto",
         }}
       >

frontend-v2/src/features/simulation/SimulationsSidePanel.tsx

@@ -141,12 +141,15 @@ export const SimulationsSidePanel = ({
 
   return ReactDOM.createPortal(
     <Box
+      id='simulations-content'
       sx={{
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
         height: "100%",
         paddingBottom: "1rem",
+        backgroundColor: "#FBFBFA",
+        borderRight: "1px solid #DBD6D1",
       }}
     >
       <Box