A couple side menu fixes

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -11,11 +11,12 @@ import {
   Squares2X2Icon,
   SquaresPlusIcon,
 } from "@heroicons/react/24/outline";
-import { NavLink } from "@remix-run/react";
+import { Link, NavLink, useLocation } from "@remix-run/react";
 import { useState } from "react";
 import invariant from "tiny-invariant";
 import { CurrentProject } from "~/features/ee/projects/routes/projects/$projectP";
 import { useCurrentEnvironment } from "~/hooks/useEnvironments";
+import { useIsOrgChildPage } from "~/hooks/useIsOrgChildPage";
 import {
   useCurrentOrganization,
   useOrganizations,
@@ -24,6 +25,7 @@ import { useCurrentWorkflow } from "~/hooks/useWorkflows";
 import { EnvironmentIcon } from "~/routes/resources/environment";
 import { titleCase } from "~/utils";
 import { CopyTextPanel } from "../CopyTextButton";
+import { Logo } from "../Logo";
 import { LogoIcon } from "../LogoIcon";
 import { TertiaryButton } from "../primitives/Buttons";
 import { MenuTitleToolTip } from "../primitives/MenuTitleToolTip";
@@ -79,7 +81,12 @@ export function OrganizationsSideMenu() {
   }
 
   return (
-    <SideMenu title={currentOrganization.title} items={items} backPath="/" />
+    <SideMenu
+      subtitle="Organization"
+      title={currentOrganization.title}
+      items={items}
+      backPath="/"
+    />
   );
 }
 
@@ -102,16 +109,11 @@ export function OrganizationSideMenuCollapsed() {
         </li>
       </NavLink>
       <MenuTitleToolTip text="Workflows">
-        <NavLink
-          to={`/orgs/${currentOrganization.slug}`}
-          className={({ isActive }) =>
-            isActive ? activeCollapsedStyle : defaultCollapsedStyle
-          }
-        >
+        <WorkflowsNavLink slug={currentOrganization.slug}>
           <li>
             <ArrowsRightLeftIcon className="h-6 w-6 text-slate-300" />
           </li>
-        </NavLink>
+        </WorkflowsNavLink>
       </MenuTitleToolTip>
       <MenuTitleToolTip text="Repositories">
         <NavLink
@@ -202,6 +204,7 @@ export function WorkflowsSideMenu() {
 
   return (
     <SideMenu
+      subtitle="Workflow"
       title={currentWorkflow.title}
       items={items}
       backPath={`/orgs/${organization.slug}`}
@@ -243,7 +246,14 @@ export function ProjectSideMenu({
     },
   ];
 
-  return <SideMenu title={project.name} items={items} backPath={backPath} />;
+  return (
+    <SideMenu
+      subtitle="Repository"
+      title={project.name}
+      items={items}
+      backPath={backPath}
+    />
+  );
 }
 
 const defaultStyle =
@@ -254,14 +264,18 @@ const activeStyle =
 function SideMenu({
   items,
   title,
+  subtitle,
 }: {
   title: string;
   items: SideMenuItem[];
   backPath: string;
+  subtitle: string;
 }) {
   const organization = useCurrentOrganization();
   invariant(organization, "Organization must be defined");
 
+  const isOrgChildPage = useIsOrgChildPage();
+
   const [isShowingKeys, setIsShowingKeys] = useState(false);
 
   return (
@@ -272,26 +286,29 @@ function SideMenu({
           aria-label="Side menu"
         >
           <div className="flex flex-col">
-            {/* <div className="mb-2 p-3">
-              <NavLink to="/">
-                <Logo className="h-7 w-[160px]" />
-              </NavLink>
-            </div> */}
+            {isOrgChildPage ? (
+              <div className="flex h-[3.6rem] items-center border-b border-slate-800 pl-5 pr-1">
+                <Header1
+                  size="extra-small"
+                  className="overflow-hidden text-ellipsis whitespace-nowrap text-slate-300"
+                >
+                  {title}
+                </Header1>
+              </div>
+            ) : (
+              <div className="mb-2 p-3">
+                <NavLink to="/">
+                  <Logo className="h-7 w-[160px]" />
+                </NavLink>
+              </div>
+            )}
 
-            <div className="flex h-[3.6rem] items-center border-b border-slate-800 pl-5 pr-1">
-              <Header1
-                size="extra-small"
-                className="overflow-hidden text-ellipsis whitespace-nowrap text-slate-300"
-              >
-                {title}
-              </Header1>
-            </div>
             <div className="p-2">
               <Body
                 size="small"
                 className="py-3 pl-3 uppercase tracking-wider text-slate-400"
               >
-                Workflow
+                {subtitle}
               </Body>
               {items.map((item) => (
                 <NavLink
@@ -379,6 +396,30 @@ function SideMenu({
   );
 }
 
+function WorkflowsNavLink({
+  slug,
+  children,
+}: {
+  slug: string;
+  children: React.ReactNode;
+}) {
+  const location = useLocation();
+
+  const isActive =
+    location.pathname === `/orgs/${slug}` ||
+    location.pathname.startsWith(`/orgs/${slug}/workflows`);
+
+  return (
+    <Link
+      to={`/orgs/${slug}`}
+      prefetch="intent"
+      className={isActive ? activeCollapsedStyle : defaultCollapsedStyle}
+    >
+      {children}
+    </Link>
+  );
+}
+
 const menuSmallTitleStyle = "uppercase text-slate-500 tracking-wide";
 const menuSmallLinkStyle =
   "flex gap-1.5 text-slate-400 hover:text-white text-sm items-center transition";

apps/webapp/app/features/ee/projects/routes/projects/$projectP.tsx

@@ -49,8 +49,6 @@ export async function loader({ params }: LoaderArgs) {
 export default function ProjectLayout() {
   const { project, organizationSlug } = useTypedLoaderData<typeof loader>();
 
-  console.log("ProjectLayout");
-
   return (
     <SideMenuContainer>
       <ProjectSideMenu

apps/webapp/app/hooks/useIsOrgChildPage.ts

@@ -0,0 +1,16 @@
+import { useMatches } from "@remix-run/react";
+
+export function useIsOrgChildPage() {
+  const matchesData = useMatches();
+
+  return matchesData.some((matchData) => {
+    return (
+      matchData.id.startsWith(
+        "routes/__app/orgs/$organizationSlug/__org/workflows/$workflowSlug"
+      ) ||
+      matchData.id.startsWith(
+        "routes/__app/orgs/$organizationSlug/__org/projects/$projectP"
+      )
+    );
+  });
+}

apps/webapp/app/routes/__app/orgs/$organizationSlug/__org.tsx

@@ -1,30 +1,20 @@
-import { Outlet, useMatches } from "@remix-run/react";
+import { Outlet } from "@remix-run/react";
 import {
   AppLayoutThreeCol,
   AppLayoutTwoCol,
 } from "~/components/layout/AppLayout";
 import {
-  OrganizationsSideMenu,
   OrganizationSideMenuCollapsed,
+  OrganizationsSideMenu,
 } from "~/components/navigation/SideMenu";
+import { useIsOrgChildPage } from "~/hooks/useIsOrgChildPage";
 
 export default function OrganizationLayout() {
-  const matchesData = useMatches();
-
-  const isThreeColLayout = matchesData.some((matchData) => {
-    return (
-      matchData.id.startsWith(
-        "routes/__app/orgs/$organizationSlug/__org/workflows/$workflowSlug"
-      ) ||
-      matchData.id.startsWith(
-        "routes/__app/orgs/$organizationSlug/__org/projects/$projectP"
-      )
-    );
-  });
+  const isOrgChildPage = useIsOrgChildPage();
 
   return (
     <>
-      {isThreeColLayout ? (
+      {isOrgChildPage ? (
         <AppLayoutThreeCol>
           <OrganizationSideMenuCollapsed />
           <Outlet />