fix(nav): Update nav styles in disabled member page (#89816)

Author: malwilley

static/app/views/nav/orgDropdown.tsx

@@ -47,7 +47,13 @@ function createOrganizationMenuItem(): MenuItemProps {
   };
 }
 
-export function OrgDropdown({className}: {className?: string}) {
+export function OrgDropdown({
+  className,
+  hideOrgLinks,
+}: {
+  className?: string;
+  hideOrgLinks?: boolean;
+}) {
   const api = useApi();
   const theme = useTheme();
 
@@ -108,25 +114,25 @@ export function OrgDropdown({className}: {className?: string}) {
               key: 'organization-settings',
               label: t('Organization Settings'),
               to: `/organizations/${organization.slug}/settings/`,
-              hidden: !hasOrgRead,
+              hidden: !hasOrgRead || hideOrgLinks,
             },
             {
               key: 'members',
               label: t('Members'),
               to: `/organizations/${organization.slug}/settings/members/`,
-              hidden: !hasMemberRead,
+              hidden: !hasMemberRead || hideOrgLinks,
             },
             {
               key: 'teams',
               label: t('Teams'),
               to: `/organizations/${organization.slug}/settings/teams/`,
-              hidden: !hasTeamRead,
+              hidden: !hasTeamRead || hideOrgLinks,
             },
             {
               key: 'billing',
               label: t('Usage & Billing'),
               to: `/organizations/${organization.slug}/settings/billing/`,
-              hidden: !hasBillingAccess,
+              hidden: !hasBillingAccess || hideOrgLinks,
             },
             {
               key: 'switch-organization',

static/gsApp/hooks/disabledMemberView.tsx

@@ -10,13 +10,16 @@ import Footer from 'sentry/components/footer';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import PageOverlay from 'sentry/components/pageOverlay';
-import {SidebarWrapper} from 'sentry/components/sidebar';
+import {SidebarWrapper as LegacySidebarWrapper} from 'sentry/components/sidebar';
 import SidebarDropdown from 'sentry/components/sidebar/sidebarDropdown';
 import {t, tct} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import {useApiQuery, useMutation} from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 import {useParams} from 'sentry/utils/useParams';
+import {OrgDropdown} from 'sentry/views/nav/orgDropdown';
+import {usePrefersStackedNav} from 'sentry/views/nav/prefersStackedNav';
 
 import {sendUpgradeRequest} from 'getsentry/actionCreators/upsell';
 import DeactivatedMember from 'getsentry/components/features/illustrations/deactivatedMember';
@@ -36,6 +39,8 @@ function DisabledMemberView(props: Props) {
   const {subscription} = props;
   const orgSlug = subscription.slug;
 
+  const prefersStackedNav = usePrefersStackedNav();
+
   const {
     data: organization,
     isPending,
@@ -49,9 +54,11 @@ function DisabledMemberView(props: Props) {
   );
 
   useEffect(() => {
-    // needed to make the left margin work as expected
-    document.body.classList.add('body-sidebar');
-  }, []);
+    if (!prefersStackedNav) {
+      // needed to make the left margin work as expected
+      document.body.classList.add('body-sidebar');
+    }
+  }, [prefersStackedNav]);
 
   useEffect(() => {
     if (organization) {
@@ -123,11 +130,17 @@ function DisabledMemberView(props: Props) {
   );
   return (
     <PageContainer>
-      <MinimalistSidebar collapsed={false}>
-        {organization && (
-          <SidebarDropdown orientation="left" collapsed={false} hideOrgLinks />
-        )}
-      </MinimalistSidebar>
+      {prefersStackedNav ? (
+        <MinimalistSidebar>
+          {organization ? <OrgDropdown hideOrgLinks /> : null}
+        </MinimalistSidebar>
+      ) : (
+        <MinimalistSidebarLegacy collapsed={false}>
+          {organization && (
+            <SidebarDropdown orientation="left" collapsed={false} hideOrgLinks />
+          )}
+        </MinimalistSidebarLegacy>
+      )}
       {organization && (
         <PageOverlay
           background={DeactivatedMember}
@@ -200,10 +213,20 @@ function DisabledMemberView(props: Props) {
 
 export default withSubscription(DisabledMemberView);
 
-const MinimalistSidebar = styled(SidebarWrapper)`
+const MinimalistSidebarLegacy = styled(LegacySidebarWrapper)`
   padding: 12px 19px;
 `;
 
+const MinimalistSidebar = styled('div')`
+  height: 60px;
+  border-bottom: 1px solid
+    ${p => (p.theme.isChonk ? p.theme.border : p.theme.translucentGray200)};
+  background: ${p => (p.theme.isChonk ? p.theme.background : p.theme.surface300)};
+  display: flex;
+  align-items: center;
+  padding: 0 ${space(2)};
+`;
+
 const PageContainer = styled('div')`
   display: flex;
   flex-direction: column;