Relevant page loading on detail page

components/detailed-roadmap/index.js

@@ -11,15 +11,19 @@ import siteConfig from "storage/site";
 
 const DetailedRoadmap = ({ roadmap }) => {
   const [menuActive, setMenuState] = useState(false);
+  const {
+    sidebar = {},
+    page: currentPage = {}
+  } = roadmap;
 
-  const roadmapPages = Object.keys(roadmap.sidebar || {}).map(groupTitle => {
+  const roadmapPages = Object.keys(sidebar || {}).map(groupTitle => {
     return (
       <div className='links-group'>
         <h3>{ groupTitle }</h3>
         <ul>
-          { roadmap.sidebar[groupTitle].map(page => {
+          { sidebar[groupTitle].map(page => {
             return (
-              <li>
+              <li className={classNames({ active: page.url === currentPage.url })}>
                 <a href={ page.url }>
                   <span className="bullet"></span>
                   { page.title }
@@ -61,7 +65,7 @@ const DetailedRoadmap = ({ roadmap }) => {
         <div className="container">
           <SidebarButton onClick={() => setMenuState((prevMenuActive) => !prevMenuActive)}>
             <FontAwesomeIcon icon={ faBars } />
-            Getting Job Ready
+            { currentPage.title }
           </SidebarButton>
         </div>
         <MobileSidebarWrap className={classNames({ visible: menuActive })}>

components/detailed-roadmap/style.js

@@ -126,6 +126,14 @@ export const Sidebar = styled.div`
       transform: translateX(-4px);
       transition: background 0.5s ease;
     }
+    
+    &.active a {
+      color: #101010;
+    }
+    
+    &.active .bullet {
+      background: #101010;
+    }
   }
 `;
 

lib/roadmap.js

@@ -1,27 +1,28 @@
 import roadmaps from "storage/roadmaps";
 
 export const getRequestedRoadmap = req => {
-  // Considering it a new roadmap URL e.g. `/roadmaps/frontend`
-  const currentUrl = req.url.replace(/\/$/, '');
-  // Get the roadmap version out of the URL e.g. `/roadmaps/frontend/2019`
-  const [foundVersion = ''] = currentUrl.match(/(\d+|latest)$/) || ['latest'];
-  const foundVersionRegex = new RegExp(`\/?${foundVersion}$`);
-  // Remove version from the URL because urls in roadmaps list don't have versions
-  const urlWithoutVersion = currentUrl.replace(foundVersionRegex, '');
-
-  const urlToSlugList = [
-    currentUrl,
-    urlWithoutVersion,
-  ];
-
-  const foundRoadmap = roadmaps.find(roadmap => urlToSlugList.includes(roadmap.url));
+  const normalizedUrl = req.url.replace(/\/$/, '');
+  const foundRoadmap = roadmaps.find(roadmap => normalizedUrl.startsWith(roadmap.url));
   if (!foundRoadmap) {
     return null;
   }
 
+  const roadmapPages = Object.values(foundRoadmap.sidebar || {})
+    .reduce((acc, menuPages) => {
+      return [
+        ...acc,
+        ...menuPages
+      ]
+    }, []);
+
+  const foundPage = roadmapPages.find(page => page.url === normalizedUrl) || {};
   return {
     ...foundRoadmap,
-    version: foundVersion,
-    picture: (foundRoadmap.picture || '').replace('{version}', foundVersion),
+    // Use the current page data or that of the found roadmap i.e. show the summary
+    page: {
+      title: foundPage.title || foundRoadmap.title,
+      url: foundPage.url || foundRoadmap.url,
+      path: foundPage.path || foundRoadmap.path
+    },
   };
 };

pages/[roadmap]/index.js

@@ -6,7 +6,7 @@ import { serverOnlyProps } from 'lib/server';
 import { getRequestedRoadmap } from 'lib/roadmap';
 import Helmet from 'components/helmet';
 import RoadmapSummary from 'components/roadmap-summary';
-import DetailedRoadmap from '../../components/detailed-roadmap';
+import DetailedRoadmap from 'components/detailed-roadmap';
 
 const Roadmap = ({ roadmap }) => {
   if (!roadmap) {