Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Layout): refactor to sidebar layout component

Browse Source
This commit is contained in:
iCrawl
2022-07-24 18:28:32 +02:00
parent 200ab91f52
commit 41e4e10b48
3 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/website/src/components/SidebarLayout.tsx Normal file
View File

@@ -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>
);
}

16
packages/website/src/pages/_app.tsx
View File

@@ -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} />;
}

7
packages/website/src/pages/docs/[...slug].tsx
View File

@@ -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>
);
}