178 done

src/components/Navbar/Navbar.jsx

@@ -18,6 +18,8 @@ import {
   SupportIconGrey,
   SettingsIconGrey,
   LogOutIcon,
+  QRCodeIconGrey,
+  QRCodeIconBlue,
 } from '../Icons/NavbarIcons';
 import { CloseIcon } from '@chakra-ui/icons';
 
@@ -39,6 +41,7 @@ const NavbarButton = ({ buttonText, path, navigate, UnfocusedIcon, FocusedIcon }
       marginBottom="6px"
       backgroundColor={location.pathname === path ? '#D4E4F9' : 'transparent'}
       borderRadius="4px"
+      cursor="pointer"
       onClick={e => {
         e.preventDefault();
         navigate(path);
@@ -78,7 +81,7 @@ const Navbar = () => {
   // Change the paths for each button since these might change
   const homePath = '/';
   const eventsPath = '/event';
-  const archivedEventsPath = '/archived-events';
+  const archivedEventsPath = '/past-events';
   const volunteersPath = '/volunteers';
 
   // For the support and settings button at the bottom above the user
@@ -87,6 +90,8 @@ const Navbar = () => {
 
   // For logout in case it changes from /logoutv2
   const logoutPath = '/loginv2';
+  // QR code path
+  const qrPath = '/qr';
 
   // For navigating to the user profile when you click on it
   // at the bottom
@@ -110,7 +115,7 @@ const Navbar = () => {
           alignItems="start"
         >
           {/* Box containing everything above "support" */}
-          <Box display="flex" flexDir="column" width={'full'} as="a" href="/">
+          <Box display="flex" flexDir="column" width={'full'}>
             {/* Box containing the logo and role title at the top */}
             <Flex align={'center'} justifyContent={'space-between'} pr={7}>
               <Box
@@ -157,7 +162,8 @@ const Navbar = () => {
               navigate={navigate}
               FocusedIcon={HomeIconBlue}
               UnfocusedIcon={HomeIconGrey}
-            />         
+            />
+
             {/* Current Events button */}
             <NavbarButton
               buttonText={'Current Events'}
@@ -168,11 +174,11 @@ const Navbar = () => {
             />
 
             {/* Conditional rendering based on the role */}
-            {role === 'admin' && (
+            {role === 'admin' ? (
               <>
                 {/* Archived Events button */}
                 <NavbarButton
-                  buttonText={'Archived Events'}
+                  buttonText={'Past Events'}
                   path={archivedEventsPath}
                   navigate={navigate}
                   FocusedIcon={ArchivedEventsIconBlue}
@@ -188,6 +194,14 @@ const Navbar = () => {
                   UnfocusedIcon={VolunteersIconGrey}
                 />
               </>
+            ) : (
+              <NavbarButton
+                buttonText={'Scan QR'}
+                path={qrPath}
+                navigate={navigate}
+                FocusedIcon={QRCodeIconBlue}
+                UnfocusedIcon={QRCodeIconGrey}
+              />
             )}
           </Box>
           {/* Bottom of navbar, support and below */}
@@ -348,4 +362,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;