Function SidebarLink

app/components/SideBar.tsx:68–122

({
  children,
  to,
  hotKey,
}: {
  children: React.ReactNode;
  to?: string;
  hotKey?: string;
})

}

function SidebarLink({
  children,
  to,
  hotKey,
}: {
  children: React.ReactNode;
  to?: string;
  hotKey?: string;
}) {
  const location = useLocation();

  const isActive = location.pathname === to;

  const { minimal } = useJsonDoc();
  const [theme] = useTheme();

  const queryParams = new URLSearchParams();

  if (typeof minimal === "boolean") {
    queryParams.set("minimal", String(minimal));

    if (theme) {
      queryParams.set("theme", theme);
    }
  }

  const href = `${to}${queryParams.toString().length > 0 ? `?${queryParams.toString()}` : ""
    }`;

  if (hotKey) {
    const navigate = useNavigate();
    useHotkeys(
      hotKey,
      (e) => {
        e.preventDefault();
        if (!isActive && to) {
          navigate(href);
        }
      },
      [navigate, isActive, to]
    );
  }

  const classes = isActive
    ? "relative w-10 h-10 mb-1 text-white bg-indigo-700 rounded-sm cursor:pointer transition"
    : "relative w-10 h-10 mb-1 text-slate-700 hover:bg-slate-300 rounded-sm cursor:pointer transition dark:text-white dark:hover:bg-slate-700";

  return !!to ? (
    <Link to={href} prefetch={isActive ? "none" : "render"}>
      <li className={classes}>{children}</li>
    </Link>
  ) : (
    <li className={classes}>{children}</li>
  );
}