fix: website aside remount

website/gatsby-browser.js

@@ -1,3 +1,3 @@
 import './src/styles/index.css';
 
-export { wrapRootElement } from './gatsby-shared';
+export { wrapRootElement, wrapPageElement } from './gatsby-shared';

website/gatsby-shared.js

@@ -4,6 +4,7 @@ import { countAtom, menuAtom, searchAtom, textAtom } from './src/atoms';
 import { Code } from './src/components/code';
 import { CodeSandbox } from './src/components/code-sandbox';
 import { InlineCode } from './src/components/inline-code';
+import { Layout } from './src/components/layout';
 import { A, H2, H3, H4, H5 } from './src/components/mdx';
 import { Stackblitz } from './src/components/stackblitz';
 import { TOC } from './src/components/toc';
@@ -33,3 +34,7 @@ export const wrapRootElement = ({ element }) => (
     <MDXProvider components={components}>{element}</MDXProvider>
   </JotaiProvider>
 );
+
+export const wrapPageElement = ({ element, props }) => {
+  return <Layout showDocs={props.path.startsWith('/docs')}>{element}</Layout>;
+};

website/gatsby-ssr.js

@@ -1,4 +1,4 @@
-export { wrapRootElement } from './gatsby-shared';
+export { wrapRootElement, wrapPageElement } from './gatsby-shared';
 
 export const onRenderBody = ({ setHtmlAttributes, setPreBodyComponents }) => {
   setHtmlAttributes({ lang: 'en' });

website/src/pages/docs/{Mdx.slug}.js

@@ -1,21 +1,20 @@
 import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { Jotai } from '../../components/jotai';
-import { Layout } from '../../components/layout';
 import { Meta } from '../../components/meta';
 
 export default function DocsPage({ data }) {
   const { frontmatter, body } = data.mdx;
   const { title } = frontmatter;
 
   return (
-    <Layout showDocs>
+    <>
       <div className="mb-4 lg:hidden">
         <Jotai isDocsPage small />
       </div>
       <h1>{title}</h1>
       <MDXRenderer>{body}</MDXRenderer>
-    </Layout>
+    </>
   );
 }
 

website/src/pages/index.js

@@ -4,15 +4,14 @@ import { Headline } from '../components/headline';
 import { InlineCode } from '../components/inline-code';
 import { IntegrationsDemo } from '../components/integrations-demo';
 import { Intro } from '../components/intro';
-import { Layout } from '../components/layout';
 import { LogoCloud } from '../components/logo-cloud';
 import { Meta } from '../components/meta';
 import { Tabs } from '../components/tabs';
 import { UtilitiesDemo } from '../components/utilities-demo';
 
 export default function HomePage() {
   return (
-    <Layout>
+    <>
       <Intro />
       <div className="mt-12 space-y-12 lg:mt-24 lg:space-y-24">
         <div className="space-y-4">
@@ -65,7 +64,7 @@ export default function HomePage() {
           </a>
         </div>
       </div>
-    </Layout>
+    </>
   );
 }