fix: standardise breadcrumbs across mentorship pages (#201)

playwright-tests/tests/home.page.spec.ts

@@ -89,9 +89,7 @@ test.describe('Validate Home Page', () => {
     await basePage.clickElement(homePage.joinAsMentorBtn);
 
     await basePage.verifyURL('/mentorship/mentor-registration');
-    await basePage.verifyPageContainsText(
-      'Welcome to the MentorRegistrationPage',
-    );
+    await basePage.verifyPageContainsText('WCC: Registration Form for Mentors');
   });
 
   test('HP-004: Volunteer section', async ({ homePage, basePage }) => {

src/__tests__/pages/MenteeRegistrationPage.test.tsx

@@ -19,7 +19,11 @@ jest.mock('next/link', () => {
 });
 
 jest.mock('next/router', () => ({
-  useRouter: () => ({ push: jest.fn(), pathname: '/' }),
+  useRouter: () => ({
+    push: jest.fn(),
+    pathname: '/mentorship/mentee-registration',
+    query: {},
+  }),
 }));
 
 // Mutable flag so individual tests can override the registration state

src/components/BreadCrumbsDynamic.tsx

@@ -18,6 +18,7 @@ export const BreadCrumbsDynamic = () => {
         margin: 0,
         width: '100%',
         mx: 'auto',
+        px: 2,
         boxSizing: 'border-box',
         maxWidth: '1128px',
       }}

src/pages/mentorship/ad-hoc-timeline.tsx

@@ -26,7 +26,7 @@ const MentorshipAdHocTimelinePage = ({ data, footer }: CombinedResponse) => {
 
   return (
     <>
-      {isMobile ? null : <BreadCrumbsDynamic />}
+      <BreadCrumbsDynamic />
       <Title title={'Ad-Hoc Mentorship Timeline'} />
       <Box sx={theme.custom.containerBox}>
         <Timeline position="right">

src/pages/mentorship/code-of-conduct.tsx

@@ -4,7 +4,6 @@ import { Box, Typography } from '@mui/material';
 import { GetServerSideProps } from 'next';
 
 import { BreadCrumbsDynamic, CodeOfConductSection } from '@components';
-import { useIsMobile } from '@utils/theme-utils';
 import { MentorshipCodeOfConductData } from '@utils/types';
 import { fetchData } from 'lib/api';
 
@@ -15,10 +14,9 @@ interface AboutUsCodeOfConductPageProps {
 const MentorshipCodeOfConductPage = ({
   mentorshipCodeOfConduct,
 }: AboutUsCodeOfConductPageProps) => {
-  const isMobile = useIsMobile();
   return (
     <>
-      {isMobile ? null : <BreadCrumbsDynamic />}
+      <BreadCrumbsDynamic />
       <Box
         sx={{
           display: 'flex',

src/pages/mentorship/faqs.tsx

@@ -3,7 +3,6 @@ import { GetServerSideProps } from 'next';
 import React from 'react';
 
 import { BreadCrumbsDynamic, FaqSection } from '@components';
-import { useIsMobile } from '@utils/theme-utils';
 import { fetchData } from 'lib/api';
 
 import { MentorshipPageData } from '../../utils/types';
@@ -21,11 +20,10 @@ const MentorshipFaqsPage = ({ data }: FaqsPageProps) => {
   } = data;
 
   const faqSections = [commonFaqSection, mentorsFaqSection, menteesFaqSection];
-  const isMobile = useIsMobile();
 
   return (
     <>
-      {isMobile ? <BreadCrumbsDynamic /> : null}
+      <BreadCrumbsDynamic />
       <Box
         sx={{
           backgroundImage: 'linear-gradient(to right, #9FCEEC, #C7E7FF)',

src/pages/mentorship/index.tsx

@@ -10,7 +10,6 @@ import {
   MentorBecomeCard,
   Title,
 } from '@components';
-import { useIsMobile } from '@utils/theme-utils';
 import {
   FooterResponse,
   MentorshipProgrammeData,
@@ -30,10 +29,9 @@ interface FeedbackSectionProps {
   feedbacks: FeedbackItem[];
 }
 const MentorshipPage = ({ mentorship, footer }: MentorshipPageProps) => {
-  const isMobile = useIsMobile();
   return (
     <>
-      {isMobile ? null : <BreadCrumbsDynamic />}
+      <BreadCrumbsDynamic />
       <Title title={mentorship.heroSection.title} />
 
       <Box

src/pages/mentorship/long-term-timeline.tsx

@@ -24,7 +24,7 @@ const MentorshipLongTermTimelinePage = ({ data, footer }: CombinedResponse) => {
   const isMobile = useIsMobile();
   return (
     <>
-      {isMobile ? null : <BreadCrumbsDynamic />}
+      <BreadCrumbsDynamic />
       <Title title={'Long-Term Mentorship Timeline'} />
       <Box sx={theme.custom.containerBox}>
         <Timeline position="right">

src/pages/mentorship/mentee-registration.tsx

@@ -2,10 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Alert,
   Box,
-  Breadcrumbs,
   Button,
   Container,
-  Link,
   Paper,
   Stack,
   Typography,
@@ -16,6 +14,7 @@ import NextLink from 'next/link';
 import React, { useEffect, useState } from 'react';
 import { FormProvider, UseFormReturn, useForm } from 'react-hook-form';
 
+import { BreadCrumbsDynamic } from '@components';
 import {
   menteeFormDefaultValues,
   menteeFormSchema,
@@ -175,24 +174,7 @@ const MenteeRegistrationPage = () => {
 
   return (
     <>
-      <Box
-        sx={{
-          backgroundColor: 'white',
-          py: 2,
-          px: { xs: 2, sm: 3, md: '157px' },
-        }}
-      >
-        <Breadcrumbs>
-          <Link href="/" color="primary" underline="always">
-            Home
-          </Link>
-          <Link href="/mentorship" color="primary" underline="always">
-            Mentorship
-          </Link>
-          <Typography color="text.primary">Mentee Registration</Typography>
-        </Breadcrumbs>
-      </Box>
-
+      <BreadCrumbsDynamic />
       <FormProvider {...formMethods}>
         <Box
           sx={{