Sha256: 1368efb0f23f4e72a4a9cfb91c8385482a619974e86c02dbb24eeba0e0c99c0c
Contents?: true
Size: 1.63 KB
Versions: 493
Compression:
Stored size: 1.63 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
fontSize="small"
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
493 entries across 493 versions & 2 rubygems