#4086 Adding division page

src/frontend/src/layouts/Sidebar/NavPageLink.tsx

@@ -13,6 +13,7 @@ export interface NavPageLinkItemProps extends LinkItem {
   onSubmenuHover?: () => void;
   onSubmenuCollapse?: () => void;
   isSubItem?: boolean;
+  isClickableWithSubitems?: boolean;
 }
 
 const NavPageLink: React.FC<NavPageLinkItemProps> = ({
@@ -23,7 +24,8 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({
   isSubmenuOpen,
   onSubmenuHover,
   onSubmenuCollapse,
-  isSubItem = false
+  isSubItem = false,
+  isClickableWithSubitems
 }) => {
   const theme = useTheme();
 
@@ -41,7 +43,7 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({
       </>
     );
 
-    if (subItems) {
+    if (subItems && !isClickableWithSubitems) {
       return (
         <Box
           onMouseEnter={onSubmenuHover}
@@ -68,6 +70,7 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({
       <NavLink
         to={route}
         exact={route === routes.HOME}
+        onMouseEnter={subItems && isClickableWithSubitems ? onSubmenuHover : undefined}
         onClick={onSubmenuCollapse}
         style={(isActive) => ({
           textDecoration: 'none',

src/frontend/src/layouts/Sidebar/Sidebar.tsx

@@ -148,7 +148,8 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
           name: 'Divisions',
           icon: <GroupIcon />,
           route: routes.TEAMS,
-          subItems: allTeams
+          subItems: allTeams,
+          isClickableWithSubitems: true
         },
     !onGuestHomePage && {
       name: 'Calendar',

src/frontend/src/pages/GuestDivisionsPage/GuestDivisionPage.tsx

@@ -0,0 +1,57 @@
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
+import { Box, useMediaQuery } from '@mui/system';
+import PageLayout from '../../components/PageLayout';
+import { useAllTeamTypes } from '../../hooks/team-types.hooks';
+import { Typography } from '@mui/material';
+import GuestTeamCard from './GuestTeamCard';
+
+const GuestDivisionPage: React.FC = () => {
+  const isMobilePortrait = useMediaQuery('(max-width:480px)');
+  const {
+    isLoading: teamTypesIsLoading,
+    isError: teamTypesIsError,
+    data: allTeamTypes,
+    error: teamTypesError
+  } = useAllTeamTypes();
+
+  if (teamTypesIsError) return <ErrorPage message={teamTypesError.message} />;
+  if (teamTypesIsLoading || !allTeamTypes) return <LoadingIndicator />;
+
+  if (allTeamTypes.length === 0) {
+    return (
+      <PageLayout title={'Divisions'}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '70vh'
+          }}
+        >
+          <Typography>No Teams Found!</Typography>
+        </Box>
+      </PageLayout>
+    );
+  }
+
+  return (
+    <PageLayout title={'Divisions'}>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: isMobilePortrait ? '1fr' : 'repeat(3, 1fr)',
+          gap: isMobilePortrait ? 2 : 3,
+          width: '100%',
+          px: isMobilePortrait ? 1 : 0
+        }}
+      >
+        {allTeamTypes.map((teamType) => (
+          <GuestTeamCard key={teamType.teamTypeId} teamType={teamType} />
+        ))}
+      </Box>
+    </PageLayout>
+  );
+};
+
+export default GuestDivisionPage;

src/frontend/src/pages/GuestDivisionsPage/GuestTeamCard.tsx

@@ -0,0 +1,73 @@
+import { Box, Card, CardContent, Stack, Typography, useTheme, Link } from '@mui/material';
+import { TeamType } from 'shared';
+import { NERButton } from '../../components/NERButton';
+import { Link as RouterLink } from 'react-router-dom';
+
+interface GuestTeamCardProps {
+  teamType: TeamType;
+}
+
+const GuestTeamCard: React.FC<GuestTeamCardProps> = ({ teamType }) => {
+  const theme = useTheme();
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        background: theme.palette.background.paper,
+        borderRadius: 2
+      }}
+    >
+      <CardContent sx={{ padding: 2, display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+        <Stack direction="row" justifyContent="space-between">
+          <Box width={'100%'}>
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+              <Typography
+                fontWeight={'regular'}
+                variant="h5"
+                sx={{ marginBottom: '0.2rem', fontSize: { xs: '1.15rem', sm: '1.5rem' }, flexGrow: 1 }}
+              >
+                {teamType.name}
+              </Typography>
+            </Box>
+          </Box>
+        </Stack>
+        <Typography
+          sx={{
+            fontSize: 15,
+            lineHeight: 1.4,
+            flexGrow: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 3,
+            WebkitBoxOrient: 'vertical'
+          }}
+        >
+          {teamType.description}
+        </Typography>
+        <Link component={RouterLink} to={`/teams/${teamType.teamTypeId}`} sx={{ width: '100%', textDecoration: 'none' }}>
+          <NERButton
+            fullWidth
+            sx={{
+              marginTop: 2,
+              backgroundColor: theme.palette.error.main,
+              color: theme.palette.error.contrastText,
+              '&:hover': {
+                backgroundColor: theme.palette.error.dark
+              }
+            }}
+          >
+            Learn more
+          </NERButton>
+        </Link>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default GuestTeamCard;

src/frontend/src/pages/GuestDivisionPage/GuestTeamPage.tsx → src/frontend/src/pages/GuestTeamsPage/GuestTeamPage.tsx

@@ -30,7 +30,7 @@ const GuestTeamPage: React.FC<GuestTeamPageProps> = ({ teamTypeId }) => {
 
   if (teams.length === 0) {
     return (
-      <PageLayout title={teamTypeName}>
+      <PageLayout title={teamTypeName} previousPages={[{ name: 'Divisions', route: '/teams' }]}>
         <Box
           sx={{
             display: 'flex',
@@ -46,7 +46,7 @@ const GuestTeamPage: React.FC<GuestTeamPageProps> = ({ teamTypeId }) => {
   }
 
   return (
-    <PageLayout title={teamTypeName}>
+    <PageLayout title={teamTypeName} previousPages={[{ name: 'Divisions', route: '/teams' }]}>
       <Box
         sx={{
           display: 'grid',

src/frontend/src/pages/TeamsPage/Teams.tsx

@@ -11,7 +11,8 @@ import { useParams } from 'react-router-dom';
 import { useCurrentUser } from '../../hooks/users.hooks';
 import { isGuest } from 'shared';
 import { useAllTeamTypes } from '../../hooks/team-types.hooks';
-import GuestTeamPage from '../GuestDivisionPage/GuestTeamPage';
+import GuestTeamPage from '../GuestTeamsPage/GuestTeamPage';
+import GuestDivisionPage from '../GuestDivisionsPage/GuestDivisionPage';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
 
@@ -29,11 +30,17 @@ const TeamOrDivisionPage: React.FC = () => {
   return <TeamSpecificPage />;
 };
 
+const GuestOrMemberTeamsPage: React.FC = () => {
+  const user = useCurrentUser();
+  if (isGuest(user.role)) return <GuestDivisionPage />;
+  return <TeamsPage />;
+};
+
 const Teams: React.FC = () => {
   return (
     <Switch>
       <Route path={routes.TEAMS_BY_ID} component={TeamOrDivisionPage} />
-      <Route path={routes.TEAMS} component={TeamsPage} />
+      <Route path={routes.TEAMS} component={GuestOrMemberTeamsPage} />
     </Switch>
   );
 };