From 74433cd0d32effa5a95fa287d4ebb3ce40ee0d3e Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 2 Dec 2019 02:11:49 +0400
Subject: [PATCH] Sticky sidebar

---
 components/detailed-roadmap/index.js |  9 ++++++---
 components/detailed-roadmap/style.js | 12 +++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/detailed-roadmap/index.js b/components/detailed-roadmap/index.js
index c5d726260..503e7a1d0 100644
--- a/components/detailed-roadmap/index.js
+++ b/components/detailed-roadmap/index.js
@@ -13,6 +13,7 @@ import {
   SidebarButton,
   MobileSidebar,
   MobileSidebarWrap,
+  DesktopSidebarWrap,
   PageTitle,
   PageDetail
 } from './style';
@@ -106,9 +107,11 @@ const DetailedRoadmap = ({ roadmap }) => {
       </MobileNavHeader>
 
       <Summary className="container">
-        <Sidebar className="sidebar d-none d-md-block">
-          { roadmapPages }
-        </Sidebar>
+        <DesktopSidebarWrap className="d-none d-md-block">
+          <Sidebar>
+            { roadmapPages }
+          </Sidebar>
+        </DesktopSidebarWrap>
         <PageDetail>
           <PageTitle>{ currentPage.title }</PageTitle>
           <MdRenderer>
diff --git a/components/detailed-roadmap/style.js b/components/detailed-roadmap/style.js
index 963629d06..b68e6ffb5 100644
--- a/components/detailed-roadmap/style.js
+++ b/components/detailed-roadmap/style.js
@@ -80,7 +80,6 @@ export const PageTitle = styled.h1`
 `;
 
 export const Sidebar = styled.div`
-  border-left: 1px solid #efefef;
   padding-bottom: 150px;
 
   ul {
@@ -146,6 +145,16 @@ export const Sidebar = styled.div`
   }
 `;
 
+export const DesktopSidebarWrap = styled.div`
+  border-left: 1px solid #efefef;
+  
+  ${Sidebar} {
+    position: sticky;
+    top: 0;
+    background: white;
+  }
+`;
+
 export const MobileSidebarWrap = styled.div`
   position: absolute;
   z-index: 999;
@@ -164,6 +173,7 @@ export const MobileSidebarWrap = styled.div`
 `;
 
 export const MobileSidebar = styled(Sidebar)`
+  border-left: 1px solid #efefef;
   margin-left: 12px;
   padding-bottom: 20px;