Show app version on sidebar

Signed-off-by: Diogo Correia <[email protected]>

app/components/TopAppBar/Sidebar.tsx

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { DRAWER_WIDTH } from '../../constants/drawer.json';
 import { mainListItems, secondaryListItems } from './listItems';
+import VersionIndicator from './versionIndicator';
 
 const useStyles = makeStyles((theme) => ({
   toolbarIcon: {
@@ -27,6 +28,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
+    overflow: 'hidden',
   },
   drawerPaperClose: {
     overflowX: 'hidden',
@@ -39,6 +41,9 @@ const useStyles = makeStyles((theme) => ({
       width: theme.spacing(9),
     },
   },
+  grow: {
+    flexGrow: 1,
+  },
 }));
 
 type Props = {
@@ -66,6 +71,13 @@ export default function Sidebar({ open, handleDrawerClose }: Props) {
       <List>{mainListItems}</List>
       <Divider />
       <List>{secondaryListItems}</List>
+      <div className={classes.grow} />
+      {open && (
+        <>
+          <Divider />
+          <VersionIndicator />
+        </>
+      )}
     </Drawer>
   );
 }

app/components/TopAppBar/VersionIndicator.tsx

@@ -0,0 +1,24 @@
+import { makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+
+const { app } = require('electron').remote;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    margin: theme.spacing(1),
+  },
+}));
+
+export default function VersionIndicator() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <Typography variant="body2" color="textSecondary">
+        {`Versão ${app.getVersion()}`}
+      </Typography>
+      <Typography variant="caption" color="textSecondary">
+        Designed by Diogo Correia
+      </Typography>
+    </div>
+  );
+}