fix(ui): remove nested sidebar list markup

This commit is contained in:
Tam Nhu Tran
2026-02-25 18:27:28 +07:00
parent 473644564d
commit 1698eadc94
+27 -32
View File
@@ -172,38 +172,33 @@ export function AppSidebar() {
defaultOpen={isParentActive(item.children) || isRouteActive(item.path)} defaultOpen={isParentActive(item.children) || isRouteActive(item.path)}
className="group/collapsible" className="group/collapsible"
> >
<SidebarMenuItem> {/* Click navigates to overview AND opens submenu */}
{/* Click navigates to overview AND opens submenu */} <CollapsibleTrigger asChild>
<CollapsibleTrigger asChild> <SidebarMenuButton
<SidebarMenuButton tooltip={getItemLabel(item)}
tooltip={getItemLabel(item)} isActive={isParentActive(item.children)}
isActive={isParentActive(item.children)} onClick={() => navigate(item.path)}
onClick={() => navigate(item.path)} >
> {renderMenuIcon(item)}
{renderMenuIcon(item)} <span className="group-data-[collapsible=icon]:hidden">
<span className="group-data-[collapsible=icon]:hidden"> {getItemLabel(item)}
{getItemLabel(item)} </span>
</span> <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" /> </SidebarMenuButton>
</SidebarMenuButton> </CollapsibleTrigger>
</CollapsibleTrigger> <CollapsibleContent>
<CollapsibleContent> <SidebarMenuSub>
<SidebarMenuSub> {item.children.map((child) => (
{item.children.map((child) => ( <SidebarMenuSubItem key={child.path}>
<SidebarMenuSubItem key={child.path}> <SidebarMenuSubButton asChild isActive={isRouteActive(child.path)}>
<SidebarMenuSubButton <Link to={child.path}>
asChild <span>{child.label}</span>
isActive={isRouteActive(child.path)} </Link>
> </SidebarMenuSubButton>
<Link to={child.path}> </SidebarMenuSubItem>
<span>{child.label}</span> ))}
</Link> </SidebarMenuSub>
</SidebarMenuSubButton> </CollapsibleContent>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible> </Collapsible>
) : ( ) : (
<SidebarMenuButton <SidebarMenuButton