refactor: transition logo size

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>