Refactor breadcrumb component

src/app/organizations/[organizationSlug]/projects/[projectSlug]/[feedbackId]/page.tsx

@@ -10,7 +10,7 @@ import {
   useInfiniteCommentsQuery,
   useOrganizationRoleQuery,
 } from "generated/graphql";
-import { getFeedback } from "lib/actions";
+import { getFeedback, getOrganizationProjects } from "lib/actions";
 import { app } from "lib/config";
 import { freeTierCommentsOptions } from "lib/options";
 import { getQueryClient } from "lib/util";
@@ -40,7 +40,12 @@ const FeedbackPage = async ({ params }: Props) => {
 
   if (!session) notFound();
 
-  const feedback = await getFeedback({ feedbackId });
+  const [organizationProjects, feedback] = await Promise.all([
+    getOrganizationProjects({ organizationSlug }),
+    getFeedback({ feedbackId }),
+  ]);
+
+  const numberOfProjects = organizationProjects?.nodes?.length ?? 0;
 
   if (!feedback) notFound();
 
@@ -61,7 +66,17 @@ const FeedbackPage = async ({ params }: Props) => {
     },
     {
       label: feedback?.project?.name ?? projectSlug,
-      href: `/organizations/${organizationSlug}/projects/${projectSlug}`,
+      href:
+        numberOfProjects === 1
+          ? `/organizations/${organizationSlug}/projects/${projectSlug}`
+          : undefined,
+      children:
+        numberOfProjects > 1
+          ? organizationProjects?.nodes.map((project) => ({
+              label: project!.name,
+              href: `/organizations/${organizationSlug}/projects/${project!.slug}`,
+            }))
+          : undefined,
     },
     {
       label: app.feedbackPage.breadcrumb,

src/app/organizations/[organizationSlug]/projects/[projectSlug]/page.tsx

@@ -17,7 +17,7 @@ import {
   useProjectStatusesQuery,
   useStatusBreakdownQuery,
 } from "generated/graphql";
-import { getProject } from "lib/actions";
+import { getOrganizationProjects, getProject } from "lib/actions";
 import { app } from "lib/config";
 import { getSdk } from "lib/graphql";
 import { freeTierFeedbackOptions } from "lib/options";
@@ -41,7 +41,10 @@ export const generateMetadata = async ({ params }: Props) => {
 
 interface Props {
   /** Project page params. */
-  params: Promise<{ organizationSlug: string; projectSlug: string }>;
+  params: Promise<{
+    organizationSlug: string;
+    projectSlug: string;
+  }>;
   /** Projects page search params. */
   searchParams: Promise<SearchParams>;
 }
@@ -56,9 +59,12 @@ const ProjectPage = async ({ params, searchParams }: Props) => {
 
   if (!session) notFound();
 
-  const project = await getProject({ organizationSlug, projectSlug });
+  const [project, organizationProjects] = await Promise.all([
+    getProject({ organizationSlug, projectSlug }),
+    getOrganizationProjects({ organizationSlug, excludeProjects: projectSlug }),
+  ]);
 
-  if (!project) notFound();
+  if (!project || !organizationProjects) notFound();
 
   const sdk = getSdk({ session });
 
@@ -87,6 +93,12 @@ const ProjectPage = async ({ params, searchParams }: Props) => {
     },
     {
       label: project.name ?? projectSlug,
+      children: organizationProjects?.nodes?.length
+        ? organizationProjects?.nodes.map((project) => ({
+            label: project!.name,
+            href: `/organizations/${organizationSlug}/projects/${project!.slug}`,
+          }))
+        : undefined,
     },
   ];
 

src/components/core/breadcrumb/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { Flex, Icon, Text } from "@omnidev/sigil";
+import { LuChevronRight, LuEllipsis } from "react-icons/lu";
+
+import { BreadcrumbDropdown, BreadcrumbTrigger, Link } from "components/core";
+import { app } from "lib/config";
+
+const sharedIconStyles = {
+  color: "foreground.subtle",
+  h: 4,
+  w: 4,
+  mx: 1.5,
+};
+
+export interface BreadcrumbRecord {
+  label: string;
+  href?: `/${string}`;
+  /** Sub-items or nested dropdown items (unified) */
+  children?: {
+    label: string;
+    href?: `/${string}`;
+  }[];
+}
+
+interface Props {
+  /** Array of navigation breadcrumbs. */
+  breadcrumbs: BreadcrumbRecord[];
+}
+
+/**
+ * Breadcrumb.
+ */
+const Breadcrumb = ({ breadcrumbs }: Props) => {
+  const lastItem = breadcrumbs[breadcrumbs.length - 1];
+
+  return (
+    <Flex fontSize="sm" align="center">
+      <Link href="/">
+        <Text
+          color="foreground.subtle"
+          _hover={{ color: "foreground.default" }}
+        >
+          {app.breadcrumb}
+        </Text>
+      </Link>
+
+      {/* base viewport */}
+      <Flex align="center" display={{ base: "flex", lg: "none" }}>
+        <Icon src={LuChevronRight} {...sharedIconStyles} />
+
+        {breadcrumbs.length > 1 && (
+          <Flex>
+            <BreadcrumbDropdown
+              positioning={{
+                offset: {
+                  mainAxis: 12,
+                },
+              }}
+              trigger={
+                <Flex align="center" cursor="pointer">
+                  <Icon
+                    src={LuEllipsis}
+                    size="sm"
+                    color={{
+                      base: "foreground.subtle",
+                      _hover: "foreground.default",
+                    }}
+                  />
+                </Flex>
+              }
+              breadcrumbs={breadcrumbs.slice(0, -1)}
+            />
+
+            <Icon src={LuChevronRight} {...sharedIconStyles} />
+          </Flex>
+        )}
+
+        {lastItem.children?.length ? (
+          <BreadcrumbDropdown
+            trigger={
+              <Flex>
+                <BreadcrumbTrigger
+                  label={lastItem.label}
+                  isLastItem={true}
+                  icon
+                />
+              </Flex>
+            }
+            breadcrumbs={lastItem.children}
+          />
+        ) : (
+          <BreadcrumbTrigger label={lastItem.label} isLastItem={true} />
+        )}
+      </Flex>
+
+      {/* Large viewport */}
+      <Flex display={{ base: "none", lg: "flex" }}>
+        {breadcrumbs.map(({ label, href, children }, index) => {
+          const isLastItem = breadcrumbs.length - 1 === index;
+
+          return (
+            <Flex
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              key={`${label}-${index}`}
+              align="center"
+            >
+              <Icon src={LuChevronRight} {...sharedIconStyles} />
+
+              {children?.length ? (
+                <BreadcrumbDropdown
+                  trigger={
+                    <Flex>
+                      <BreadcrumbTrigger
+                        label={label}
+                        isLastItem={isLastItem}
+                        icon
+                      />
+                    </Flex>
+                  }
+                  breadcrumbs={children}
+                />
+              ) : href ? (
+                <Link href={href}>
+                  <BreadcrumbTrigger label={label} isLastItem={isLastItem} />
+                </Link>
+              ) : (
+                <Text>{label}</Text>
+              )}
+            </Flex>
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Breadcrumb;

src/components/core/breadcrumb/BreadcrumbDropdown/BreadcrumbDropdown.tsx

@@ -0,0 +1,85 @@
+import {
+  Icon,
+  Menu,
+  MenuItemGroup,
+  MenuItem,
+  Text,
+  Flex,
+} from "@omnidev/sigil";
+import { LuChevronRight } from "react-icons/lu";
+import { useRouter } from "next/navigation";
+
+import type { BreadcrumbRecord } from "components/core/breadcrumb";
+import type { MenuProps } from "@omnidev/sigil";
+
+interface Props extends MenuProps {
+  /** Array of navigation breadcrumbs. */
+  breadcrumbs: BreadcrumbRecord[];
+}
+
+/**
+ * Breadcrumb dropdown.
+ */
+const BreadcrumbDropdown = ({ breadcrumbs, trigger, ...rest }: Props) => {
+  const router = useRouter();
+
+  return (
+    <Menu trigger={trigger} {...rest}>
+      <MenuItemGroup minW={32} w="full">
+        {breadcrumbs.map(({ label, href, children }, index) => (
+          <Flex
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            key={`${label}-${index}`}
+            w="full"
+          >
+            {children?.length ? (
+              <Menu
+                trigger={
+                  <MenuItem
+                    value={label}
+                    w="full"
+                    justifyContent="space-between"
+                  >
+                    <Text>{label}</Text>
+                    <Icon
+                      src={LuChevronRight}
+                      color="foreground.subtle"
+                      h={4}
+                      w={4}
+                    />
+                  </MenuItem>
+                }
+              >
+                <MenuItemGroup minW={32}>
+                  {children.map(({ label: childLabel, href: childHref }) => (
+                    <MenuItem
+                      key={childLabel}
+                      value={childLabel}
+                      onSelect={() => childHref && router.push(childHref)}
+                    >
+                      <Flex alignItems="center" w="full" h="full">
+                        {childLabel}
+                      </Flex>
+                    </MenuItem>
+                  ))}
+                </MenuItemGroup>
+              </Menu>
+            ) : (
+              <MenuItem
+                value={label}
+                w="full"
+                onSelect={() => href && router.push(href)}
+              >
+                <Flex alignItems="center" w="full" h="full">
+                  {label}
+                </Flex>
+              </MenuItem>
+            )}
+          </Flex>
+        ))}
+      </MenuItemGroup>
+    </Menu>
+  );
+};
+
+export default BreadcrumbDropdown;