SidebarItem.tsx57 lines · main

1	import { MoreHorizontal } from 'lucide-react'
2	import Link from 'next/link'
3	import { type MouseEventHandler } from 'react'
4	import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
5
6	type Props = {
7	label: string
8	icon?: React.ReactNode
9	dropdownItems?: React.ReactNode
10	href: string
11	isActive: boolean
12	onClick?: MouseEventHandler<HTMLAnchorElement>
13	}
14	export function LogsSidebarItem({ label, icon, dropdownItems, href, isActive, onClick }: Props) {
15	return (
16	<div
17	className={cn(
18	{
19	'bg-foreground-lighter/10': isActive,
20	},
21	'relative flex [&:has([data-state=open])]:bg-foreground-lighter/10 [&:has([data-state=open])]:text-foreground hover:text-foreground hover:bg-foreground-lighter/10 transition-all text-foreground-light group'
22	)}
23	>
24	<Link
25	onClick={onClick}
26	href={href}
27	className={'h-7 flex-1 text-sm px-4 flex items-center gap-2 truncate'}
28	>
29	{icon && <span>{icon}</span>}
30	<span className="truncate">{label}</span>
31	</Link>
32	{dropdownItems && (
33	<DropdownMenu>
34	<DropdownMenuTrigger
35	asChild
36	onClick={(e) => {
37	// Prevents clicking the dropdown from also clicking the parent link and navigating to it
38	e.preventDefault()
39	}}
40	>
41	<Button
42	type="text"
43	title="Actions"
44	className="space-x-0 h-7 px-1.5 opacity-0 group-hover:opacity-100 bg-transparent! data-open:opacity-100"
45	icon={<MoreHorizontal size={14} />}
46	>
47	<div className="sr-only">Actions</div>
48	</Button>
49	</DropdownMenuTrigger>
50	<DropdownMenuContent className="w-48" align="end">
51	{dropdownItems}
52	</DropdownMenuContent>
53	</DropdownMenu>
54	)}
55	</div>
56	)
57	}