From a38c58dbd043aedecbf9795626e203bddd81dae7 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Thu, 28 Jul 2022 17:46:41 +0200
Subject: [PATCH] feat: tertiary sidebar

---
 packages/website/src/components/DocContainer.tsx  | 10 +++++-----
 packages/website/src/components/ItemSidebar.tsx   |  2 +-
 packages/website/src/components/Section.tsx       |  1 -
 packages/website/src/components/SidebarLayout.tsx |  9 +++++++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index 381cc591d17f..e795ebfd7939 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -21,15 +21,15 @@ export interface DocContainerProps {
 
 export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) {
 	return (
-		<>
-			<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="flex flex-col min-h-full max-h-full grow">
+			<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">
 					{generateIcon(kind)}
 					{name}
 				</h2>
 			</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
 					wrapLines
 					wrapLongLines
@@ -50,7 +50,7 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 				) : null}
 				<div className="space-y-10">
 					<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>
 					{typeParams?.length ? (
 						<Section
@@ -65,6 +65,6 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 					<div className="space-y-10">{children}</div>
 				</div>
 			</div>
-		</>
+		</div>
 	);
 }
diff --git a/packages/website/src/components/ItemSidebar.tsx b/packages/website/src/components/ItemSidebar.tsx
index d1c12103664f..ddb478fbc6e6 100644
--- a/packages/website/src/components/ItemSidebar.tsx
+++ b/packages/website/src/components/ItemSidebar.tsx
@@ -29,7 +29,7 @@ export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps
 					<FiMenu size={32} />
 				</button>
 			</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} />
 			</div>
 		</div>
diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx
index f17fab7cb7f5..b61fbdceb9c0 100644
--- a/packages/website/src/components/Section.tsx
+++ b/packages/website/src/components/Section.tsx
@@ -36,7 +36,6 @@ export function Section({
 				{collapsed ? null : (
 					<>
 						<motion.div
-							className="ml-7 mb-5"
 							transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
 							key="content"
 							initial="collapsed"
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index 998d60981cd3..8657998e1899 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -9,12 +9,17 @@ export function SidebarLayout({
 }: 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="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 ? (
 					<ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} />
 				) : null}
 			</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>
 	);
 }