Sketch dropdown before merging main into this branch

src/components/SampleCategory.module.css

@@ -0,0 +1,24 @@
+@keyframes openTriangle {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(180deg); }
+}
+
+@keyframes closeTriangle {
+  from { transform: rotate(180deg); }
+  to { transform: rotate(0deg); }
+}
+
+.dropdown {
+  margin-left: 8px;
+  margin-top: 7px;
+  margin-bottom: 5px;
+}
+
+
+.dropdown[data-collapsed=false] {
+  animation: openTriangle 0.3s forwards ease-in-out;
+}
+
+.dropdown[data-collapsed=true] {
+  animation: closeTriangle 0.3s forwards ease-in-out;
+}

src/components/SampleCategory.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import styles from './SampleCategory.module.css';
+
+interface SampleCategoryProps {
+  title: string;
+}
+
+export const SampleCategory = ({ title }: SampleCategoryProps) => {
+  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>
+  );
+};

src/pages/MainLayout.module.css

@@ -23,6 +23,10 @@
   margin-block-end: 16px;
 }
 
+.exampleList h3 {
+  color: rgb(43, 126, 171);
+}
+
 .exampleList li {
   list-style: none;
   padding: 0.3em 0;
@@ -49,6 +53,8 @@
   max-height: 100vh;
 }
 
+
+
 @media only screen and (max-width: 768px) {
   /* More padding on mobile for easier touch screen use */
   .exampleLink {

src/pages/_app.tsx

@@ -9,6 +9,7 @@ import styles from './MainLayout.module.css';
 
 import { pageCategories } from './samples/[slug]';
 import { SampleLink } from '../components/SampleLink';
+import { SampleCategory } from '../components/SampleCategory';
 
 const title = 'WebGPU Samples';
 
@@ -17,7 +18,6 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
   pageProps,
 }) => {
   const router = useRouter();
-  //const samplesNames = Object.keys(pages);
   const [listExpanded, setListExpanded] = useState<boolean>(false);
 
   const ComponentMemo = useMemo(() => {
@@ -69,15 +69,7 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
                   className={styles.exampleList}
                   key={`/categories/${category.title}`}
                 >
-                  <h3
-                    style={{
-                      marginTop: '5px',
-                      marginBottom: '5px',
-                      color: 'rgb(43, 126, 171)',
-                    }}
-                  >
-                    {category.title}
-                  </h3>
+                  <SampleCategory title={category.title} />
                   {category.sampleNames.map((slug) => {
                     return (
                       <SampleLink

src/pages/styles.css

@@ -24,6 +24,11 @@ a:hover {
   text-decoration: underline;
 }
 
+h3 {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
 main {
   position: relative;
   flex: 1;