apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-25 19:15:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fix: expand/collapse on full button click

Browse source
This commit is contained in:
msinha569 2025-10-28 09:49:59 +05:30
parent 5ac6ebf199
commit 61edefa7b2
1 changed files with 32 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

30
surfsense_web/components/sidebar/nav-main.tsx
View file

@ -62,23 +62,27 @@ export function NavMain({ items }: { items: NavItem[] }) {
<SidebarMenu> <SidebarMenu>
{memoizedItems.map((item, index) => { {memoizedItems.map((item, index) => {
const translatedTitle = translateTitle(item.title); const translatedTitle = translateTitle(item.title);
const hasSub = !!item.items?.length;
return ( return (
<Collapsible key={`${item.title}-${index}`} asChild defaultOpen={item.isActive}> <Collapsible key={`${item.title}-${index}`} asChild defaultOpen={item.isActive}>
<SidebarMenuItem> <SidebarMenuItem>
{hasSub ? (
// When the item has children, make the whole row a collapsible trigger
<>
<CollapsibleTrigger asChild>
<SidebarMenuButton <SidebarMenuButton
asChild asChild
tooltip={translatedTitle} tooltip={translatedTitle}
isActive={item.isActive} isActive={item.isActive}
aria-label={`${translatedTitle}${item.items?.length ? " with submenu" : ""}`} aria-label={`${translatedTitle} with submenu`}
> >
<a href={item.url}> <button type="button" className="flex items-center gap-2 w-full text-left">
<item.icon /> <item.icon />
<span>{translatedTitle}</span> <span>{translatedTitle}</span>
</a> </button>
</SidebarMenuButton> </SidebarMenuButton>
</CollapsibleTrigger>
{item.items?.length ? (
<>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<SidebarMenuAction <SidebarMenuAction
className="data-[state=open]:rotate-90 transition-transform duration-200" className="data-[state=open]:rotate-90 transition-transform duration-200"
@ -88,6 +92,7 @@ export function NavMain({ items }: { items: NavItem[] }) {
<span className="sr-only">Toggle submenu</span> <span className="sr-only">Toggle submenu</span>
</SidebarMenuAction> </SidebarMenuAction>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 duration-200"> <CollapsibleContent className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 duration-200">
<SidebarMenuSub> <SidebarMenuSub>
{item.items?.map((subItem, subIndex) => { {item.items?.map((subItem, subIndex) => {
@ -105,7 +110,20 @@ export function NavMain({ items }: { items: NavItem[] }) {
</SidebarMenuSub> </SidebarMenuSub>
</CollapsibleContent> </CollapsibleContent>
</> </>
) : null} ) : (
// Leaf item: treat as a normal link
<SidebarMenuButton
asChild
tooltip={translatedTitle}
isActive={item.isActive}
aria-label={translatedTitle}
>
<a href={item.url}>
<item.icon />
<span>{translatedTitle}</span>
</a>
</SidebarMenuButton>
)}
</SidebarMenuItem> </SidebarMenuItem>
</Collapsible> </Collapsible>
); );