UI breadcrumb active link

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/components/ui/breadcrumb.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -19,8 +19,8 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className,
+      "flex flex-wrap items-center gap-3 break-words text-sm text-gray-500 sm:gap-2.5",
+      className
     )}
     {...props}
   />
@@ -50,7 +50,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
+      className={cn("transition-colors hover:text-primary", className)}
       {...props}
     />
   );
@@ -66,7 +66,7 @@ const BreadcrumbPage = React.forwardRef<
     role="link"
     aria-disabled="true"
     aria-current="page"
-    className={cn("font-normal text-foreground", className)}
+    className={cn("font-normal text-gray-700", className)}
     {...props}
   />
 ));
@@ -80,10 +80,10 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5 text-gray-300", className)}
     {...props}
   >
-    {children ?? <ChevronRight />}
+    {children ?? "/"}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

apps/console/src/layouts/ConsoleLayout.tsx

@@ -1,6 +1,6 @@
-import { Link, Outlet, Route, Routes, useParams } from "react-router";
+import { NavLink, Outlet, Route, Routes, To, useParams } from "react-router";
 import { AppSidebar } from "@/components/AppSidebar";
-import React, { Suspense } from "react";
+import { ReactNode, Suspense } from "react";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -23,15 +23,42 @@ import { ConsoleLayoutBreadcrumbVendorOverviewQuery } from "./__generated__/Cons
 import { ConsoleLayoutBreadcrumbControlOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql";
 import { ConsoleLayoutOrganizationQuery } from "./__generated__/ConsoleLayoutOrganizationQuery.graphql";
 import { ConsoleLayoutBreadcrumbPolicyOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbPolicyOverviewQuery.graphql";
+import { cn } from "@/lib/utils";
+
+const BreadCrumbNavLink = ({
+  to,
+  children,
+  className,
+}: {
+  to: To;
+  children?: ReactNode;
+  className?: string;
+}) => {
+  return (
+    <BreadcrumbLink asChild>
+      <NavLink to={to} end>
+        {({ isActive }) => (
+          <BreadcrumbPage
+            className={cn(
+              "text-gray-300",
+              isActive && "text-gray-700",
+              className
+            )}
+          >
+            {children}
+          </BreadcrumbPage>
+        )}
+      </NavLink>
+    </BreadcrumbLink>
+  );
+};
 
 function BreadcrumbHome() {
   return (
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link to="/">Home</Link>
-          </BreadcrumbLink>
+          <BreadCrumbNavLink to="/">Home</BreadCrumbNavLink>
         </BreadcrumbItem>
         <Outlet />
       </BreadcrumbList>
@@ -57,14 +84,12 @@ function BreadCrumbOrganization() {
   );
 
   return (
-    <Breadcrumb>
+    <Breadcrumb className="select-none">
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link to={`/organizations/${organizationId}`}>
-              {data.organization?.name || "Home"}
-            </Link>
-          </BreadcrumbLink>
+          <BreadCrumbNavLink to={`/organizations/${organizationId}`}>
+            {data.organization?.name || "Home"}
+          </BreadCrumbNavLink>
         </BreadcrumbItem>
         <Outlet />
       </BreadcrumbList>
@@ -78,11 +103,9 @@ function BreadcrumbFrameworkList() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link to={`/organizations/${organizationId}/frameworks`}>
-            Frameworks
-          </Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink to={`/organizations/${organizationId}/frameworks`}>
+          Frameworks
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
       <Outlet />
     </>
@@ -120,13 +143,11 @@ function BreadcrumbFrameworkOverview() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link
-            to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
-          >
-            {data.framework?.name}
-          </Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink
+          to={`/organizations/${organizationId}/frameworks/${frameworkId}`}
+        >
+          {data.framework?.name}
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
       <Outlet />
     </>
@@ -150,9 +171,9 @@ function BreadcrumbVendorList() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link to={`/organizations/${organizationId}/vendors`}>Vendors</Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink to={`/organizations/${organizationId}/vendors`}>
+          Vendors
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
       <Outlet />
     </>
@@ -180,13 +201,11 @@ function BreadcrumbVendorOverview() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link
-            to={`/organizations/${organizationId}/vendors/${data.vendor.id}`}
-          >
-            {data.vendor.name}
-          </Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink
+          to={`/organizations/${organizationId}/vendors/${data.vendor.id}`}
+        >
+          {data.vendor.name}
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
       <Outlet />
     </>
@@ -199,9 +218,9 @@ function BreadcrumbPeopleList() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link to={`/organizations/${organizationId}/people`}>People</Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink to={`/organizations/${organizationId}/people`}>
+          People
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
       <Outlet />
     </>
@@ -240,13 +259,11 @@ function BreadcrumbPeopleOverview() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link
-            to={`/organizations/${organizationId}/people/${data.people.id}`}
-          >
-            {data.people.fullName}
-          </Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink
+          to={`/organizations/${organizationId}/people/${data.people.id}`}
+        >
+          {data.people.fullName}
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
       <Outlet />
     </>
@@ -273,13 +290,11 @@ function BreadcrumbControlOverview() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link
-            to={`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`}
-          >
-            {data.control?.name}
-          </Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink
+          to={`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`}
+        >
+          {data.control?.name}
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
     </>
   );
@@ -302,9 +317,9 @@ function BreadcrumbPolicyList() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link to={`/organizations/${organizationId}/policies`}>Policies</Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink to={`/organizations/${organizationId}/policies`}>
+          Policies
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
       <Outlet />
     </>
@@ -343,11 +358,11 @@ function BreadcrumbPolicyOverview() {
     <>
       <BreadcrumbSeparator />
       <BreadcrumbItem>
-        <BreadcrumbLink asChild>
-          <Link to={`/organizations/${organizationId}/policies/${policyId}`}>
-            {data.policy?.name}
-          </Link>
-        </BreadcrumbLink>
+        <BreadCrumbNavLink
+          to={`/organizations/${organizationId}/policies/${policyId}`}
+        >
+          {data.policy?.name}
+        </BreadCrumbNavLink>
       </BreadcrumbItem>
       <Outlet />
     </>