make sidebar sticky and fill

Author: dpatanin

src/scss/components/_sidebar.scss

@@ -42,7 +42,7 @@ a {
 	}
 }
 .sidebar-wrapper{
-    display: flex;
+    display: inline-flex;
 }
 .navbar {
 	padding: 15px 10px;
@@ -72,10 +72,16 @@ i {
 span {
 	display: inline-block;
 }
-#sidebar {
-	min-width: 250px;
+.sidebar {
+	min-width: 100px;
 	max-width: 250px;
-	background: #7386d5;
+    background: #7386d5;
+    height: 100vh;
+    align-self: flex-start;
+    position: sticky;
+    top: 50px;
+    z-index: 9;
+    overflow-y: auto;
 	color: $white;
 	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
 	transition: all 0.3s;
@@ -140,7 +146,6 @@ span {
 		}
 		&.components {
 			padding: 20px 0;
-			border-bottom: 1px solid #47748b;
 		}
 	}
 	.sidebar-header {

src/templates/scanner.js

@@ -9,64 +9,61 @@ const Scanner = ({ data }) => {
 
   return (
     <Layout bodyClass="page-scanners">
-          <div class="sidebar-wrapper">
-            <nav id="sidebar">
-              <div class="sidebar-header">
-                <h3>Scanner</h3>
-                <strong>Scanner</strong>
-              </div>
+      <div className="sidebar-wrapper">
+        <nav className="sidebar">
+          <ul class="list-unstyled components">
+            {scanner.map(scanner => (
+              <li>
+                <Link to={scanner.node.frontmatter.path}>
+                  {scanner.node.frontmatter.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
 
-              <ul class="list-unstyled components">
-                {scanner.map(scanner => (
-                  <li>
-                  <Link to={scanner.node.frontmatter.path}>{scanner.node.frontmatter.title}</Link>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-
-            <div id="content">
-              <nav class="navbar navbar-expand-lg navbar-light bg-light">
-                <div class="container-fluid">
-                  <h1 className="title">{title}</h1>
-                  <div
-                    className="content"
-                    dangerouslySetInnerHTML={{ __html: html }}
-                  />
-                </div>
-              </nav>
+        <div id="content">
+          <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container-fluid">
+              <h1 className="title">{title}</h1>
+              <div
+                className="content"
+                dangerouslySetInnerHTML={{ __html: html }}
+              />
             </div>
-          </div>
+          </nav>
+        </div>
+      </div>
     </Layout>
   );
 };
 
 export const query = graphql`
-         query($id: String!) {
-           markdownRemark(id: { eq: $id }) {
-             frontmatter {
-               title
-             }
-             html
-           }
-           allMarkdownRemark(
-             filter: { frontmatter: { category: { eq: "scanner" } } }
-             sort: { fields: [frontmatter___title], order: ASC }
-           ) {
-             edges {
-               node {
-                 html
-                 frontmatter {
-                   title
-                   path
-                   category
-                   usecase
-                   release
-                 }
-               }
-             }
-           }
-         }
-       `;
+  query($id: String!) {
+    markdownRemark(id: { eq: $id }) {
+      frontmatter {
+        title
+      }
+      html
+    }
+    allMarkdownRemark(
+      filter: { frontmatter: { category: { eq: "scanner" } } }
+      sort: { fields: [frontmatter___title], order: ASC }
+    ) {
+      edges {
+        node {
+          html
+          frontmatter {
+            title
+            path
+            category
+            usecase
+            release
+          }
+        }
+      }
+    }
+  }
+`;
 
 export default Scanner;