Sha256: c081ab6673ee79e489d2e3b89eeafda1f243472e2b1ff308cfc2fd6973bc77a4
Contents?: true
Size: 1.66 KB
Versions: 18
Compression:
Stored size: 1.66 KB
Contents
import React from "react"
import { Nav, NavItem, useCollapsible } from "../.."
const CollapsibleNav = (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)
}
})
}
const handleIconRightClick = (index) => {
const [isCollapsed, setCollapsed] = collapsibles[index]
setCollapsed(!isCollapsed)
}
return (
<>
<Nav variant='subtle'>
{navItems.map((text, index) => {
const [collapsed] = collapsibles[index]
return (
<NavItem
collapsible
collapsibleClick={() => handleMainClick(index)}
iconLeft="chevron-down"
iconRightClick={() => handleIconRightClick(index)}
id={`collapsible-nav-item-${index + 1}`}
key={index}
link="#"
text={text}
toggleCollapsed={collapsed}
{...props}
>
<NavItem link="#"
text="City"
{...props}
/>
<NavItem link="#"
text="People"
{...props}
/>
<NavItem link="#"
text="Business"
{...props}
/>
</NavItem>
);
})}
</Nav>
</>
)
}
export default CollapsibleNav
Version data entries
18 entries across 18 versions & 2 rubygems