From 94ee5391fba86b4d4e273aa1fa87ceb1bfc49c05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gabriel?= <joao.tonaco@proton.me>
Date: Mon, 13 Jan 2025 09:19:32 -0300
Subject: [PATCH 1/2] refactor: apply ease-out to sidebar toggle animation

---
 apps/dokploy/components/ui/sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/ui/sidebar.tsx b/apps/dokploy/components/ui/sidebar.tsx
index bb3601dc..a930da6d 100644
--- a/apps/dokploy/components/ui/sidebar.tsx
+++ b/apps/dokploy/components/ui/sidebar.tsx
@@ -231,7 +231,7 @@ const Sidebar = React.forwardRef<
 				{/* This is what handles the sidebar gap on desktop */}
 				<div
 					className={cn(
-						"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+						"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-out",
 						"group-data-[collapsible=offcanvas]:w-0",
 						"group-data-[side=right]:rotate-180",
 						variant === "floating" || variant === "inset"
@@ -241,7 +241,7 @@ const Sidebar = React.forwardRef<
 				/>
 				<div
 					className={cn(
-						"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+						"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-out md:flex",
 						side === "left"
 							? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
 							: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",

From c5eb8b087db9becbd3604f0a525a3135ca0d53a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gabriel?= <joao.tonaco@proton.me>
Date: Mon, 13 Jan 2025 09:20:02 -0300
Subject: [PATCH 2/2] refactor: transition logo size

---
 apps/dokploy/components/layouts/side.tsx | 34 ++++++++++++++----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/apps/dokploy/components/layouts/side.tsx b/apps/dokploy/components/layouts/side.tsx
index 1d99552b..efb91fc2 100644
--- a/apps/dokploy/components/layouts/side.tsx
+++ b/apps/dokploy/components/layouts/side.tsx
@@ -348,23 +348,28 @@ function SidebarLogo() {
 	return (
 		<Link
 			href="/dashboard/projects"
-			className=" flex items-center gap-2 p-1 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]/35 rounded-lg "
+			className="flex items-center gap-2 p-1 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]/35 rounded-lg "
 		>
 			<div
 				className={cn(
-					"flex aspect-square items-center justify-center rounded-lg ",
+					"flex aspect-square items-center justify-center rounded-lg transition-all",
 					state === "collapsed" ? "size-6" : "size-10",
 				)}
 			>
-				<Logo className={state === "collapsed" ? "size-6" : "size-10"} />
+				<Logo
+					className={cn(
+						"transition-all",
+						state === "collapsed" ? "size-6" : "size-10",
+					)}
+				/>
 			</div>
 
-			{state === "expanded" && (
-				<div className="flex flex-col gap-1 text-left text-sm leading-tight group-data-[state=open]/collapsible:rotate-90">
-					<span className="truncate font-semibold">Dokploy</span>
-					<span className="truncate text-xs">{dokployVersion}</span>
-				</div>
-			)}
+			<div className="text-left text-sm leading-tight group-data-[state=open]/collapsible:rotate-90">
+				<p className="truncate font-semibold">Dokploy</p>
+				<p className="truncate text-xs text-muted-foreground">
+					{dokployVersion}
+				</p>
+			</div>
 		</Link>
 	);
 }
@@ -451,11 +456,12 @@ export default function Page({ children }: Props) {
 		>
 			<Sidebar collapsible="icon" variant="floating">
 				<SidebarHeader>
-					<SidebarMenu>
-						<SidebarMenuItem>
-							<LogoWrapper />
-						</SidebarMenuItem>
-					</SidebarMenu>
+					<SidebarMenuButton
+						className="group-data-[collapsible=icon]:!p-0"
+						size="lg"
+					>
+						<LogoWrapper />
+					</SidebarMenuButton>
 				</SidebarHeader>
 				<SidebarContent>
 					<SidebarGroup>