orus-dev/drift
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Context menu sidebar

Browse Source
This commit is contained in:
selimaj-dev
2026-02-28 14:06:00 +01:00
parent 1931f9208b
commit e71b481dbb
2 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sidebar/AppSidebar.tsx
+10 -2
View File
@@ -164,10 +164,10 @@ export default function AppSidebar({
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="flex w-full items-center justify-between px-2 py-1 text-sm">
<Button className="w-full" variant='ghost'>
{workspace.name}
<ChevronDown className="ml-auto h-4 w-4 opacity-60" />
</button>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
@@ -236,6 +236,14 @@ export default function AppSidebar({
>
Create workspace
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => {
localStorage.removeItem(workspace.id);
}}
variant="destructive"
>
Delete workspace
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
src/components/sidebar/Entity.tsx
+50 -49
View File
@@ -30,6 +30,13 @@ import {
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger,
} from "../ui/context-menu";
type Props = {
node: LayoutNode;
@@ -58,7 +65,6 @@ export default function EntitySwitch({
removeNode,
renameGroup,
}: Props) {
const [menuOpen, setMenuOpen] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);
const [dialogValue, setDialogValue] = useState("");
const [dialogMode, setDialogMode] = useState<
@@ -74,7 +80,6 @@ export default function EntitySwitch({
setDialogValue(initial);
}
setDialogOpen(true);
setMenuOpen(false);
};
const handleDialogSubmit = () => {
@@ -100,32 +105,30 @@ export default function EntitySwitch({
<SidebarGroup>
<SidebarGroupLabel asChild>
<div className="flex items-center justify-between w-full">
<SidebarMenuButton asChild>
<CollapsibleTrigger className="flex w-full items-center">
{node.name}
<ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
</CollapsibleTrigger>
</SidebarMenuButton>
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
<DropdownMenuTrigger asChild>
<button className="p-1 hover:bg-accent rounded">
<MoreHorizontal className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => openDialog("add-item")}>
<ContextMenu>
<ContextMenuTrigger asChild>
<SidebarMenuButton asChild>
<CollapsibleTrigger className="flex w-full items-center">
{node.name}
<ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
</CollapsibleTrigger>
</SidebarMenuButton>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onSelect={() => openDialog("add-item")}>
Add list
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => openDialog("add-group")}>
</ContextMenuItem>
<ContextMenuItem onSelect={() => openDialog("add-group")}>
Add group
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem
onSelect={() => openDialog("rename-group", node.name)}
>
Rename
</DropdownMenuItem>
<DropdownMenuItem
</ContextMenuItem>
<ContextMenuItem
variant="destructive"
onSelect={() => {
if (
window.confirm("Delete this group and its children?")
@@ -135,9 +138,9 @@ export default function EntitySwitch({
}}
>
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</div>
</SidebarGroupLabel>
@@ -209,29 +212,27 @@ export default function EntitySwitch({
return (
<SidebarMenuItem>
<div className="flex items-center justify-between w-full">
<SidebarMenuButton
onClick={() =>
setRoute({
workspace: workspace.id,
entity: node.entityId,
})
}
>
{workspaceEntity.name}
</SidebarMenuButton>
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
<DropdownMenuTrigger asChild>
<button className="p-1 hover:bg-accent rounded">
<MoreHorizontal className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
<ContextMenu>
<ContextMenuTrigger asChild>
<SidebarMenuButton
onClick={() =>
setRoute({
workspace: workspace.id,
entity: node.entityId,
})
}
>
{workspaceEntity.name}
</SidebarMenuButton>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
onSelect={() => openDialog("rename-item", workspaceEntity.name)}
>
Rename
</DropdownMenuItem>
<DropdownMenuItem
</ContextMenuItem>
<ContextMenuItem
variant="destructive"
onSelect={() => {
if (window.confirm("Delete this list?")) {
deleteEntity(node.entityId);
@@ -239,9 +240,9 @@ export default function EntitySwitch({
}}
>
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</div>
</SidebarMenuItem>
);