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

Merge pull request #1107 from joaotonaco/refactor/improve_sidebar_animation

Browse Source 
refactor(sidebar): improve animation
This commit is contained in:
Mauricio Siu
2025-01-13 22:38:41 -06:00
committed by GitHub
parent f9b1c2575e c5eb8b087d
commit 7b9426586d
2 changed files with 22 additions and 16 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>

4
apps/dokploy/components/ui/sidebar.tsx
View File

@@ -231,7 +231,7 @@ const Sidebar = React.forwardRef<
{/* This is what handles the sidebar gap on desktop */} {/* This is what handles the sidebar gap on desktop */}
<div <div
className={cn( 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-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180", "group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset" variant === "floating" || variant === "inset"
@@ -241,7 +241,7 @@ const Sidebar = React.forwardRef<
/> />
<div <div
className={cn( 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" side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",