Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: transition logo size

Browse Source
This commit is contained in:
João Gabriel
2025-01-13 09:20:02 -03:00
parent 94ee5391fb
commit c5eb8b087d
1 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/dokploy/components/layouts/side.tsx
View File

@@ -348,23 +348,28 @@ function SidebarLogo() {
return ( return (
<Link <Link
href="/dashboard/projects" 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 <div
className={cn( 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", 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> </div>
{state === "expanded" && ( <div className="text-left text-sm leading-tight group-data-[state=open]/collapsible:rotate-90">
<div className="flex flex-col gap-1 text-left text-sm leading-tight group-data-[state=open]/collapsible:rotate-90"> <p className="truncate font-semibold">Dokploy</p>
<span className="truncate font-semibold">Dokploy</span> <p className="truncate text-xs text-muted-foreground">
<span className="truncate text-xs">{dokployVersion}</span> {dokployVersion}
</div> </p>
)} </div>
</Link> </Link>
); );
} }
@@ -451,11 +456,12 @@ export default function Page({ children }: Props) {
> >
<Sidebar collapsible="icon" variant="floating"> <Sidebar collapsible="icon" variant="floating">
<SidebarHeader> <SidebarHeader>
<SidebarMenu> <SidebarMenuButton
<SidebarMenuItem> className="group-data-[collapsible=icon]:!p-0"
<LogoWrapper /> size="lg"
</SidebarMenuItem> >
</SidebarMenu> <LogoWrapper />
</SidebarMenuButton>
</SidebarHeader> </SidebarHeader>
<SidebarContent> <SidebarContent>
<SidebarGroup> <SidebarGroup>