Merge pull request #4012 from Dokploy/3979-collapsed-sidebar-state-has-usability-and-visual-issues

3979 collapsed sidebar state has usability and visual issues

Author: Siumauricio

apps/dokploy/components/dashboard/projects/show.tsx

@@ -169,11 +169,6 @@ export const ShowProjects = () => {
 			<BreadcrumbSidebar
 				list={[{ name: "Projects", href: "/dashboard/projects" }]}
 			/>
-			{!isCloud && (
-				<div className="absolute top-4 right-4">
-					<TimeBadge />
-				</div>
-			)}
 			<div className="w-full">
 				<Card className="h-full bg-sidebar p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">

apps/dokploy/components/layouts/side.tsx

@@ -545,6 +545,7 @@ function SidebarLogo() {
 	const { mutateAsync: setDefaultOrganization, isPending: isSettingDefault } =
 		api.organization.setDefault.useMutation();
 	const { isMobile } = useSidebar();
+	const isCollapsed = state === "collapsed" && !isMobile;
 	const { data: activeOrganization } = api.organization.active.useQuery();
 
 	const { data: invitations, refetch: refetchInvitations } =
@@ -570,27 +571,25 @@ function SidebarLogo() {
 				<SidebarMenu
 					className={cn(
 						"flex gap-2",
-						state === "collapsed"
-							? "flex-col"
-							: "flex-row justify-between items-center",
+						isCollapsed ? "flex-col" : "flex-row justify-between items-center",
 					)}
 				>
 					{/* Organization Logo and Selector */}
 					<SidebarMenuItem className={"w-full"}>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<SidebarMenuButton
-									size={state === "collapsed" ? "sm" : "lg"}
+									size={isCollapsed ? "sm" : "lg"}
 									className={cn(
 										"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
-										state === "collapsed" &&
+										isCollapsed &&
 											"flex justify-center items-center p-2 h-10 w-10 mx-auto",
 									)}
 								>
 									<div
 										className={cn(
 											"flex items-center gap-2",
-											state === "collapsed" && "justify-center",
+											isCollapsed && "justify-center",
 										)}
 									>
 										<div
@@ -602,15 +601,15 @@ function SidebarLogo() {
 											<Logo
 												className={cn(
 													"transition-all",
-													state === "collapsed" ? "size-4" : "size-5",
+													isCollapsed ? "size-4" : "size-5",
 												)}
 												logoUrl={activeOrganization?.logo || undefined}
 											/>
 										</div>
 										<div
 											className={cn(
 												"flex flex-col items-start",
-												state === "collapsed" && "hidden",
+												isCollapsed && "hidden",
 											)}
 										>
 											<p className="text-sm font-medium leading-none">
@@ -619,7 +618,7 @@ function SidebarLogo() {
 										</div>
 									</div>
 									<ChevronsUpDown
-										className={cn("ml-auto", state === "collapsed" && "hidden")}
+										className={cn("ml-auto", isCollapsed && "hidden")}
 									/>
 								</SidebarMenuButton>
 							</DropdownMenuTrigger>
@@ -768,15 +767,15 @@ function SidebarLogo() {
 					</SidebarMenuItem>
 
 					{/* Notification Bell */}
-					<SidebarMenuItem className={cn(state === "collapsed" && "mt-2")}>
+					<SidebarMenuItem className={cn(isCollapsed && "mt-2")}>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<Button
 									variant="ghost"
 									size="icon"
 									className={cn(
 										"relative",
-										state === "collapsed" && "h-8 w-8 p-1.5 mx-auto",
+										isCollapsed && "h-8 w-8 p-1.5 mx-auto",
 									)}
 								>
 									<Bell className="size-4" />
@@ -1145,14 +1144,9 @@ export default function Page({ children }: Props) {
 							</div>
 						)}
 						{dokployVersion && (
-							<>
-								<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
-									Version {dokployVersion}
-								</div>
-								<div className="hidden text-xs text-muted-foreground text-center group-data-[collapsible=icon]:block">
-									{dokployVersion}
-								</div>
-							</>
+							<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
+								Version {dokployVersion}
+							</div>
 						)}
 					</SidebarMenu>
 				</SidebarFooter>

apps/dokploy/components/shared/breadcrumb-sidebar.tsx

@@ -17,6 +17,8 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Separator } from "@/components/ui/separator";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { TimeBadge } from "@/components/ui/time-badge";
+import { api } from "@/utils/api";
 
 interface BreadcrumbEntry {
 	name: string;
@@ -32,9 +34,11 @@ interface Props {
 }
 
 export const BreadcrumbSidebar = ({ list }: Props) => {
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+
 	return (
 		<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-			<div className="flex items-center justify-between w-full">
+			<div className="flex items-center justify-between w-full px-4">
 				<div className="flex items-center gap-2">
 					<SidebarTrigger className="-ml-1" />
 					<Separator orientation="vertical" className="mr-2 h-4" />
@@ -75,6 +79,7 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 						</BreadcrumbList>
 					</Breadcrumb>
 				</div>
+				{!isCloud && <TimeBadge />}
 			</div>
 		</header>
 	);

apps/dokploy/components/ui/sidebar.tsx

@@ -213,7 +213,9 @@ const Sidebar = React.forwardRef<
 						}
 						side={side}
 					>
-						<div className="flex h-full w-full flex-col">{children}</div>
+						<div className="flex h-full w-full flex-col overflow-hidden">
+							{children}
+						</div>
 					</SheetContent>
 				</Sheet>
 			);
@@ -412,7 +414,7 @@ const SidebarContent = React.forwardRef<
 			ref={ref}
 			data-sidebar="content"
 			className={cn(
-				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-y-auto",
 				className,
 			)}
 			{...props}