const navItem = (item: NavItem, index: number, indent = false) => { const { component, name, badge, icon, ...rest } = item const Component = component return ( <Component as="div" key={index}> {rest.href ? ( <CNavLink {...{ as: Link, className: location === rest.href || location.startsWith(rest.href + '/') ? 'active' : '', }} {...rest} > {navLink(name, icon, badge, indent)} </CNavLink> ) : ( navLink(name, icon, badge, indent) )} </Component> ) } 

 const navGroup = (item: NavItem, index: number) => { const { component, name, icon, items, href, ...rest } = item const Component = component console.log(location, href, location === href) return ( <Component className={`text-white border-white`} compact as="div" key={index} toggler={navLink(name, icon)} {...rest} > {items?.map((item: NavItem, index: number) => item.items ? navGroup(item, index) : navItem(item, index, true), )} </Component> ) }