You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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: radix-ui/primitives#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";
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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: radix-ui/primitives#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) => {
{child.icon && } {child.title}const ChildIcon = Icons[child.icon || "arrowRight"];
console.log("Child index:", index);
return (
);
})}
) : (
{item.icon && } {item.title}item.href && (
)
);
})}
) : null;
}
`
Thanks in advance for any advice you can provide.
NH
Beta Was this translation helpful? Give feedback.
All reactions