sidebar

Default

const links = [
  { label: "Dashboard", href: "/dashboard", icon: <FaBook /> },
  {
    label: "Reports",
    href: "/reports",
    children: [
      { label: "Monthly", href: "/reports/monthly", icon: <FaCalendar /> },
      { label: "Annual", href: "/reports/annual", icon: <FaCalendar /> },
    ],
    icon: <FaPaperclip />,
  },
  { label: "Settings", href: "/settings", icon: <FaCogs /> },
];

const currentPath = "/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}
/>