From f3c618ce4e599259f99f9b188e5f006b93ec8b42 Mon Sep 17 00:00:00 2001
From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Wed, 28 Feb 2024 13:19:30 -0800
Subject: [PATCH] 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 | 12 ++-
 src/components/SampleCategory.tsx        | 95 ++++++++++++++++++++----
 src/components/SampleLink.tsx            | 44 -----------
 src/pages/_app.tsx                       | 17 ++---
 src/pages/samples/[slug].tsx             |  2 +-
 5 files changed, 97 insertions(+), 73 deletions(-)
 delete mode 100644 src/components/SampleLink.tsx

diff --git a/src/components/SampleCategory.module.css b/src/components/SampleCategory.module.css
index 9cfb1438..8ea8a8f3 100644
--- a/src/components/SampleCategory.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/components/SampleCategory.tsx b/src/components/SampleCategory.tsx
index 48858255..d6782a6a 100644
--- a/src/components/SampleCategory.tsx
+++ b/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>
+  );
+};
diff --git a/src/components/SampleLink.tsx b/src/components/SampleLink.tsx
deleted file mode 100644
index 296c3437..00000000
--- a/src/components/SampleLink.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { NextRouter } from 'next/router';
-import styles from '../pages/MainLayout.module.css';
-import Link from 'next/link';
-
-type PageType = {
-  [key: string]: React.ComponentType & { render: { preload: () => void } };
-};
-
-type PageComponentType = {
-  [key: string]: React.ComponentType;
-};
-
-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>
-  );
-};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index cee91cf5..39078232 100644
--- a/src/pages/_app.tsx
+++ b/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>
               );
             })}
diff --git a/src/pages/samples/[slug].tsx b/src/pages/samples/[slug].tsx
index 86915a7f..9bcba443 100644
--- a/src/pages/samples/[slug].tsx
+++ b/src/pages/samples/[slug].tsx
@@ -76,7 +76,7 @@ const pages: PageComponentType = {
   ...benchmarkPages,
 };
 
-interface PageCategory {
+export interface PageCategory {
   title: string;
   pages: PageComponentType;
   sampleNames: string[];