Sha256: 94f380896d630c124404a8f43365f6392c689ecec4270bbd8115aca27c32adf8

Contents?: true

Size: 1.52 KB

Versions: 6

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='subtle'>
        {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

6 entries across 6 versions & 2 rubygems

Version Path
playbook_ui_docs-12.39.0.pre.alpha.PLAY966collapsiblenav41115 app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
playbook_ui-12.39.0.pre.alpha.PLAY966collapsiblenav41115 app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
playbook_ui_docs-12.38.0.pre.alpha.PLAY966collapsiblenav41086 app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
playbook_ui-12.38.0.pre.alpha.PLAY966collapsiblenav41086 app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
playbook_ui_docs-12.38.0.pre.alpha.PLAY966collapsiblenav41082 app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
playbook_ui-12.38.0.pre.alpha.PLAY966collapsiblenav41082 app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx