Sha256: ae6d8ad3d51726fb92812b1b1d2f61ee27386870b9004c33d027cdc326eaa670
Contents?: true
Size: 1.52 KB
Versions: 14
Compression:
Stored size: 1.52 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'>
{navItems.map((text, index) => {
const [collapsed] = collapsibles[index]
return (
<NavItem
collapsed={collapsed}
collapsible
collapsibleTrail
fontWeight="bolder"
iconLeft="chevron-down"
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
14 entries across 14 versions & 2 rubygems