PKPD-30 collapsible sidebar

frontend-v2/src/App.css

@@ -26,6 +26,28 @@
   color: rgb(112, 76, 182);
 }
 
+@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;
+}
+
 @keyframes App-logo-float {
   0% {
     transform: translateY(0);

frontend-v2/src/App.tsx

@@ -16,6 +16,7 @@ import "react-toastify/dist/ReactToastify.css";
 
 import { SimulationContext } from "./contexts/SimulationContext";
 import { SimulateResponse } from "./app/backendApi";
+import { CollapsibleSidebarProvider } from "./shared/contexts/CollapsibleSidebarContext";
 
 export type TimeInterval = {
   start: number;
@@ -80,8 +81,10 @@ function App() {
     <SimulationContext.Provider value={simulationContext}>
       {isAuth ? (
         <>
-          <Sidebar />
-          <ToastContainer />
+          <CollapsibleSidebarProvider>
+            <Sidebar />
+            <ToastContainer />
+          </CollapsibleSidebarProvider>
         </>
       ) : (
         <Login onLogin={onLogin} isLoading={false} errorMessage={error} />

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.tsx

@@ -42,8 +42,13 @@ 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 { useCollapsibleSidebar } from "../../shared/contexts/CollapsibleSidebarContext";
+import '../../App.css'
 
-const drawerWidth = 240;
+const drawerExpandedWidth = 240;
+const drawerCollapsedWidth = 50;
 
 export default function Sidebar() {
   const dispatch = useAppDispatch();
@@ -149,6 +154,8 @@ export default function Sidebar() {
     setMobileOpen(!mobileOpen);
   };
 
+  const { onCollapse, onExpand, setHasSimulationsExpandedChanged, isExpanded, animationClasses } = useCollapsibleSidebar(); 
+
   const pageKeys = Object.keys(PageName);
   const pageValues = Object.values(PageName);
 
@@ -161,6 +168,9 @@ export default function Sidebar() {
 
   const handlePageClick = (key: string) => () => {
     const chosenPage = PageName[key as keyof typeof PageName];
+    if (key !== PageName.SIMULATIONS) {
+      setHasSimulationsExpandedChanged(false);
+    }
     dispatch(setPage(chosenPage));
 
     switch (chosenPage) {
@@ -214,7 +224,7 @@ export default function Sidebar() {
     (step) => step !== projectsPage && step !== helpPage,
   );
 
-  const drawer = (
+  const drawerMobile = (
     <div style={{ marginTop: "7rem" }}>
       <List>
         <ListItem key={projectsPage?.key} disablePadding>
@@ -282,14 +292,100 @@ export default function Sidebar() {
     </div>
   );
 
+  const drawer = (
+    <div style={{ marginTop: "7rem", transition: "all .35s linear" }}>
+      {isExpanded ? (
+        <IconButton aria-label='collapse-navigation' onClick={onCollapse} sx={{ marginLeft: ".5rem" }}>
+          <ArrowBackIcon />
+        </IconButton>
+      ) : (
+        <IconButton aria-label='expand-navigation' 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"
+              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,8 +464,13 @@ export default function Sidebar() {
       </AppBar>
       <Box
         component="nav"
-        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
-        aria-label="mailbox folders"
+        sx={{
+          width: {
+            sm: isExpanded ? drawerExpandedWidth : drawerCollapsedWidth,
+          },
+          flexShrink: { sm: 0 },
+        }}
+        aria-label="navigation"
       >
         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
         <Drawer
@@ -383,19 +484,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,
+              width: isExpanded ? drawerExpandedWidth : drawerCollapsedWidth,
+              transition: "width .35s linear",
+              overflowX: "hidden",
             },
           }}
           open
@@ -407,23 +510,25 @@ export default function Sidebar() {
         <Box
           component="nav"
           sx={{
-            width: { sm: drawerWidth },
+            width: {
+              sm: drawerExpandedWidth,
+            },
             flexShrink: { sm: 0 },
             height: "100vh",
-            backgroundColor: '#FBFBFA',
-            borderRight: '1px solid #DBD6D1'
           }}
-          aria-label="mailbox folders"
-          id='simulations-portal'
+          aria-label="simulations-sidebar"
+          id="simulations-portal"
         />
       )}
       <Box
         component="main"
+        id="main-content"
+        className={animationClasses}
         sx={{
           flexGrow: 1,
           p: 3,
-          width: { sm: `calc(100% - ${drawerWidth}px)` },
-          paddingBottom: 0
+          overflowX: "hidden",
+          paddingBottom: 0,
         }}
       >
         <Toolbar />

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

@@ -37,38 +37,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 };
 
@@ -464,7 +432,7 @@ const Simulations: FC = () => {
       <Box
         sx={{
           maxHeight: "80vh",
-          maxWidth: getTableHeight({ steps: PlotsWidthSteps }),
+          maxWidth: '100%',
           overflow: "auto",
         }}
       >

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

@@ -17,7 +17,7 @@ import UnitField from "../../components/UnitField";
 import SimulationSliderView from "./SimulationSliderView";
 import HelpButton from "../../components/HelpButton";
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { getTableHeight } from "../../shared/calculateTableHeights";
 import {
   Simulation,
@@ -28,6 +28,8 @@ import {
   UnitRead,
 } from "../../app/backendApi";
 import { Control } from "react-hook-form";
+import { useCollapsibleSidebar } from "../../shared/contexts/CollapsibleSidebarContext";
+import '../../App.css'
 
 type SimulationsSidePanelType = {
   portalId: string;
@@ -143,17 +145,21 @@ export const SimulationsSidePanel = ({
   const [collapseParameters, setCollapseParameters] = useState(true);
   const [collapseReference, setCollapseReference] = useState(true);
   const [collapseLegend, setCollapseLegend] = useState(true);
+  const { simulationAnimationClasses } = useCollapsibleSidebar(); 
 
   if (!portalRoot) return null;
 
   return ReactDOM.createPortal(
     <Box
+      className={simulationAnimationClasses}
       sx={{
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
         height: "100%",
         paddingBottom: "1rem",
+        backgroundColor: "#FBFBFA",
+        borderRight: "1px solid #DBD6D1",
       }}
     >
       <Box