From afe3656319fc6ff90cde3a2315e79704f1362a49 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 17 Mar 2021 11:19:34 -0300
Subject: [PATCH] Add breadcrumbs
---
src/Pages/FormationMaterialPage.js | 55 +++++++++++++++++++++++-------
1 file changed, 42 insertions(+), 13 deletions(-)
diff --git a/src/Pages/FormationMaterialPage.js b/src/Pages/FormationMaterialPage.js
index 2e8d75c0..79707461 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;
+`
--
GitLab