Kinzi sticky navbar

web/src/app/components/AuthForms/LoginForm.tsx

@@ -1,8 +1,32 @@
 import { Flex, TextInput, PasswordInput, Checkbox, Button, Title, Text } from '@mantine/core';
 import classes from './authform.module.css';
 import { NavLink } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { setUserType } from '../../features/user/userSlice';
+import { toast } from 'react-toastify';
 
 export function LoginForm() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const handleLoginAs = (userType: 'student' | 'sponsor' | 'alumni' | 'admin') => {
+    // Simulate successful login (to be replaced with the actual authentication logic)
+    const mockToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
+    localStorage.setItem('accessToken', mockToken);
+    // If authentication is successful: Update Redux store with userType
+    dispatch(setUserType(userType));
+    // Redirect to the appropriate profile page based on userType
+    const profilePath = {
+      student: '/profile/student',
+      sponsor: '/profile/sponsor',
+      alumni: '/profile/alumni',
+      admin: '/profile/admin',
+    }[userType];
+    toast.success('Logged in as ' + userType);
+    navigate(profilePath, { replace: true });
+  };
+
   return (
     <Flex
       gap="xl"
@@ -22,7 +46,20 @@ export function LoginForm() {
         <Button fullWidth mt="xl" mb="md" size="lg">
           Login
         </Button>
-
+        <Flex justify="center" gap="md" mt="md" mr="md">
+          <Button variant="filled" color="green" onClick={() => handleLoginAs('student')}>
+            Student
+          </Button>
+          <Button variant="filled" color="blue" onClick={() => handleLoginAs('sponsor')}>
+            Sponsor
+          </Button>
+          <Button variant="filled" color="violet" onClick={() => handleLoginAs('alumni')}>
+            Alumni
+          </Button>
+          <Button variant="filled" color="red" onClick={() => handleLoginAs('admin')}>
+            Admin
+          </Button>
+        </Flex>
         <Text ta="center" mt="xl">
           Don&apos;t have an account?{' '}
           <NavLink to="/" className={classes.link}>

web/src/app/components/Navbar/Navbar.module.css

@@ -1,5 +1,5 @@
 .Navbar {
-  position: absolute;
+  position: fixed;
   z-index: 2;
   width: 100vw;
   background-color: rgba(000, 000, 000, 0.5);

web/src/app/components/Navbar/Navbar.tsx

@@ -74,14 +74,17 @@ function Navbar() {
   const [opened, { toggle, open, close }] = useDisclosure();
   // Use a media query to determine small screen size for the collapsible menu
   const [isMobile, setIsMobile] = useState(false);
+
   useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth <= 768);
     };
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
 
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   return (
     <>
       <Flex

web/src/app/pages/Login.page.tsx

@@ -1,33 +1,11 @@
-import { useNavigate } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
-import { setUserType } from '../features/user/userSlice';
-import { toast } from 'react-toastify';
 import { LoginForm } from '../components/AuthForms/LoginForm';
 import { LoginSideImage } from '../components/LoginSideImage/LoginSideImage';
-import { Grid, GridCol } from '@mantine/core';
+import { Grid } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 
 export function Login() {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
-  const handleLoginAs = (userType: 'student' | 'sponsor' | 'alumni' | 'admin') => {
-    // Simulate successful login (to be replaced with the actual authentication logic)
-    const mockToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
-    localStorage.setItem('accessToken', mockToken);
-    // If authentication is successful: Update Redux store with userType
-    dispatch(setUserType(userType));
-    // Redirect to the appropriate profile page based on userType
-    const profilePath = {
-      student: '/profile/student',
-      sponsor: '/profile/sponsor',
-      alumni: '/profile/alumni',
-      admin: '/profile/admin',
-    }[userType];
-    toast.success('Logged in as ' + userType);
-    navigate(profilePath, { replace: true });
-  };
   return (
     <Grid>
       {isSmallScreen ? (