From 0a7bae4dacbf8600b72130d6825555fa44ea8693 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Tue, 11 Jul 2023 14:35:14 +0100
Subject: [PATCH] Use the handle to determine if the side menu is expanded

---
 .../app/components/navigation/ProjectSideMenu.tsx   | 13 ++++++++-----
 .../route.tsx                                       |  1 +
 .../route.tsx                                       |  1 +
 .../route.tsx                                       |  1 +
 .../route.tsx                                       |  1 +
 apps/webapp/app/utils/handle.ts                     |  1 +
 6 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/navigation/ProjectSideMenu.tsx b/apps/webapp/app/components/navigation/ProjectSideMenu.tsx
index 16baad473..1e0b3c0ad 100644
--- a/apps/webapp/app/components/navigation/ProjectSideMenu.tsx
+++ b/apps/webapp/app/components/navigation/ProjectSideMenu.tsx
@@ -18,6 +18,8 @@ import { UserProfilePhoto } from "../UserProfilePhoto";
 import { NavLinkButton } from "../primitives/Buttons";
 import type { IconNames } from "../primitives/NamedIcon";
 import { SimpleTooltip } from "../primitives/Tooltip";
+import { usePathName } from "~/hooks/usePathName";
+import { Handle } from "~/utils/handle";
 
 export function SideMenuContainer({ children }: { children: React.ReactNode }) {
   return (
@@ -46,14 +48,15 @@ export function ProjectSideMenu() {
   const project = useProject();
   const matches = useMatches();
 
-  //we collapse the menu if we're in a job or an integration
-  const job = useOptionalJob();
-  const client = useOptionalIntegrationClient();
-  const isCollapsed = job !== undefined || client !== undefined;
+  //the deepest route `handle` determines if the menu is expanded
+  const deepestMatch = matches.at(-1);
+  const handle = deepestMatch?.handle as Handle;
+  const isCollapsed = handle?.expandSidebar ? !handle.expandSidebar : true;
 
+  const job = useOptionalJob();
   const jobsActive =
     job !== undefined ||
-    matches.at(-1)?.id ===
+    deepestMatch?.id ===
       "routes/_app.orgs.$organizationSlug.projects.$projectParam._index";
 
   return (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx
index eb7f5a454..29b4f69df 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx
@@ -32,6 +32,7 @@ export const handle: Handle = {
   breadcrumb: (match) => (
     <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Jobs" />
   ),
+  expandSidebar: true,
 };
 
 export default function Page() {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx
index 537e47131..511038506 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx
@@ -76,6 +76,7 @@ export const handle: Handle = {
   breadcrumb: (match) => (
     <BreadcrumbLink to={match.pathname} title="Environments" />
   ),
+  expandSidebar: true,
 };
 
 export default function Page() {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route.tsx
index 172ee3d02..adc873006 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route.tsx
@@ -72,6 +72,7 @@ export const handle: Handle = {
   breadcrumb: (match) => (
     <BreadcrumbLink to={match.pathname} title="Integrations" />
   ),
+  expandSidebar: true,
 };
 
 export default function Integrations() {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
index 5b480e4ae..9d878e263 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
@@ -50,6 +50,7 @@ export const handle: Handle = {
       title="External Triggers"
     />
   ),
+  expandSidebar: true,
 };
 
 export default function Integrations() {
diff --git a/apps/webapp/app/utils/handle.ts b/apps/webapp/app/utils/handle.ts
index 4263cf467..60ed8d431 100644
--- a/apps/webapp/app/utils/handle.ts
+++ b/apps/webapp/app/utils/handle.ts
@@ -2,4 +2,5 @@ import { BreadcrumbItem } from "~/components/navigation/Breadcrumb";
 
 export type Handle = {
   breadcrumb?: BreadcrumbItem;
+  expandSidebar?: boolean;
 };