#66 add version of app to menu

xchem · Mar 2, 2020 · 7fbc0ad · 7fbc0ad
1 parent ffe2a90
commit 7fbc0ad
Showing 1 changed file with 54 additions and 38 deletions.
diff --git a/js/components/header/index.js b/js/components/header/index.js
@@ -24,7 +24,6 @@ import {
   Person,
   Home,
   Storage,
-  ReportProblem,
   SupervisorAccount,
   Menu as MenuIcon,
   Work
@@ -40,8 +39,8 @@ import { useHistory } from 'react-router-dom';
 import { IssueReport } from '../userFeedback/issueReport';
 import { IdeaReport } from '../userFeedback/ideaReport';
 import { FundersModal } from '../funders/fundersModal';
-
-const uuidv4 = require('uuid/v4');
+// eslint-disable-next-line import/extensions
+import { version } from '../../../package.json';
 
 const useStyles = makeStyles(theme => ({
   padding: {
@@ -79,6 +78,10 @@ const useStyles = makeStyles(theme => ({
   },
   clickableImage: {
     cursor: 'pointer'
+  },
+  inheritHeight: {
+    height: 'inherit',
+    paddingBottom: theme.spacing(1)
   }
 }));
 
@@ -263,46 +266,59 @@ export default memo(
             setOpenMenu(false);
           }}
         >
-          <Grid container direction="column" justify="center" alignItems="center" className={classes.drawerHeader}>
+          <Grid
+            container
+            direction="column"
+            justify="space-between"
+            alignItems="center"
+            className={classes.inheritHeight}
+          >
             <Grid item>
-              <Avatar className={classes.padding}>
-                <Person />
-              </Avatar>
+              <Grid container direction="column" justify="center" alignItems="center" className={classes.drawerHeader}>
+                <Grid item>
+                  <Avatar className={classes.padding}>
+                    <Person />
+                  </Avatar>
+                </Grid>
+                <Grid item>
+                  <Typography variant="subtitle2">{username}</Typography>
+                </Grid>
+                <Grid item>{prodSite}</Grid>
+              </Grid>
+
+              <Divider />
+              <ListItem button onClick={() => history.push(URLS.landing)}>
+                <ListItemIcon>
+                  <Home />
+                </ListItemIcon>
+                <ListItemText primary="Home" />
+              </ListItem>
+
+              <ListItem button onClick={() => history.push(URLS.sessions)}>
+                <ListItemIcon>
+                  <Storage />
+                </ListItemIcon>
+                <ListItemText primary="Sessions" />
+              </ListItem>
+              <ListItem button onClick={() => history.push(URLS.management)}>
+                <ListItemIcon>
+                  <Work />
+                </ListItemIcon>
+                <ListItemText primary="Management" />
+              </ListItem>
+              <ListItem button onClick={() => setOpenFunders(true)}>
+                <ListItemIcon>
+                  <SupervisorAccount />
+                </ListItemIcon>
+                <ListItemText primary="Supported by" />
+              </ListItem>
+              <Divider />
+              {authListItem}
             </Grid>
             <Grid item>
-              <Typography variant="subtitle2">{username}</Typography>
+              <Typography variant="body2">Fragalysis version {version}</Typography>
             </Grid>
-            <Grid item>{prodSite}</Grid>
           </Grid>
-
-          <Divider />
-          <ListItem button onClick={() => history.push(URLS.landing)}>
-            <ListItemIcon>
-              <Home />
-            </ListItemIcon>
-            <ListItemText primary="Home" />
-          </ListItem>
-
-          <ListItem button onClick={() => history.push(URLS.sessions)}>
-            <ListItemIcon>
-              <Storage />
-            </ListItemIcon>
-            <ListItemText primary="Sessions" />
-          </ListItem>
-          <ListItem button onClick={() => history.push(URLS.management)}>
-            <ListItemIcon>
-              <Work />
-            </ListItemIcon>
-            <ListItemText primary="Management" />
-          </ListItem>
-          <ListItem button onClick={() => setOpenFunders(true)}>
-            <ListItemIcon>
-              <SupervisorAccount />
-            </ListItemIcon>
-            <ListItemText primary="Supported by" />
-          </ListItem>
-          <Divider />
-          {authListItem}
         </Drawer>
         <Box paddingTop={`${headerHeight}px`} width="100%">
           {(isLoading === true || disableUserInteraction === true) && (