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