Sha256: d2a28e5bbddd6d17e3361e5602cc690c6444478169f59dfb59f73d083ef87932
Contents?: true
Size: 1.64 KB
Versions: 679
Compression:
Stored size: 1.64 KB
Contents
import React from "react"
import { Nav, NavItem, useCollapsible } from "playbook-ui"
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
679 entries across 679 versions & 2 rubygems