diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx index 345414c4d..2692a464d 100644 --- a/apps/webapp/app/components/navigation/SideMenu.tsx +++ b/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 ( - + ); } @@ -102,16 +109,11 @@ export function OrganizationSideMenuCollapsed() { - - isActive ? activeCollapsedStyle : defaultCollapsedStyle - } - > +
  • -
    +
    ; + return ( + + ); } 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" >
    - {/*
    - - - -
    */} + {isOrgChildPage ? ( +
    + + {title} + +
    + ) : ( +
    + + + +
    + )} -
    - - {title} - -
    - Workflow + {subtitle} {items.map((item) => ( + {children} + + ); +} + 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"; diff --git a/apps/webapp/app/features/ee/projects/routes/projects/$projectP.tsx b/apps/webapp/app/features/ee/projects/routes/projects/$projectP.tsx index e0fe55b51..a168732f8 100644 --- a/apps/webapp/app/features/ee/projects/routes/projects/$projectP.tsx +++ b/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(); - console.log("ProjectLayout"); - return ( { + return ( + matchData.id.startsWith( + "routes/__app/orgs/$organizationSlug/__org/workflows/$workflowSlug" + ) || + matchData.id.startsWith( + "routes/__app/orgs/$organizationSlug/__org/projects/$projectP" + ) + ); + }); +} diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org.tsx index ee1c8d57a..5b2ee512b 100644 --- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org.tsx +++ b/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 ? (