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

feat: tertiary sidebar

Browse Source
This commit is contained in:
iCrawl
2022-07-28 17:46:41 +02:00
parent ec43c184fe
commit a38c58dbd0
4 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/website/src/components/DocContainer.tsx
View File

@@ -21,15 +21,15 @@ export interface DocContainerProps {
export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) { export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) {
return ( return (
<> <div className="flex flex-col min-h-full max-h-full grow">
<div className="bg-white dark:bg-dark border-b-solid border-gray border-0.5 border-width-0.5 sticky top-0 px-10 py-2"> <div className="border-0.5 border-gray px-10 py-2">
<h2 className="flex gap-2 items-center break-all m-0 dark:text-white"> <h2 className="flex gap-2 items-center break-all m-0 dark:text-white">
{generateIcon(kind)} {generateIcon(kind)}
{name} {name}
</h2> </h2>
</div> </div>
<div className="px-10 pt-5 pb-10"> <div className="min-h-full overflow-y-auto overflow-x-clip px-10 pt-5 pb-10">
<SyntaxHighlighter <SyntaxHighlighter
wrapLines wrapLines
wrapLongLines wrapLongLines
@@ -50,7 +50,7 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
) : null} ) : null}
<div className="space-y-10"> <div className="space-y-10">
<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white"> <Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white">
<p className="text-dark-100 dark:text-gray-300 m-0">{summary ?? 'No summary provided.'}</p> <p className="text-dark-100 dark:text-gray-300">{summary ?? 'No summary provided.'}</p>
</Section> </Section>
{typeParams?.length ? ( {typeParams?.length ? (
<Section <Section
@@ -65,6 +65,6 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
<div className="space-y-10">{children}</div> <div className="space-y-10">{children}</div>
</div> </div>
</div> </div>
</> </div>
); );
} }

2
packages/website/src/components/ItemSidebar.tsx
View File

@@ -29,7 +29,7 @@ export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps
<FiMenu size={32} /> <FiMenu size={32} />
</button> </button>
</div> </div>
<div className="hidden lg:block lg:min-h-full overflow-y-auto overflow-x-clip py-7 px-4"> <div className="hidden lg:block lg:min-h-full overflow-y-auto overflow-x-clip py-3 px-4">
<ListSidebar members={data.members} title="test" selectedMember={selectedMember} /> <ListSidebar members={data.members} title="test" selectedMember={selectedMember} />
</div> </div>
</div> </div>

1
packages/website/src/components/Section.tsx
View File

@@ -36,7 +36,6 @@ export function Section({
{collapsed ? null : ( {collapsed ? null : (
<> <>
<motion.div <motion.div
className="ml-7 mb-5"
transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }} transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
key="content" key="content"
initial="collapsed" initial="collapsed"

9
packages/website/src/components/SidebarLayout.tsx
View File

@@ -9,12 +9,17 @@ export function SidebarLayout({
}: PropsWithChildren<Partial<ItemListProps & { data: { member: ReturnType<typeof findMember> } }>>) { }: PropsWithChildren<Partial<ItemListProps & { data: { member: ReturnType<typeof findMember> } }>>) {
return ( 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="flex flex-col lg:flex-row overflow-hidden max-w-full h-full max-h-full bg-white dark:bg-dark">
<div className="h-full w-full lg:max-w-[370px] lg:min-w-[370px]"> <div className="h-full w-full lg:max-w-[310px] lg:min-w-[310px]">
{packageName && data ? ( {packageName && data ? (
<ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} /> <ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} />
) : null} ) : null}
</div> </div>
<div className="max-h-full grow overflow-x-hidden overflow-y-auto">{children}</div> <div className="h-full grow">{children}</div>
<div className="h-full w-full lg:max-w-[310px] lg:min-w-[310px]">
{packageName && data?.member ? (
<ItemSidebar packageName={packageName} data={data} selectedMember={data.member.name} />
) : null}
</div>
</div> </div>
); );
} }