Update scrolling behavior of sidebar

There seems to be no scrollbar in some specific sizes.

PR-URL: #715
Credit: @hosein2398
Close: #715
Reviewed-by: @Rada8732

docs/src/components/DocLinks.js

@@ -2,14 +2,19 @@ import React from 'react';
 import {StaticQuery, graphql} from 'gatsby';
 import {NavLink} from './links';
 import {Flex, Box} from 'rebass';
+import styled from 'styled-components';
+
+const LinksFlex = styled(Flex)`
+  padding-bottom: 100px;
+`;
 
 const DocLinks = ({data}) => {
   const linkArray = data.allMarkdownRemark.edges;
   const sortedArray = linkArray.sort((a, b) => (a.node.frontmatter.section - b.node.frontmatter.section));
 
   return(
     <>
-      <Flex flexDirection="column">
+      <LinksFlex flexDirection="column">
         {sortedArray.map((link, i) => (
           <Box key={i} pl={!(Number.isInteger(link.node.frontmatter.section)) ? 3 : 0}>
             <NavLink 
@@ -20,7 +25,7 @@ const DocLinks = ({data}) => {
             </NavLink>
           </Box>
         ))} 
-      </Flex>
+      </LinksFlex>
     </>
   );
 };

docs/src/components/sidebar.js

@@ -7,10 +7,10 @@ const Container = styled.div`
   background-color: ${theme.colors.lightGrey};
   flex: 0 0 250px;
   overflow-y: scroll;
-  height: 100vh;
+  height: calc(100vh - 68px);
   top: 68px;
   position: sticky;
-  padding: 20px 20px 100px;
+  padding: 20px 20px 0;
   box-shadow: 1px 0 10px 1px #33333330;
   display: none;