sidebar

  const links = [
    { label: "Dashboard", href: "/demos/dashboard", icon: <FaBook /> },
    {
      label: "Reports",
      href: "/demos/dashboard#analytics",
      children: [
        { label: "Monthly", href: "/demos/dashboard#revenue", icon: <FaCalendar /> },
        { label: "Annual", href: "/demos/dashboard#pipeline", icon: <FaCalendar /> },
      ],
      icon: <FaPaperclip />,
    },
    { label: "Settings", href: "/demos/dashboard#settings", icon: <FaCogs /> },
  ];
  
  const currentPath = "/demos/dashboard#settings";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isDescendantPath = (parentPath: string, currentPath: string) => {
    const parent = normalizePath(parentPath);
    const current = normalizePath(currentPath);
  
    if (parent === "/") return current === "/";
    return current === parent || current.startsWith(`${parent}/`);
  };
  
  const isActiveRecursive = (link, matcher) => {
    if (matcher(link)) return true;
    return !!link.children?.some((child) => isActiveRecursive(child, matcher));
  };
  
  const isLinkActive = (link) => {
    if (!link.href) return false;
  
    if (link.children?.length) {
      return isDescendantPath(link.href, currentPath);
    }
  
    return normalizePath(link.href) === normalizePath(currentPath);
  };
  
  const hasActiveChild = (link) =>
    !!link.children?.some((child) => isActiveRecursive(child, isLinkActive));
  
  <Sidebar
    links={links}
    isLinkActive={isLinkActive}
    hasActiveChild={hasActiveChild}
  />