From 8e69efde041e760c4a14561a1f62571c7251041c Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Fri, 12 Aug 2022 17:04:12 +0200
Subject: [PATCH] feat(website): breadcrumbs layout

---
 .../website/src/components/SidebarLayout.tsx  | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index 8657998e1..cdd5b2f6c 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -8,17 +8,22 @@ export function SidebarLayout({
 	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="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 className="flex flex-col max-w-full h-full max-h-full bg-white dark:bg-dark">
+			<div className="flex min-h-[40px] border-0.5 border-b-0 border-gray items-center m-0 px-2 dark:text-white">
+				Breadcrumbs
 			</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 className="flex flex-col lg:flex-row overflow-hidden">
+				<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="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>
 	);