show info about current user at sidebar

src/common/AppLayout/components/Sidebar/Sidebar.tsx

@@ -1,14 +1,20 @@
 import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import clsx from 'clsx';
-import useStyles from './useStyles';
 import { ROUTE } from 'config/routing';
 import { Route } from './components/Nav/types';
-
 import { useTheme } from '@material-ui/core/styles';
-import { SwipeableDrawer, DrawerProps, Toolbar } from '@material-ui/core';
+
+import {
+  SwipeableDrawer,
+  DrawerProps,
+  Toolbar,
+  Divider,
+} from '@material-ui/core';
+import useStyles from './useStyles';
 import { Dashboard as DashboardIcon } from '@material-ui/icons';
 import Nav from './components/Nav/Nav';
+import CurrentUser from './components/CurrentUser/CurrentUser';
 
 export interface Props {
   className?: string;
@@ -47,6 +53,8 @@ const Sidebar = ({ className, open, variant, onClose, onOpen }: Props) => {
     >
       <Toolbar />
       <div className={clsx(classes.root, className)}>
+        <CurrentUser />
+        <Divider />
         <Nav routes={routes} />
       </div>
     </SwipeableDrawer>

src/common/AppLayout/components/Sidebar/components/CurrentUser/CurrentUser.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useAuth } from 'libs/auth';
+
+import { Box, Typography } from '@material-ui/core';
+
+const CurrentUser = () => {
+  const { user } = useAuth();
+
+  return (
+    <Box pr={0.5} pl={0.5}>
+      <Typography variant="h6" align="center">
+        Jesteś zalogowany jako: <br /> <strong>{user?.displayName}</strong> (ID:{' '}
+        {user?.id}).
+      </Typography>
+    </Box>
+  );
+};
+
+export default CurrentUser;

src/common/AppLayout/components/Sidebar/useStyles.ts

@@ -13,6 +13,9 @@ const useStyles = makeStyles(theme => ({
     flexDirection: 'column',
     height: '100%',
     overflowY: 'auto',
+    '& > *:not(:last-child)': {
+      margin: theme.spacing(1, 0),
+    },
   },
 }));
 export default useStyles;