Code for 5-sidebar

package.json

@@ -5,7 +5,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "slug": "^3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Sidebar.js

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import {
+  Link,
+  useRouteMatch,
+  useLocation
+} from 'react-router-dom'
+import slug from 'slug'
+
+function CustomLink ({ to, children }) {
+  const match = useRouteMatch(to.pathname)
+
+  return (
+    <li style={{fontWeight: match ? 900 : 'normal'}}>
+      <Link to={to}>{children}</Link>
+    </li>
+  )
+}
+
+export default function Sidebar ({ title, list }) {
+  const { url } = useRouteMatch()
+  const location = useLocation()
+
+  return (
+    <div>
+      <h3 className='header'>{title}</h3>
+      <ul className='sidebar-list'>
+        {list.map((item) => (
+          <CustomLink
+            key={item}
+            to={{
+              pathname: `${url}/${slug(item)}`,
+              search: location.search
+            }}
+          >
+            {item.toUpperCase()}
+          </CustomLink>
+        ))}
+      </ul>
+    </div>
+  )
+}