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="bold"
                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

2 entries across 2 versions & 2 rubygems

Version	Path
playbook_ui_docs-12.37.0.pre.alpha.PLAY951collapsiblenav31073	app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
playbook_ui-12.37.0.pre.alpha.PLAY951collapsiblenav31073	app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx