diff --git a/src/Pages/FormationMaterialPage.js b/src/Pages/FormationMaterialPage.js index 2e8d75c00321fc0bd3d738730bc43f9dfb430b51..797074618d38f7d3282a57a2ed8d5641ae06e512 100644 --- a/src/Pages/FormationMaterialPage.js +++ b/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; +`