feat: add option to keep sidebar open (#68)

Author: Cahllagerfeld

.changeset/hot-elephants-beam.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": patch
+---
+
+add option to keep sidebar open

.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>

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 bg-transparent h-6 p-0 flex items-center justify-center`}
+			intent="secondary"
+		>
+			<CloseButton className={`w-4 h-4 aspect-square ${!isOpen && "rotate-180"}`} />
+		</Button>
+	);
+}

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

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;
+}

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

src/components/Sidebar/SidebarItem.stories.tsx

@@ -3,14 +3,17 @@ 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",
 	component: SidebarItem,
 	decorators: [
 		(Story) => (
 			<ul style={{ listStyle: "none" }} className="group">
-				<Story />
+				<SidebarProvider initialOpen={false}>
+					<Story />
+				</SidebarProvider>
 			</ul>
 		)
 	],

src/components/Sidebar/index.tsx

@@ -1 +1,2 @@
 export * from "./Sidebar";
+export * from "./SidebarContext";