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>
      )
  }