Dropdowns complete. Note that dropdowns can easily be removed if they…

… are deemed unecessary for the functionality of this webpage

src/components/SampleCategory.module.css

@@ -8,17 +8,25 @@
   to { transform: rotate(0deg); }
 }
 
+.sampleCategory {
+  display: flex;
+  cursor: pointer;
+}
+
 .dropdown {
   margin-left: 8px;
   margin-top: 7px;
   margin-bottom: 5px;
 }
 
+li.selected a {
+  color: #ff0000;
+}
 
 .dropdown[data-collapsed=false] {
-  animation: openTriangle 0.3s forwards ease-in-out;
+  animation: closeTriangle 0.3s forwards ease-in-out;
 }
 
 .dropdown[data-collapsed=true] {
-  animation: closeTriangle 0.3s forwards ease-in-out;
+  animation: openTriangle 0.3s forwards ease-in-out;
 }

src/components/SampleCategory.tsx

@@ -1,26 +1,93 @@
 import { useState } from 'react';
 import styles from './SampleCategory.module.css';
 
+import { NextRouter } from 'next/router';
+import Link from 'next/link';
+import { PageCategory } from '../pages/samples/[slug]';
+
+type PageType = {
+  [key: string]: React.ComponentType & { render: { preload: () => void } };
+};
+
+type PageComponentType = {
+  [key: string]: React.ComponentType;
+};
+
 interface SampleCategoryProps {
-  title: string;
+  category: PageCategory;
+  router: NextRouter;
+  onClickPageLink: () => void;
 }
 
-export const SampleCategory = ({ title }: SampleCategoryProps) => {
+export const SampleCategory = ({
+  category,
+  onClickPageLink,
+  router,
+}: SampleCategoryProps) => {
+  const { title, pages, sampleNames } = category;
   const [open, setOpen] = useState<boolean>(true);
   return (
-    <div style={{ display: 'flex' }} onClick={() => setOpen(!open)}>
-      <h3
-        style={{
-          marginTop: '5px',
-        }}
-      >
-        {title}
-      </h3>
-      <div className={`${styles.dropdown}`} data-collapsed={open}>
-        <svg width="15" height="15" viewBox="0 0 20 20">
-          <path d="M0 7 L 20 7 L 10 16" fill="black" />
-        </svg>
+    <div>
+      <div className={styles.sampleCategory} onClick={() => setOpen(!open)}>
+        <h3
+          style={{
+            marginTop: '5px',
+          }}
+        >
+          {title}
+        </h3>
+        <div className={`${styles.dropdown}`} data-collapsed={open}>
+          <svg width="15" height="15" viewBox="0 0 20 20">
+            <path d="M0 7 L 20 7 L 10 16" fill="black" />
+          </svg>
+        </div>
       </div>
+      {open
+        ? sampleNames.map((slug) => {
+            return (
+              <SampleLink
+                key={`samples/${slug}`}
+                slug={slug}
+                router={router}
+                pages={pages}
+                onClick={() => onClickPageLink()}
+              />
+            );
+          })
+        : null}
     </div>
   );
 };
+
+interface SampleLinkProps {
+  router: NextRouter;
+  slug: string;
+  pages: PageComponentType;
+  onClick: () => void;
+}
+
+export const SampleLink = ({
+  router,
+  slug,
+  pages,
+  onClick,
+}: SampleLinkProps) => {
+  const className =
+    router.pathname === `/samples/[slug]` && router.query['slug'] === slug
+      ? styles.selected
+      : undefined;
+
+  return (
+    <li
+      key={slug}
+      className={className}
+      onMouseOver={() => {
+        (pages as PageType)[slug].render.preload();
+      }}
+    >
+      <Link href={`/samples/${slug}`} onClick={() => onClick()}>
+        {slug}
+      </Link>
+    </li>
+  );
+};

src/pages/_app.tsx

@@ -69,18 +69,11 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
                   className={styles.exampleList}
                   key={`/categories/${category.title}`}
                 >
-                  <SampleCategory title={category.title} />
-                  {category.sampleNames.map((slug) => {
-                    return (
-                      <SampleLink
-                        key={`samples/${slug}`}
-                        slug={slug}
-                        router={router}
-                        pages={category.pages}
-                        onClick={() => setListExpanded(false)}
-                      />
-                    );
-                  })}
+                  <SampleCategory
+                    category={category}
+                    router={router}
+                    onClickPageLink={() => setListExpanded(false)}
+                  />
                 </ul>
               );
             })}

src/pages/samples/[slug].tsx

@@ -76,7 +76,7 @@ const pages: PageComponentType = {
   ...benchmarkPages,
 };
 
-interface PageCategory {
+export interface PageCategory {
   title: string;
   pages: PageComponentType;
   sampleNames: string[];