Currently, I am working on developing a side menu with accordion functionality in Nextjs. I have managed to get the index values from 0 to 1 based on the page URL, but I am facing an issue where the accordion is not opening as expected. Each time a user clicks on a menu item, they are redirected to another page, which is why I want the accordion to open based on the URL.
export default function SideMenu() {
const [accIndex, setAccIndex] = useState(0) // initially set to 0
const router = useRouter();
useEffect(() => {
let url = router.pathname;
let newUrl = url.slice(1, url.length); // remove the '/' at the beginning
let second = newUrl.search("/");
let cutUrl = second > -1 ? newUrl.slice(0, second) : newUrl;
for (const x in Menu) {
if (cutUrl === Menu[x].item.toLowerCase()) {
setAccIndex(Menu[x].index); // set to 1
}
}
}, []);
function selectedMenu(path) {
router.push(path);
}
return (
<>
<Accordion allowMultiple defaultIndex={[accIndex]}>
{/* Dashboard */}
<AccordionItem>
<AccordionButton
className="my-box"
onClick={() => selectedMenu("/dashboard")}
>Dashboard
</AccordionButton>
</AccordionItem>
{/* Dashboard end*/}
{/* About */}
<AccordionItem>
<AccordionButton>
about
<AccordionIcon />
</AccordionButton>
<AccordionPanel>
{/* Company 1 */}
<AccordionItem>
<AccordionButton onClick={() => selectedMenu("/com/company1")}>
Company 1
</AccordionButton>
</AccordionItem>
{/* Company 1 end*/}
</AccordionPanel>
</AccordionItem>
</Accordion>
</>