Make mobile sidebar responsive

components/detailed-roadmap/index.js

@@ -1,12 +1,17 @@
-import { PageHeader, RoadmapMeta, ShareRoadmap, Sidebar, Summary, SummaryContainer } from './style';
+import { useState } from 'react';
+import classNames from 'classnames';
+import { PageHeader, RoadmapMeta, ShareRoadmap, Sidebar, Summary, SummaryContainer, MobileNavHeader, SidebarButton, MobileSidebar, MobileSidebarWrap } from './style';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebookSquare, faTwitterSquare, faRedditSquare, faGithubSquare } from '@fortawesome/free-brands-svg-icons'
+import { faBars } from '@fortawesome/free-solid-svg-icons'
 import { getFacebookShareUrl } from 'lib/url';
 import { ShareIcon } from 'components/share-icon';
 import { getRedditShareUrl, getTwitterShareUrl } from 'lib/url';
 import siteConfig from "storage/site";
 
 const DetailedRoadmap = ({ roadmap }) => {
+  const [menuActive, setMenuState] = useState(false);
+
   const roadmapPages = Object.keys(roadmap.sidebar || {}).map(groupTitle => {
     return (
       <div className='links-group'>
@@ -51,8 +56,25 @@ const DetailedRoadmap = ({ roadmap }) => {
           </ShareRoadmap>
         </div>
       </PageHeader>
+
+      <MobileNavHeader className="border-bottom d-block d-md-none">
+        <div className="container">
+          <SidebarButton onClick={() => setMenuState((prevMenuActive) => !prevMenuActive)}>
+            <FontAwesomeIcon icon={ faBars } />
+            Getting Job Ready
+          </SidebarButton>
+        </div>
+        <MobileSidebarWrap className={classNames({ visible: menuActive })}>
+          <div className="container">
+            <MobileSidebar>
+              { roadmapPages }
+            </MobileSidebar>
+          </div>
+        </MobileSidebarWrap>
+      </MobileNavHeader>
+
       <Summary className="container">
-        <Sidebar className="sidebar">
+        <Sidebar className="sidebar d-none d-md-block">
           { roadmapPages }
         </Sidebar>
         <div>

components/detailed-roadmap/style.js

@@ -49,6 +49,27 @@ export const ShareRoadmap = styled.div`
   }
 `;
 
+export const MobileNavHeader = styled.div`
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
+export const SidebarButton = styled.button`
+  background: transparent;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  -webkit-appearance: none;
+  display: flex;
+  align-items: center;
+  
+  svg {
+    margin-right: 10px;
+  }
+`;
+
 export const Sidebar = styled.div`
   border-left: 1px solid #efefef;
   padding-bottom: 150px;
@@ -107,3 +128,29 @@ export const Sidebar = styled.div`
     }
   }
 `;
+
+export const MobileSidebarWrap = styled.div`
+  position: absolute;
+  z-index: 999;
+  background: white;
+  width: 100%;
+  left: 0;
+  bottom: 100%;
+  overflow-y: scroll;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
+  top: calc(100% + 1px);
+  transition: bottom 0.5s ease 0s;
+
+  &.visible {
+    bottom: -50vh;
+  }
+`;
+
+export const MobileSidebar = styled(Sidebar)`
+  margin-left: 12px;
+  padding-bottom: 20px;
+
+  .links-group {
+    width: auto;  
+  }
+`;

components/site-nav/index.js

@@ -12,7 +12,7 @@ const SiteNav = () => (
       <div className="nav-links">
         <Link href="/roadmaps"><a>Roadmaps</a></Link>
         <Link href="/guides"><a>Guides</a></Link>
-        <Link href="/about"><a>FAQ</a></Link>
+        <Link href="/about"><a className="d-none d-md-inline-block">FAQ</a></Link>
         <Link href="/signup"><a className="signup">Subscribe</a></Link>
       </div>
     </div>