Correct login screen issue on mobile devices

Author: KeenWarrior

src/layouts/MainLayout/TopBar/Account.js

@@ -11,7 +11,8 @@ import {
   Box,
   Avatar,
   Menu,
-  MenuItem
+  MenuItem,
+  Hidden
 } from '@material-ui/core';
 import authService from 'src/services/authService';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
@@ -76,7 +77,7 @@ function Account() {
             alignItems="center"
             onClick={handleOpenMenu}
             style={{
-              cursor: "pointer"
+              cursor: 'pointer'
             }}
           >
             <Avatar
@@ -104,16 +105,17 @@ function Account() {
                 />
               )}
             </Avatar>
-
-            <Typography variant="h6">
-              <Box
-                style={{
-                  color: '#A60000'
-                }}
-              >
-                {`Hello ${truncate(user.displayName)}`}
-              </Box>
-            </Typography>
+            <Hidden smDown>
+              <Typography variant="h6">
+                <Box
+                  style={{
+                    color: '#A60000'
+                  }}
+                >
+                  {`Hello ${truncate(user.displayName)}`}
+                </Box>
+              </Typography>
+            </Hidden>
           </Box>
         ) : (
           <Button
@@ -124,7 +126,7 @@ function Account() {
               textTransform: 'capitalize'
             }}
           >
-            <Typography variant="h6">Login / Sign Up</Typography>
+            <Typography variant="h6">Login</Typography>
           </Button>
         )}
 

src/layouts/MainLayout/TopBar/index.js

@@ -65,9 +65,9 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
   const navItems = [
     { title: 'Campus Leaders', link: '/campusLeaders' },
     { title: 'Events', link: '/events' },
-    { title: 'Courses', link: '/courses' },
+    { title: 'Courses', link: '/courses' }
     // { title: 'Team', link: '/team' }
-  ]
+  ];
 
   const list = () => (
     <div
@@ -136,22 +136,33 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
         <Hidden smDown>
           <Box ml={2} flexGrow={1} />
           {navItems.map((item, index) => (
-            <Item active={item.link === pathname} title={item.title} link={item.link} />
-          ))};
+            <Item
+              active={item.link === pathname}
+              title={item.title}
+              link={item.link}
+            />
+          ))}
+          ;
           <Box ml={2} flexGrow={0.05} />
           <Box ml={2}>
             <OpenSource />
           </Box>
           <Box ml={2} flexGrow={0.05} />
         </Hidden>
         <Hidden mdUp>
-          <Box ml={8}>
+          <Box
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
+            style={{ position: 'absolute', right: '0px'}}
+          >
+            <OpenSource />
+
             <IconButton
               edge="end"
               className={classes.menuButton}
               aria-label="menu"
               onClick={toggleDrawer('right', true)}
-              style={{ position: 'absolute', right: '15px', top: '15%' }}
             >
               <MenuIcon />
             </IconButton>