Use related articles for About pages (#550)

src/ensembl/src/content/app/about/About.tsx

@@ -21,6 +21,7 @@ import useApiService from 'src/shared/hooks/useApiService';
 
 import {
   TextArticle,
+  RelatedArticles,
   HelpArticleGrid
 } from 'src/shared/components/help-article';
 import {
@@ -59,11 +60,19 @@ const About = () => {
           </div>
         )}
         <aside className={styles.aside}>
-          {menu && (
-            <>
-              <div className={styles.asideTitle}>More about...</div>
-              <SideMenu menu={menu} currentUrl={location.pathname} />
-            </>
+          {article?.related_articles.length ? (
+            <RelatedArticles
+              title="More about…"
+              articles={article.related_articles}
+              highlightActiveArticle={true}
+            />
+          ) : (
+            menu && (
+              <>
+                <div className={styles.asideTitle}>More about…</div>
+                <SideMenu menu={menu} currentUrl={location.pathname} />
+              </>
+            )
           )}
         </aside>
       </HelpArticleGrid>

src/ensembl/src/shared/components/help-article/HelpArticle.scss

@@ -158,3 +158,7 @@ $textColumnWidth: 450px;
     fill: white;
   }
 }
+
+.relatedArticleActive {
+  color: $black;
+}

src/ensembl/src/shared/components/help-article/RelatedArticles.tsx

@@ -16,7 +16,9 @@
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { push } from 'connected-react-router';
+import classNames from 'classnames';
 
 import { ReactComponent as VideoIcon } from 'static/img/shared/video.svg';
 
@@ -27,10 +29,12 @@ import styles from './HelpArticle.scss';
 type Props = {
   articles: RelatedArticleData[];
   title?: string;
+  highlightActiveArticle?: boolean;
   onArticleClick?: (article: RelatedArticleData) => void;
 };
 
 const RelatedArticles = (props: Props) => {
+  const location = useLocation();
   const dispatch = useDispatch();
 
   const onArticleClick = (article: RelatedArticleData) => {
@@ -42,10 +46,13 @@ const RelatedArticles = (props: Props) => {
   };
 
   const relatedArticles = props.articles.map((relatedArticle) => {
-    const relatedItemClassName =
-      relatedArticle.type === 'article'
-        ? styles.relatedArticle
-        : styles.relatedVideo;
+    const relatedItemClassName = classNames({
+      [styles.relatedArticle]: relatedArticle.type === 'article',
+      [styles.relatedVideo]: relatedArticle.type === 'video',
+      [styles.relatedArticleActive]:
+        props.highlightActiveArticle && relatedArticle.url === location.pathname
+    });
+
     return (
       <a
         href={relatedArticle.url}