Sha256: 58088ed00c6be31037f62f8f02e03717ea1a0726760b05361da3b69fc9c9d69e
Contents?: true
Size: 1.6 KB
Versions: 6
Compression:
Stored size: 1.6 KB
Contents
import React from "react"
import { Nav, NavItem, useCollapsible } from "../.."
const CollapsibleNavCustom = (props) => {
const navItems = ["Overview", "Albums", "Similar Artists"]
// eslint-disable-next-line react-hooks/rules-of-hooks
const collapsibles = navItems.map(() => useCollapsible(true))
const handleMainClick = (index) => {
collapsibles.forEach(([, , setCollapsed], idx) => {
if (idx === index) {
setCollapsed(false)
} else {
setCollapsed(true)
}
})
}
return (
<>
<Nav
variant="bold"
{...props}
>
{navItems.map((text, index) => {
const [collapsed] = collapsibles[index]
return (
<NavItem
collapsed={collapsed}
collapsible
collapsibleTrail
fontWeight="bolder"
iconLeft="chevron-down"
iconRight={["plus", "minus"]}
id={`collapsible-nav-item-${index + 1}`}
key={index}
link="#"
onClick={() => handleMainClick(index)}
text={text}
{...props}
>
<NavItem link="#"
text="City"
{...props}
/>
<NavItem link="#"
text="People"
{...props}
/>
<NavItem link="#"
text="Business"
{...props}
/>
</NavItem>
);
})}
</Nav>
</>
)
}
export default CollapsibleNavCustom
Version data entries
6 entries across 6 versions & 2 rubygems