Merge pull request #1549 from Northeastern-Electric-Racing/1480-shrinking-title-on-mobile-screens

#1480: Shortened title on smaller screens

Author: RChandler234

src/frontend/src/layouts/NavTopBar/NavTopBar.tsx

@@ -15,19 +15,27 @@ import { LayoutProps } from '../LayoutProps';
 import { IconButton } from '@mui/material';
 import { GridMenuIcon } from '@mui/x-data-grid';
 import { useCurrentUser } from '../../hooks/users.hooks';
+import { useEffect, useState } from 'react';
 
-const textColor = 'white';
-const background = '#ef4345';
+const TEXT_COLOR = 'white';
+const BACKGROUND = '#ef4345';
+const MOBILE_WIDTH_THRESHOLD = 550;
 
 interface NavTopBarProps extends LayoutProps {
   handleDrawerOpen: () => void;
 }
 
 const NavTopBar: React.FC<NavTopBarProps> = ({ open, handleDrawerOpen }) => {
+  const [width, setWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      setWidth(window.innerWidth);
+    });
+  });
   const user = useCurrentUser();
   return (
     <NERAppBar position="fixed" open={open}>
-      <Toolbar disableGutters sx={{ height: 68, px: 1, background, color: textColor }}>
+      <Toolbar disableGutters sx={{ height: 68, px: 1, BACKGROUND, color: TEXT_COLOR }}>
         <IconButton
           color="inherit"
           aria-label="open drawer"
@@ -49,16 +57,16 @@ const NavTopBar: React.FC<NavTopBarProps> = ({ open, handleDrawerOpen }) => {
                 alt="Northeastern Electric Racing Logo"
                 src="/NER-Logo-App-Icon.png"
               />
-              <Typography variant="h4" fontSize={30} component="div" sx={{ flexGrow: 1, paddingLeft: 2, color: textColor }}>
-                FinishLine by NER
+              <Typography variant="h4" fontSize={30} component="div" sx={{ flexGrow: 1, paddingLeft: 2, color: TEXT_COLOR }}>
+                {width > MOBILE_WIDTH_THRESHOLD ? 'FinishLine by NER' : 'FinishLine'}
               </Typography>
             </Box>
           </Link>
         </Box>
         <Typography
           variant="body1"
           sx={{
-            color: textColor,
+            color: TEXT_COLOR,
             '@media (max-width: 600px)': {
               display: 'none' // Hide the text on screens with width less than 600 pixels
             }