Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-07-09 07:55:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3270 from Bima42/3165-add-environment-switch-dropdown

Browse Source 
feat: being able to switch environments from breadcrumbs
This commit is contained in:
Mauricio Siu
2025-12-18 00:20:00 -06:00
committed by GitHub
parent 27fa0e881a 3aeb52810c
commit 0590e78854
9 changed files with 117 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/dokploy/components/shared/breadcrumb-sidebar.tsx
View File

@@ -1,22 +1,36 @@
import Link from "next/link";
import { Fragment } from "react";
import { ChevronDown } from "lucide-react";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
interface Props {
list: {
interface BreadcrumbEntry {
name: string;
href?: string;
dropdownItems?: {
name: string;
href?: string;
href: string;
}[];
}
interface Props {
list: BreadcrumbEntry[];
}
export const BreadcrumbSidebar = ({ list }: Props) => {
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">
@@ -29,13 +43,29 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
{list.map((item, index) => (
<Fragment key={item.name}>
<BreadcrumbItem className="block">
<BreadcrumbLink href={item?.href} asChild={!!item?.href}>
{item.href ? (
<Link href={item?.href}>{item?.name}</Link>
) : (
item?.name
)}
</BreadcrumbLink>
{item.dropdownItems && item.dropdownItems.length > 0 ? (
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground transition-colors outline-none">
{item.name}
<ChevronDown className="h-4 w-4 opacity-50" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
{item.dropdownItems.map((subItem) => (
<DropdownMenuItem key={subItem.href} asChild>
<Link href={subItem.href}>{subItem.name}</Link>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : (
<BreadcrumbLink href={item?.href} asChild={!!item?.href}>
{item.href ? (
<Link href={item?.href}>{item?.name}</Link>
) : (
<BreadcrumbPage>{item?.name}</BreadcrumbPage>
)}
</BreadcrumbLink>
)}
</BreadcrumbItem>
{index + 1 < list.length && (
<BreadcrumbSeparator className="block" />