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> <SidebarMenuItem>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <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} {workspace.name}
<ChevronDown className="ml-auto h-4 w-4 opacity-60" /> <ChevronDown className="ml-auto h-4 w-4 opacity-60" />
</button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
@@ -236,6 +236,14 @@ export default function AppSidebar({
> >
Create workspace Create workspace
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem
onSelect={() => {
localStorage.removeItem(workspace.id);
}}
variant="destructive"
>
Delete workspace
</DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</SidebarMenuItem> </SidebarMenuItem>
src/components/sidebar/Entity.tsx
+34 -33
View File
@@ -30,6 +30,13 @@ import {
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger,
} from "../ui/context-menu";
type Props = { type Props = {
node: LayoutNode; node: LayoutNode;
@@ -58,7 +65,6 @@ export default function EntitySwitch({
removeNode, removeNode,
renameGroup, renameGroup,
}: Props) { }: Props) {
const [menuOpen, setMenuOpen] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [dialogValue, setDialogValue] = useState(""); const [dialogValue, setDialogValue] = useState("");
const [dialogMode, setDialogMode] = useState< const [dialogMode, setDialogMode] = useState<
@@ -74,7 +80,6 @@ export default function EntitySwitch({
setDialogValue(initial); setDialogValue(initial);
} }
setDialogOpen(true); setDialogOpen(true);
setMenuOpen(false);
}; };
const handleDialogSubmit = () => { const handleDialogSubmit = () => {
@@ -100,32 +105,30 @@ export default function EntitySwitch({
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel asChild> <SidebarGroupLabel asChild>
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<ContextMenu>
<ContextMenuTrigger asChild>
<SidebarMenuButton asChild> <SidebarMenuButton asChild>
<CollapsibleTrigger className="flex w-full items-center"> <CollapsibleTrigger className="flex w-full items-center">
{node.name} {node.name}
<ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" /> <ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
</CollapsibleTrigger> </CollapsibleTrigger>
</SidebarMenuButton> </SidebarMenuButton>
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}> </ContextMenuTrigger>
<DropdownMenuTrigger asChild> <ContextMenuContent>
<button className="p-1 hover:bg-accent rounded"> <ContextMenuItem onSelect={() => openDialog("add-item")}>
<MoreHorizontal className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => openDialog("add-item")}>
Add list Add list
</DropdownMenuItem> </ContextMenuItem>
<DropdownMenuItem onSelect={() => openDialog("add-group")}> <ContextMenuItem onSelect={() => openDialog("add-group")}>
Add group Add group
</DropdownMenuItem> </ContextMenuItem>
<DropdownMenuSeparator /> <ContextMenuSeparator />
<DropdownMenuItem <ContextMenuItem
onSelect={() => openDialog("rename-group", node.name)} onSelect={() => openDialog("rename-group", node.name)}
> >
Rename Rename
</DropdownMenuItem> </ContextMenuItem>
<DropdownMenuItem <ContextMenuItem
variant="destructive"
onSelect={() => { onSelect={() => {
if ( if (
window.confirm("Delete this group and its children?") window.confirm("Delete this group and its children?")
@@ -135,9 +138,9 @@ export default function EntitySwitch({
}} }}
> >
Delete Delete
</DropdownMenuItem> </ContextMenuItem>
</DropdownMenuContent> </ContextMenuContent>
</DropdownMenu> </ContextMenu>
</div> </div>
</SidebarGroupLabel> </SidebarGroupLabel>
@@ -209,6 +212,8 @@ export default function EntitySwitch({
return ( return (
<SidebarMenuItem> <SidebarMenuItem>
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<ContextMenu>
<ContextMenuTrigger asChild>
<SidebarMenuButton <SidebarMenuButton
onClick={() => onClick={() =>
setRoute({ setRoute({
@@ -219,19 +224,15 @@ export default function EntitySwitch({
> >
{workspaceEntity.name} {workspaceEntity.name}
</SidebarMenuButton> </SidebarMenuButton>
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}> </ContextMenuTrigger>
<DropdownMenuTrigger asChild> <ContextMenuContent>
<button className="p-1 hover:bg-accent rounded"> <ContextMenuItem
<MoreHorizontal className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
onSelect={() => openDialog("rename-item", workspaceEntity.name)} onSelect={() => openDialog("rename-item", workspaceEntity.name)}
> >
Rename Rename
</DropdownMenuItem> </ContextMenuItem>
<DropdownMenuItem <ContextMenuItem
variant="destructive"
onSelect={() => { onSelect={() => {
if (window.confirm("Delete this list?")) { if (window.confirm("Delete this list?")) {
deleteEntity(node.entityId); deleteEntity(node.entityId);
@@ -239,9 +240,9 @@ export default function EntitySwitch({
}} }}
> >
Delete Delete
</DropdownMenuItem> </ContextMenuItem>
</DropdownMenuContent> </ContextMenuContent>
</DropdownMenu> </ContextMenu>
</div> </div>
</SidebarMenuItem> </SidebarMenuItem>
); );