From 72f81106a0c03b8482933bb06e05420293837018 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Thu, 11 Apr 2024 10:05:29 +0000
Subject: [PATCH 1/4] feature: add option to keep sidebar open

---
 .storybook/assets/Appshell.tsx                |  2 +-
 src/components/Sidebar/Sidebar.stories.tsx    | 32 ++++++++++++--
 src/components/Sidebar/Sidebar.tsx            | 44 ++++++++++++-------
 src/components/Sidebar/SidebarContext.tsx     | 32 ++++++++++++++
 .../Sidebar/SidebarHeader.stories.tsx         |  9 ++--
 .../Sidebar/SidebarItem.stories.tsx           |  5 ++-
 src/components/Sidebar/index.tsx              |  1 +
 7 files changed, 101 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Sidebar/SidebarContext.tsx

diff --git a/.storybook/assets/Appshell.tsx b/.storybook/assets/Appshell.tsx
index 37ff9cf..97b39d5 100644
--- a/.storybook/assets/Appshell.tsx
+++ b/.storybook/assets/Appshell.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 
 export function AppShell({ children }: { children: ReactNode }) {
 	return (
-		<div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", width: "100%" }}>
+		<div style={{ minHeight: "1000px", display: "flex", flexDirection: "column", width: "100%" }}>
 			<div
 				style={{ height: "64px", backgroundColor: "white", borderBottom: "solid lightgrey 1px" }}
 			></div>
diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
index 938e505..40071e8 100644
--- a/src/components/Sidebar/Sidebar.stories.tsx
+++ b/src/components/Sidebar/Sidebar.stories.tsx
@@ -10,9 +10,11 @@ import {
 	SidebarHeaderTitle,
 	SidebarList
 } from "./index";
+import { Button } from "../Button";
 import { CPU, CloseButton } from "../../../.storybook/assets/icons";
 import { StoryObj } from "@storybook/react";
 import { AppShell } from "../../../.storybook/assets/Appshell";
+import { SidebarProvider, useSidebarContext } from "./SidebarContext";
 
 const meta = {
 	title: "UI/Sidebar",
@@ -22,9 +24,11 @@ const meta = {
 	},
 	decorators: [
 		(Story) => (
-			<AppShell>
-				<Story />
-			</AppShell>
+			<SidebarProvider initialOpen>
+				<AppShell>
+					<Story />
+				</AppShell>
+			</SidebarProvider>
 		)
 	],
 	tags: ["autodocs"]
@@ -39,7 +43,14 @@ export const defaultStory: Story = {
 	args: {
 		children: (
 			<>
-				<SidebarHeader icon={<CloseButton className="w-6 h-6" />} title="ZenML Tenant">
+				<SidebarHeader
+					icon={
+						<div>
+							<SidebarButton />
+						</div>
+					}
+					title="ZenML Tenant"
+				>
 					<SidebarHeaderImage>
 						<img src={`https://avatar.vercel.sh/ZenMLTenant?size=32`} />
 					</SidebarHeaderImage>
@@ -81,3 +92,16 @@ export const defaultStory: Story = {
 		)
 	}
 };
+
+function SidebarButton() {
+	const { setIsOpen, isOpen } = useSidebarContext();
+	return (
+		<Button
+			onClick={() => setIsOpen((prev) => !prev)}
+			className={`w-6 ${!isOpen && "bg-transparent"} h-6 p-0 flex items-center justify-center`}
+			intent="secondary"
+		>
+			<CloseButton className="w-4 h-4 aspect-square" />
+		</Button>
+	);
+}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 158e7d5..b7de5db 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -10,14 +10,17 @@ import React, {
 } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../utilities/index";
+import { useSidebarContext } from "./SidebarContext";
 
 export const Sidebar = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
 	({ className, children, ...rest }, ref) => {
+		const { isOpen } = useSidebarContext();
+
 		return (
 			<nav
 				ref={ref}
 				className={cn(
-					"group flex-1 h-full flex w-9 hover:w-[220px] bg-neutral-100 transition-all overflow-x-hidden duration-300 flex-col items-center border-r border-theme-border-moderate",
+					`group flex-1 h-full flex w-9 ${isOpen ? "w-[220px]" : "hover:w-[220px]"}  bg-neutral-100 transition-all overflow-x-hidden duration-300 flex-col items-center border-r border-theme-border-moderate`,
 					className
 				)}
 				{...rest}
@@ -37,18 +40,22 @@ export function SidebarHeaderImage({ children }: PropsWithChildren) {
 export const SidebarHeaderTitle = forwardRef<
 	HTMLParagraphElement,
 	HTMLAttributes<HTMLParagraphElement>
->(({ children, className, ...rest }, ref) => (
-	<p
-		ref={ref}
-		{...rest}
-		className={cn(
-			"opacity-0 group-hover:opacity-100 ml-1 truncate duration-300 transition-all",
-			className
-		)}
-	>
-		{children}
-	</p>
-));
+>(({ children, className, ...rest }, ref) => {
+	const { isOpen } = useSidebarContext();
+
+	return (
+		<p
+			ref={ref}
+			{...rest}
+			className={cn(
+				`${!isOpen && "opacity-0 group-hover:opacity-100"} ml-1 truncate duration-300 transition-all`,
+				className
+			)}
+		>
+			{children}
+		</p>
+	);
+});
 
 SidebarHeaderTitle.displayName = "SidebarHeaderTitle";
 
@@ -58,11 +65,13 @@ export type SidebarHeaderProps = HTMLAttributes<HTMLDivElement> & {
 
 export const SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(
 	({ icon, children, className, ...rest }, ref) => {
+		const { isOpen } = useSidebarContext();
+
 		const existingIconClasses = isValidElement(icon) ? icon.props.className || "" : "";
 
 		const iconClasses = cn(
 			existingIconClasses,
-			"ml-auto shrink-0 opacity-0 group-hover:opacity-100  duration-300 transition-all"
+			`${!isOpen && "opacity-0 group-hover:opacity-100"} ml-auto shrink-0 duration-300 transition-all`
 		);
 
 		return (
@@ -139,6 +148,7 @@ export function SidebarItemContent({
 	isActive,
 	svgStroke = false
 }: SidebarItemContentProps) {
+	const { isOpen } = useSidebarContext();
 	const existingIconClasses = isValidElement(icon) ? icon.props.className || "" : "";
 
 	const iconClasses = cn(
@@ -156,7 +166,11 @@ export function SidebarItemContent({
 	return (
 		<>
 			{cloneElement(icon as ReactElement, { className: iconClasses })}
-			<div className="opacity-0 group-hover:opacity-100 duration-300 transition-all">{label}</div>
+			<div
+				className={`${!isOpen && "opacity-0 group-hover:opacity-100"} duration-300 transition-all`}
+			>
+				{label}
+			</div>
 		</>
 	);
 }
diff --git a/src/components/Sidebar/SidebarContext.tsx b/src/components/Sidebar/SidebarContext.tsx
new file mode 100644
index 0000000..594a671
--- /dev/null
+++ b/src/components/Sidebar/SidebarContext.tsx
@@ -0,0 +1,32 @@
+import React, {
+	Dispatch,
+	PropsWithChildren,
+	SetStateAction,
+	createContext,
+	useContext,
+	useState
+} from "react";
+
+type SidebarContextProps = {
+	isOpen: boolean;
+	setIsOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+const SidebarContext = createContext<SidebarContextProps | null>(null);
+
+export function SidebarProvider({
+	children,
+	initialOpen = false
+}: PropsWithChildren<{ initialOpen?: boolean }>) {
+	const [isOpen, setIsOpen] = useState(initialOpen);
+
+	return (
+		<SidebarContext.Provider value={{ isOpen, setIsOpen }}>{children}</SidebarContext.Provider>
+	);
+}
+
+export function useSidebarContext() {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("useSidebarContext must be used within a SidebarProvider");
+	return context;
+}
diff --git a/src/components/Sidebar/SidebarHeader.stories.tsx b/src/components/Sidebar/SidebarHeader.stories.tsx
index 7c7022f..0a3172b 100644
--- a/src/components/Sidebar/SidebarHeader.stories.tsx
+++ b/src/components/Sidebar/SidebarHeader.stories.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { SidebarHeader, SidebarHeaderImage } from "./Sidebar";
 import { CloseButton } from "../../../.storybook/assets/icons";
 import { StoryObj } from "@storybook/react";
+import { SidebarProvider } from "./SidebarContext";
 
 const meta = {
 	title: "UI/Sidebar",
@@ -27,9 +28,11 @@ export const sidebarHeader: Story = {
 		title: "ZenML Tenant",
 		icon: <CloseButton className="w-6 h-6" />,
 		children: (
-			<SidebarHeaderImage>
-				<img src={`https://avatar.vercel.sh/ZenMLTenant?size=32`} />
-			</SidebarHeaderImage>
+			<SidebarProvider initialOpen={false}>
+				<SidebarHeaderImage>
+					<img src={`https://avatar.vercel.sh/ZenMLTenant?size=32`} />
+				</SidebarHeaderImage>
+			</SidebarProvider>
 		)
 	}
 };
diff --git a/src/components/Sidebar/SidebarItem.stories.tsx b/src/components/Sidebar/SidebarItem.stories.tsx
index 5aac3ec..6d36dd3 100644
--- a/src/components/Sidebar/SidebarItem.stories.tsx
+++ b/src/components/Sidebar/SidebarItem.stories.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { SidebarItem, SidebarItemContent } from "./Sidebar";
 import { CPU } from "../../../.storybook/assets/icons";
 import { StoryObj } from "@storybook/react";
+import { SidebarProvider } from "./SidebarContext";
 
 const meta = {
 	title: "UI/Sidebar",
@@ -10,7 +11,9 @@ const meta = {
 	decorators: [
 		(Story) => (
 			<ul style={{ listStyle: "none" }} className="group">
-				<Story />
+				<SidebarProvider initialOpen={false}>
+					<Story />
+				</SidebarProvider>
 			</ul>
 		)
 	],
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index d678998..86744fa 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -1 +1,2 @@
 export * from "./Sidebar";
+export * from "./Sidebar";

From 4b138a4c4fe64b9d081468761ffd5946754ebcfb Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Thu, 11 Apr 2024 10:06:05 +0000
Subject: [PATCH 2/4] chore: add changeset

---
 .changeset/hot-elephants-beam.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hot-elephants-beam.md

diff --git a/.changeset/hot-elephants-beam.md b/.changeset/hot-elephants-beam.md
new file mode 100644
index 0000000..7eefffd
--- /dev/null
+++ b/.changeset/hot-elephants-beam.md
@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": patch
+---
+
+add option to keep sidebar open

From 2ab309a335d3a9bcb5533b9d3a5b1f0cf7911642 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Thu, 11 Apr 2024 10:08:53 +0000
Subject: [PATCH 3/4] chore: update story

---
 src/components/Sidebar/Sidebar.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
index 40071e8..9fe0aab 100644
--- a/src/components/Sidebar/Sidebar.stories.tsx
+++ b/src/components/Sidebar/Sidebar.stories.tsx
@@ -98,10 +98,10 @@ function SidebarButton() {
 	return (
 		<Button
 			onClick={() => setIsOpen((prev) => !prev)}
-			className={`w-6 ${!isOpen && "bg-transparent"} h-6 p-0 flex items-center justify-center`}
+			className={`w-6 bg-transparent h-6 p-0 flex items-center justify-center`}
 			intent="secondary"
 		>
-			<CloseButton className="w-4 h-4 aspect-square" />
+			<CloseButton className={`w-4 h-4 aspect-square ${!isOpen && "rotate-180"}`} />
 		</Button>
 	);
 }

From c11436ef03b07e806347f238a18d14844715b10b Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Thu, 11 Apr 2024 10:16:21 +0000
Subject: [PATCH 4/4] chore: update export

---
 src/components/Sidebar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 86744fa..e4bb5c7 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -1,2 +1,2 @@
 export * from "./Sidebar";
-export * from "./Sidebar";
+export * from "./SidebarContext";