diff --git a/src/pages/MainLayout.module.css b/src/pages/MainLayout.module.css index 2374f5aa..c60673fb 100644 --- a/src/pages/MainLayout.module.css +++ b/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 { diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2257d5f3..d01f075c 100644 --- a/src/pages/_app.tsx +++ b/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 = ({ }) => { const router = useRouter(); const samplesNames = Object.keys(pages); - const [listExpanded, setListExpanded] = useState(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 = ({ - + );