fix layouting problem with sidebar

Signed-off-by: lakshya <[email protected]>

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 (
+    <TocPaginationWrapper>
+      {currentPage > 0 ? (
+        <Button secondary url={content[currentPage - 1]?.link}>
+          &larr; Previous
+        </Button>
+      ) : null}
+
+      {currentPage < content.length - 1 ? (
+        <Button primary url={content[currentPage + 1]?.link}>
+          Next &rarr;
+        </Button>
+      ) : null}
+    </TocPaginationWrapper>
+  );
+};
+
+export default TocPagination;

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;

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;
   }