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(ui): enhance sidebar layout with responsive design and collapsed state

Browse Source
This commit is contained in:
Mauricio Siu
2025-02-25 23:13:55 -06:00
parent 7048e7e37e
commit d3c59ff8af
1 changed files with 50 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -525,34 +525,63 @@ function SidebarLogo() {
<Loader2 className="animate-spin size-4" /> <Loader2 className="animate-spin size-4" />
</div> </div>
) : ( ) : (
<SidebarMenu> <SidebarMenu
<SidebarMenuItem className="flex items-center gap-2"> className={cn(
"flex gap-2",
state === "collapsed"
? "flex-col"
: "flex-row justify-between items-center",
)}
>
{/* Organization Logo and Selector */}
<SidebarMenuItem>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<SidebarMenuButton <SidebarMenuButton
size="lg" size={state === "collapsed" ? "sm" : "lg"}
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" className={cn(
"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
state === "collapsed" &&
"flex justify-center items-center p-2 h-10 w-10 mx-auto",
)}
> >
<div className="flex items-center gap-2"> <div
<div className="flex size-6 items-center justify-center rounded-sm border"> className={cn(
"flex items-center gap-2",
state === "collapsed" && "justify-center",
)}
>
<div
className={cn(
"flex items-center justify-center rounded-sm border",
"size-6",
)}
>
<Logo <Logo
className={cn( className={cn(
"transition-all", "transition-all",
state === "collapsed" ? "size-6" : "size-10", state === "collapsed" ? "size-4" : "size-5",
)} )}
/> />
</div> </div>
<div className="flex flex-col items-start"> <div
className={cn(
"flex flex-col items-start",
state === "collapsed" && "hidden",
)}
>
<p className="text-sm font-medium leading-none"> <p className="text-sm font-medium leading-none">
{activeOrganization?.name ?? "Select Organization"} {activeOrganization?.name ?? "Select Organization"}
</p> </p>
</div> </div>
</div> </div>
<ChevronsUpDown className="ml-auto" /> <ChevronsUpDown
className={cn("ml-auto", state === "collapsed" && "hidden")}
/>
</SidebarMenuButton> </SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className=" rounded-lg" className="rounded-lg"
align="start" align="start"
side={isMobile ? "bottom" : "right"} side={isMobile ? "bottom" : "right"}
sideOffset={4} sideOffset={4}
@@ -627,10 +656,20 @@ function SidebarLogo() {
)} )}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</SidebarMenuItem>
{/* Notification Bell */}
<SidebarMenuItem className={cn(state === "collapsed" && "mt-2")}>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="relative"> <Button
variant="ghost"
size="icon"
className={cn(
"relative",
state === "collapsed" && "h-8 w-8 p-1.5 mx-auto",
)}
>
<Bell className="size-4" /> <Bell className="size-4" />
{invitations && invitations.length > 0 && ( {invitations && invitations.length > 0 && (
<span className="absolute -top-0 -right-0 flex size-4 items-center justify-center rounded-full bg-blue-500 text-xs text-white"> <span className="absolute -top-0 -right-0 flex size-4 items-center justify-center rounded-full bg-blue-500 text-xs text-white">