Change the Breadcrumb names into one line on mobile view (#186)

sef-global · Sep 15, 2024 · fd1cbda · fd1cbda
1 parent 7a275b9
commit fd1cbda
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/pages/MenteeProfile/MenteeProfile.component.tsx b/src/pages/MenteeProfile/MenteeProfile.component.tsx
@@ -13,8 +13,20 @@ const MenteeProfile: React.FC = () => {
 
   return (
     <>
-      <nav aria-label="Breadcrumb">
-        <ol className="flex items-center gap-1 text-sm text-gray-600">
+      <nav aria-label="Breadcrumb ">
+        <div className="flex items-center md:hidden">
+          <Link
+            to={`/mentors/${mentee?.mentor.uuid ?? ''}`}
+            className="flex items-center transition hover:text-gray-700"
+          >
+            <span className="transform rotate-180">
+              <ChevronRightIcon />
+            </span>
+            <span className="ml-2">Back</span>
+          </Link>
+        </div>
+
+        <ol className="flex items-center gap-1 text-xs sm:text-sm hidden md:flex text-gray-600">
           <li>
             <Link
               to="/mentors"