fixed issue with panelContents disappearing on link click

webgpu · Jan 4, 2024 · 3e2c074 · 3e2c074
1 parent c12ed69
commit 3e2c074
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -43,9 +43,10 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
     };
   }, []);
 
-  const toggelPanelContents = () => {
+  const stylePanelOnExpand = () => {
     if (panelContentsRef.current) {
       if (panelContentsRef.current.style.maxHeight === '0px') {
+        // Scroll height + marginBlockEnd of 16
         panelContentsRef.current.style.maxHeight =
           panelContentsRef.current.scrollHeight + 16 + 'px';
         panelContentsRef.current.style.overflow = 'none';
@@ -57,6 +58,13 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
     }
   };
 
+  const stylePanelOnLink = () => {
+    if (window.innerWidth <= 768) {
+      panelContentsRef.current.style.maxHeight = '0px';
+      panelContentsRef.current.style.overflow = 'hidden';
+    }
+  };
+
   const oldPathSyntaxMatch = router.asPath.match(/(\?wgsl=[01])#(\S+)/);
   if (oldPathSyntaxMatch) {
     const slug = oldPathSyntaxMatch[2];
@@ -84,8 +92,7 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
             <div
               className={styles.expand}
               onClick={() => {
-                //setListExpanded(!listExpanded);
-                toggelPanelContents();
+                stylePanelOnExpand();
               }}
             ></div>
           </h1>
@@ -112,7 +119,7 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
                     <Link
                       href={`/samples/${slug}`}
                       onClick={() => {
-                        toggelPanelContents();
+                        stylePanelOnLink();
                       }}
                     >
                       {slug}