collapse toggle button in main app bar, redux store set up to handle state change...

[arvados-workbench2.git] / src / views / main-panel / main-panel-root.tsx

diff --git a/src/views/main-panel/main-panel-root.tsx b/src/views/main-panel/main-panel-root.tsx
index 5853acb065b97acf18ea9061b5dabad77fc1bb50..2019f7bcefb484001cb9030828f55e417d60fba8 100644 (file)
--- a/src/views/main-panel/main-panel-root.tsx
+++ b/src/views/main-panel/main-panel-root.tsx
@@ -11,6 +11,7 @@ import { LoginPanel } from 'views/login-panel/login-panel';
 import { InactivePanel } from 'views/inactive-panel/inactive-panel';
 import { WorkbenchLoadingScreen } from 'views/workbench/workbench-loading-screen';
 import { MainAppBar } from 'views-components/main-app-bar/main-app-bar';
+import { toggleSidePanel } from 'store/store';
 
 type CssRules = 'root';
 
@@ -32,21 +33,26 @@ export interface MainPanelRootDataProps {
     isLinkingPath: boolean;
     siteBanner: string;
     sessionIdleTimeout: number;
+    sidePanelIsCollapsed: boolean;
 }
 
 type MainPanelRootProps = MainPanelRootDataProps & WithStyles<CssRules>;
 
 export const MainPanelRoot = withStyles(styles)(
-    ({ classes, loading, working, user, buildInfo, uuidPrefix,
-        isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout }: MainPanelRootProps) =>
-        loading
+    (props: MainPanelRootProps | any) =>{
+        const{ classes, loading, working, user, buildInfo, uuidPrefix,
+            isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout, sidePanelIsCollapsed: sidePanelIsCollapsed } = props
+            return loading
             ? <WorkbenchLoadingScreen />
             : <>
                 {isNotLinking && <MainAppBar
                     user={user}
                     buildInfo={buildInfo}
                     uuidPrefix={uuidPrefix}
-                    siteBanner={siteBanner}>
+                    siteBanner={siteBanner}
+                    sidePanelIsCollapsed={sidePanelIsCollapsed}
+                    toggleSidePanel={props.toggleSidePanel}
+                    >
                     {working
                         ? <LinearProgress color="secondary" data-cy="linear-progress" />
                         : null}
@@ -54,9 +60,10 @@ export const MainPanelRoot = withStyles(styles)(
                 <Grid container direction="column" className={classes.root}>
                     {user
                         ? (user.isActive || (!user.isActive && isLinkingPath)
-                            ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} />
-                            : <InactivePanel />)
+                        ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} sidePanelIsCollapsed={sidePanelIsCollapsed}/>
+                        : <InactivePanel />)
                         : <LoginPanel />}
                 </Grid>
             </>
+}
 );