Use the handle to determine if the side menu is expanded

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 (

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() {

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() {

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() {

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() {

apps/webapp/app/utils/handle.ts

@@ -2,4 +2,5 @@ import { BreadcrumbItem } from "~/components/navigation/Breadcrumb";
 
 export type Handle = {
   breadcrumb?: BreadcrumbItem;
+  expandSidebar?: boolean;
 };