diff --git a/src/components/SistentNavigation/pagination.js b/src/components/SistentNavigation/pagination.js new file mode 100644 index 000000000000..d16fa2b3f05c --- /dev/null +++ b/src/components/SistentNavigation/pagination.js @@ -0,0 +1,33 @@ +import React, { useEffect, useState } from "react"; + +import { content } from "./content"; +import Button from "../../reusecore/Button"; +import TocPaginationWrapper from "./TocPagination.style"; + +const TocPagination = () => { + const [currentPage, setCurrentPage] = useState(0); + + useEffect(() => { + const path = window.location.pathname; + const index = content.findIndex((x) => x.link === path); + setCurrentPage(index); + }, []); + + return ( + + {currentPage > 0 ? ( + + ) : null} + + {currentPage < content.length - 1 ? ( + + ) : null} + + ); +}; + +export default TocPagination; diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js index 49877cd418fd..987ea2574a2e 100644 --- a/src/components/SistentNavigation/toc.style.js +++ b/src/components/SistentNavigation/toc.style.js @@ -1,7 +1,7 @@ import styled from "styled-components"; const TOCWrapper = styled.div` - position: sticky; + position: absolute; top: 10rem; left: 0rem; margin-left: 3rem; diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 4ad8db44ade2..4b3906593e36 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -1,6 +1,7 @@ import styled from "styled-components"; const SistentWrapper = styled.div` + position: relative; .content > a:first-of-type > h2:first-of-type { padding-top: 1rem; } @@ -46,10 +47,8 @@ const SistentWrapper = styled.div` margin-top: -7rem; } padding-left: 20rem; + margin-top: 15rem; display: flex; - @media screen and (min-width: 1280px) and (max-width: 1350px) { - margin-left: 16rem; - } } .conduct-section { @media screen and (min-width: 751px) { @@ -579,6 +578,26 @@ const SistentWrapper = styled.div` } } + @media (max-width: 560px) { + .filterBtns { + overflow: hidden; + button { + padding: 0.5rem 1.5rem; + font-size: 18px; + } + } + } + + @media (max-width: 420px) { + .filterBtns { + button { + margin-right: 0px; + font-size: 18px; + padding: 10px; + } + } + } + .main-content { padding-top: 1rem; }