diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
new file mode 100644
index 000000000..72708cbb5
--- /dev/null
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from 'react';
+import { type ItemListProps, ItemSidebar } from './ItemSidebar';
+import type { findMember } from '~/model.server';
+
+export function SidebarLayout({
+	packageName,
+	data,
+	children,
+}: PropsWithChildren<Partial<ItemListProps & { data: { member: ReturnType<typeof findMember> } }>>) {
+	return (
+		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full max-h-full bg-white dark:bg-dark">
+			<div className="w-full lg:max-w-1/4 lg:min-w-1/4">
+				{packageName && data ? <ItemSidebar packageName={packageName} data={data} /> : null}
+			</div>
+			<div className="max-h-full grow overflow-auto">{children}</div>
+		</div>
+	);
+}
diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx
index fb7cfe7c2..ed6740a68 100644
--- a/packages/website/src/pages/_app.tsx
+++ b/packages/website/src/pages/_app.tsx
@@ -2,21 +2,7 @@ import type { AppProps } from 'next/app';
 import '@unocss/reset/normalize.css';
 import '../styles/unocss.css';
 import '../styles/main.css';
-import { ItemSidebar } from '~/components/ItemSidebar';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-	return (
-		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full max-h-full bg-white dark:bg-dark">
-			<div className="w-full lg:max-w-1/4 lg:min-w-1/4">
-				{/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}
-				{pageProps.packageName && pageProps.data ? (
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-					<ItemSidebar packageName={pageProps.packageName} data={pageProps.data} />
-				) : null}
-			</div>
-			<div className="max-h-full grow overflow-auto">
-				<Component {...pageProps} />
-			</div>
-		</div>
-	);
+	return <Component {...pageProps} />;
 }
diff --git a/packages/website/src/pages/docs/[...slug].tsx b/packages/website/src/pages/docs/[...slug].tsx
index 4d2f54d87..a28511a59 100644
--- a/packages/website/src/pages/docs/[...slug].tsx
+++ b/packages/website/src/pages/docs/[...slug].tsx
@@ -7,6 +7,7 @@ import type { DocInterface } from '~/DocModel/DocInterface';
 import type { DocTypeAlias } from '~/DocModel/DocTypeAlias';
 import type { DocVariable } from '~/DocModel/DocVariable';
 import type { ItemListProps } from '~/components/ItemSidebar';
+import { SidebarLayout } from '~/components/SidebarLayout';
 import { Class } from '~/components/model/Class';
 import { Enum } from '~/components/model/Enum';
 import { Function } from '~/components/model/Function';
@@ -106,7 +107,7 @@ export default function Slug(
 ) {
 	return props.error ? (
 		<div className="flex max-w-full h-full bg-white dark:bg-dark">{props.error}</div>
-	) : props.data?.member ? (
-		member(props.data.member)
-	) : null;
+	) : (
+		<SidebarLayout {...props}>{props.data?.member ? member(props.data.member) : null}</SidebarLayout>
+	);
 }