plane/apps/app/layouts/settings-navbar.tsx

import Link from "next/link";
import { useRouter } from "next/router";

type Props = {
  profilePage?: boolean;
};

const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

  const workspaceLinks: Array<{
    label: string;
    href: string;
  }> = [
    {
      label: "General",
      href: `/${workspaceSlug}/settings`,
    },
    {
      label: "Members",
      href: `/${workspaceSlug}/settings/members`,
    },
    {
      label: "Billing & Plans",
      href: `/${workspaceSlug}/settings/billing`,
    },
    {
      label: "Integrations",
      href: `/${workspaceSlug}/settings/integrations`,
    },
    {
      label: "Import/Export",
      href: `/${workspaceSlug}/settings/import-export`,
    },
  ];

  const projectLinks: Array<{
    label: string;
    href: string;
  }> = [
    {
      label: "General",
      href: `/${workspaceSlug}/projects/${projectId}/settings`,
    },
    {
      label: "Control",
      href: `/${workspaceSlug}/projects/${projectId}/settings/control`,
    },
    {
      label: "Members",
      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
    },
    {
      label: "Features",
      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
    },
    {
      label: "States",
      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
    },
    {
      label: "Labels",
      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
    },
    {
      label: "Integrations",
      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
    },
    {
      label: "Estimates",
      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
    },
    {
      label: "Automations",
      href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
    },
  ];

  const profileLinks: Array<{
    label: string;
    href: string;
  }> = [
    {
      label: "General",
      href: `/${workspaceSlug}/me/profile`,
    },
    {
      label: "Activity",
      href: `/${workspaceSlug}/me/profile/activity`,
    },
    {
      label: "Preferences",
      href: `/${workspaceSlug}/me/profile/preferences`,
    },
  ];

  return (
    <div className="flex flex-wrap gap-4">
      {(profilePage ? profileLinks : projectId ? projectLinks : workspaceLinks).map((link) => (
        <Link key={link.href} href={link.href}>
          <a>
            <div
              className={`rounded-full border px-5 py-1.5 text-sm outline-none ${
                (
                  link.label === "Import/Export"
                    ? router.asPath.includes(link.href)
                    : router.asPath === link.href
                )
                  ? "border-custom-primary bg-custom-primary text-white"
                  : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
              }`}
            >
              {link.label}
            </div>
          </a>
        </Link>
      ))}
    </div>
  );
};

export default SettingsNavbar;