Add breadcrumbs

src/Pages/FormationMaterialPage.js

@@ -23,16 +23,18 @@ import FormationMaterialDescription from '../Components/FormationMaterialDescrip
 import TopicList from '../Components/TopicList.js';
 import TopicFooter from '../Components/TopicFooter.js';
 import colecoes_obj from '../Components/FormationMaterialsResources/formationMaterials.js';
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import {Link} from "react-router-dom"
 
 export default function FormationMaterialPage(props) {
 	const colecao = props.location.pathname === "/colecao";
 	const colecoes = colecoes_obj();
 
 	const colecao_id = Number(
-		colecao ? 
+		colecao ?
 			props.location.search.split('=')[1]
 			: props.location.search.split('&')[0].split('=')[1]
-		);
+	);
 	const topico_id = Number(colecao ? 0 : props.location.search.split('&')[1].split('=')[1]);
 
 	const colecao_obj = ((id) => {
@@ -52,7 +54,7 @@ export default function FormationMaterialPage(props) {
 	const topic_list_ref = useRef(null);
 
 	const handleHeaderClick = () => {
-		if (colecao) 
+		if (colecao)
 			window.scrollTo(0, topic_list_ref.current.offsetTop);
 	}
 
@@ -60,6 +62,16 @@ export default function FormationMaterialPage(props) {
 
 	return (
 		<Background>
+			<BreadCrumbsDiv>
+				<StyledBreadCrumbs>
+					<Link to="/">Página Inicial</Link>
+					<span>
+						{
+							colecao ? "Material de formação" : "Tópicos"
+						}
+					</span>
+				</StyledBreadCrumbs>
+			</BreadCrumbsDiv>
 			<MainContainer>
 				<Grid container
 					direction="row"
@@ -79,7 +91,7 @@ export default function FormationMaterialPage(props) {
 							colecao={colecao}
 							colecao_obj={colecao_obj}
 							topico_obj={topico_obj}
-							/>
+						/>
 					</Grid>
 					<Grid item xs={12} ref={topic_list_ref}>
 						{
@@ -94,22 +106,22 @@ export default function FormationMaterialPage(props) {
 					</Grid>
 				</Grid>
 			</MainContainer>
-			{ colecao ?
-					<div></div>
-					:
-					<TopicFooter
-						topic_name={colecao_obj.topic_name}
-						src={colecao_obj.img}
-						colecao_name={colecao_obj.name}/>
+			{colecao ?
+				<div></div>
+				:
+				<TopicFooter
+					topic_name={colecao_obj.topic_name}
+					src={colecao_obj.img}
+					colecao_name={colecao_obj.name} />
 			}
 		</Background>
 	);
 }
 
-const Background=styled.div`
+const Background = styled.div`
 	background-color: #f4f4f4;
 `
-const MainContainer=styled.div`
+const MainContainer = styled.div`
     margin-left: auto;
     margin-right: auto;
     padding : 0;
@@ -124,3 +136,20 @@ const MainContainer=styled.div`
         width : 1170px;
     }
 `
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display: flex;
+  justify-content: flex-start;
+  max-width: 1170px;
+  span {
+    color: #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+`
+
+const BreadCrumbsDiv = styled.div`
+  padding: 10px;
+  display: flex;
+`