Open Accordion node from another page

[ParishBeat]

Hi

New to all this, but soldiering on...

I have an accordion that I'm using as a navigation menu sidebar. It's working great so far. What I need is to be able to OPEN the corresponding accordion item when a page is opened.

For example, I click on an accordion item, it opens, I click on the item in the "dropdown" i.e. accordion content. The new page loads and the accordion remains open. The button in the accordion content is highlighted as per the code. All good so far.

However, if a page is loaded from outside of the menu, i.e. from directly entering the URL in the browser, I need the correct accordion item to be open. The button is highlighted correctly so far, but it's hidden as the accordion item is not open. Naturally, all the other accordion items would need to close too (including when navigating using the menu - if someone navigates to a page in a different "section" for example).

I've played with the "setValue" options described here: #824 but I'm not sure how to implement this at the page level.

Here is the contents of my sidemenu component:

`"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { buttonVariants } from "@/components/ui/button";
import { SearchBar } from "./SearchBar";
import { SidebarNavItem } from "@/types";
import { cn } from "@/lib/utils";
import { Icons } from "@/components/Icons";
import React from "react";

export interface SidebarNavProps {
items: SidebarNavItem[];
}

export function SidebarNav({ items }: SidebarNavProps) {
const path = usePathname();

const [value, setValue] = React.useState("");

return items.length ? (

{items?.map((item, index) => {
const Icon = Icons[item.icon || "arrowRight"];
console.log("Parent index: ", index);
return item.children ? (


<AccordionTrigger
className={cn(
path === item.href
? buttonVariants({ size: "sm" })
: buttonVariants({ size: "sm", variant: "ghost" }),
"justify-between",
item.disabled && "cursor-not-allowed opacity-80"
)}
>

{item.icon && }
{item.title}

{item.children.map((child, index) => {
const ChildIcon = Icons[child.icon || "arrowRight"];
console.log("Child index:", index);
return (
<Link
key={index}
href={child.href || "/"}
className={cn(
path === child.href
? buttonVariants({ size: "sm" })
: buttonVariants({ size: "sm", variant: "ghost" }),
"justify-normal",
child.disabled && "cursor-not-allowed opacity-80"
)}
>
{child.icon && }
{child.title}

);
})}

) : (
item.href && (
<Link
key={index}
href={item.href}
className={cn(
path === item.href
? buttonVariants({ size: "sm" })
: buttonVariants({ size: "sm", variant: "ghost" }),
"justify-normal",
item.disabled && "cursor-not-allowed opacity-80"
)}
>
{item.icon && }
{item.title}

)
);
})}

) : null;
}
`

Thanks in advance for any advice you can provide.
NH