CSS: Animated Resizing of .panelContents when Window Size is less tha…

…n 768 pixels. (#344)

* Updated css for expanding list of samples when window size is less than 768px. React state updates were making this animation unperformant on all but the least intensive webgpu samples 'which was basically only helloTriangle'. Accordingly, I reworked the panelContents portion of the _app component, with css changes only occurring on window size changes or when toggling the expand button

* fixed issue with panelContents disappearing on link click

* Added helpful comments

* Changed function names from stylePanel to stylePanelContents to better reflect the element/ref they are directly modifying

* Fixed bug where max-height was visibly changing on resize to greater than 768 pixels

* Removed most code for simpler solution

* Made sure display: block was explicit at normal window width

* got rid of useEffect import

* Removed unecessary function. I definitely overcomplicated the original solution. All that's really needed to make this performant is a few css changes and changing data-Expanded from a React state variable that triggers a re-render to an attribute on a ref

* Added back effect so data-expanded would be set to false on window resize

* added semicolon

* Memoized component

* Removed unusued functions

src/pages/MainLayout.module.css

@@ -18,7 +18,9 @@
 }
 
 .exampleList {
-  padding: 0
+  padding: 0;
+  margin-block-start: 16px;
+  margin-block-end: 16px;
 }
 
 .exampleList li {
@@ -40,6 +42,13 @@
   background-size: cover;
 }
 
+.panel .panelContents {
+  display: block;
+  transition: max-height 0s;
+  overflow: none;
+  max-height: 100vh;
+}
+
 @media only screen and (max-width: 768px) {
   /* More padding on mobile for easier touch screen use */
   .exampleLink {
@@ -55,12 +64,19 @@
     height: auto;
   }
 
-  .panel[data-expanded=false] .panelContents {
-    display: none;
+  .panel .panelContents {
+    display: block;
+    transition: max-height 0.3s ease-out;
+    overflow: hidden;
+    max-height: 0px;
+  }
+
+  .panel[data-expanded='false'] .panelContents {
+    max-height: 0vh;
   }
 
-  .panel[data-expanded=true] .panelContents {
-    display: block;
+  .panel[data-expanded='true'] .panelContents {
+    max-height: 100vh;
   }
 
   .expand {

src/pages/_app.tsx

@@ -2,7 +2,7 @@ import Head from 'next/head';
 import { AppProps } from 'next/app';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useMemo, memo, useState } from 'react';
 
 import './styles.css';
 import styles from './MainLayout.module.css';
@@ -21,9 +21,12 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
 }) => {
   const router = useRouter();
   const samplesNames = Object.keys(pages);
-
   const [listExpanded, setListExpanded] = useState<boolean>(false);
 
+  const ComponentMemo = useMemo(() => {
+    return memo(Component);
+  }, [Component]);
+
   const oldPathSyntaxMatch = router.asPath.match(/(\?wgsl=[01])#(\S+)/);
   if (oldPathSyntaxMatch) {
     const slug = oldPathSyntaxMatch[2];
@@ -107,7 +110,7 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
             </ul>
           </div>
         </nav>
-        <Component {...pageProps} />
+        <ComponentMemo {...pageProps} />
       </div>
     </>
   );