Show active tab in deployment view

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import {
+  NavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from "@ctrlplane/ui/navigation-menu";
+
+interface NavigationMenuTabProps {
+  href: string;
+  children?: React.ReactNode;
+  exact?: boolean;
+}
+
+export const NavigationMenuTab: React.FC<NavigationMenuTabProps> = ({
+  children,
+  href,
+  exact = false,
+}) => {
+  const pathname = usePathname();
+  return (
+    <Link href={href} legacyBehavior passHref>
+      <NavigationMenuLink
+        className={navigationMenuTriggerStyle()}
+        active={exact ? pathname === href : pathname.includes(href)}
+      >
+        {children}
+      </NavigationMenuLink>
+    </Link>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx

@@ -6,9 +6,7 @@ import { Badge } from "@ctrlplane/ui/badge";
 import {
   NavigationMenu,
   NavigationMenuItem,
-  NavigationMenuLink,
   NavigationMenuList,
-  navigationMenuTriggerStyle,
 } from "@ctrlplane/ui/navigation-menu";
 import {
   Tooltip,
@@ -21,6 +19,7 @@ import { api } from "~/trpc/server";
 import { SystemBreadcrumbNavbar } from "../../../SystemsBreadcrumb";
 import { TopNav } from "../../../TopNav";
 import { NavigationMenuAction } from "./NavigationMenuAction";
+import { NavigationMenuTab } from "./NavigationMenuTab";
 
 function nFormatter(num: number, digits: number) {
   const lookup = [
@@ -92,38 +91,25 @@ export default async function DeploymentLayout({
           <NavigationMenu>
             <NavigationMenuList>
               <NavigationMenuItem>
-                <Link href={releasesUrl} legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                    Releases
-                    <Badge
-                      variant="outline"
-                      className="ml-1.5 rounded-full text-muted-foreground"
-                    >
-                      {nFormatter(releases.total, 1)}
-                    </Badge>
-                  </NavigationMenuLink>
-                </Link>
-              </NavigationMenuItem>
-              <NavigationMenuItem>
-                <Link href={variablesUrl} legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                    Variables
-                  </NavigationMenuLink>
-                </Link>
+                <NavigationMenuTab href={releasesUrl}>
+                  Releases
+                  <Badge
+                    variant="outline"
+                    className="ml-1.5 rounded-full text-muted-foreground"
+                  >
+                    {nFormatter(releases.total, 1)}
+                  </Badge>
+                </NavigationMenuTab>
               </NavigationMenuItem>
               <NavigationMenuItem>
-                <Link href={variablesUrl} legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                    Jobs
-                  </NavigationMenuLink>
-                </Link>
+                <NavigationMenuTab href={variablesUrl}>
+                  Variables
+                </NavigationMenuTab>
               </NavigationMenuItem>
               <NavigationMenuItem>
-                <Link href={overviewUrl} legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                    Settings
-                  </NavigationMenuLink>
-                </Link>
+                <NavigationMenuTab href={overviewUrl} exact>
+                  Settings
+                </NavigationMenuTab>
               </NavigationMenuItem>
             </NavigationMenuList>
           </NavigationMenu>