Sidebar design update

static/app/components/demo/demoHeader.tsx

@@ -99,6 +99,10 @@ const Wrapper = styled('div')<{collapsed: boolean}>`
     -1 * ${p => (p.collapsed ? p.theme.sidebar.collapsedWidth : p.theme.sidebar.expandedWidth)}
   );
 
+  .sidebar-v2 & {
+    margin-left: calc(-1 * ${p => p.theme.sidebar.v2_width});
+  }
+
   position: fixed;
   width: 100%;
   border-bottom: 1px solid ${p => p.theme.border};

static/app/components/sidebar/broadcasts.tsx

@@ -116,7 +116,8 @@ class Broadcasts extends Component<Props, State> {
   }
 
   render() {
-    const {orientation, collapsed, currentPanel, hidePanel, organization} = this.props;
+    const {orientation, collapsed, currentPanel, hidePanel, organization, hasNewNav} =
+      this.props;
     const {broadcasts, loading} = this.state;
 
     const unseenPosts = this.unseenIds;
@@ -132,7 +133,8 @@ class Broadcasts extends Component<Props, State> {
             active={currentPanel === SidebarPanelKey.BROADCASTS}
             badge={unseenPosts.length}
             icon={<IconBroadcast size="md" />}
-            label={t("What's new")}
+            hasNewNav={hasNewNav}
+            label={hasNewNav ? t('New') : t("What's new")}
             onClick={this.handleShowPanel}
             id="broadcasts"
           />

static/app/components/sidebar/help.tsx

@@ -20,7 +20,13 @@ type Props = Pick<
   organization: Organization;
 };
 
-function SidebarHelp({orientation, collapsed, hidePanel, organization}: Props) {
+function SidebarHelp({
+  orientation,
+  collapsed,
+  hidePanel,
+  organization,
+  hasNewNav,
+}: Props) {
   return (
     <DeprecatedDropdownMenu>
       {({isOpen, getActorProps, getMenuProps}) => (
@@ -31,6 +37,7 @@ function SidebarHelp({orientation, collapsed, hidePanel, organization}: Props) {
               orientation={orientation}
               collapsed={collapsed}
               hasPanel={false}
+              hasNewNav={hasNewNav}
               icon={<IconQuestion size="md" />}
               label={t('Help')}
               id="help"

static/app/components/sidebar/index.spec.tsx

@@ -109,20 +109,6 @@ describe('Sidebar', function () {
     await userEvent.click(screen.getByTestId('sidebar-dropdown'));
   });
 
-  it('does not render collapse with navigation-sidebar-v2 flag', async function () {
-    renderSidebar({
-      organization: {...organization, features: ['navigation-sidebar-v2']},
-    });
-
-    // await for the page to be rendered
-    expect(await screen.findByText('Issues')).toBeInTheDocument();
-    // Check that the user name is no longer visible
-    expect(screen.queryByText(user.name)).not.toBeInTheDocument();
-    // Check that the organization name is no longer visible
-    expect(screen.queryByText(organization.name)).not.toBeInTheDocument();
-    expect(screen.queryByTestId('sidebar-collapse')).not.toBeInTheDocument();
-  });
-
   it('has can logout', async function () {
     renderSidebar({
       organization: OrganizationFixture({access: ['member:read']}),
@@ -323,9 +309,17 @@ describe('Sidebar', function () {
         expect(apiMocks.broadcasts).toHaveBeenCalled();
       });
 
-      expect(
-        screen.getByRole('navigation', {name: 'Primary Navigation'})
-      ).toBeInTheDocument();
+      expect(screen.getByLabelText('Primary Navigation')).toBeInTheDocument();
+    });
+
+    it('does not render a secondary subnav', async function () {
+      renderSidebar({organization});
+
+      await waitFor(function () {
+        expect(apiMocks.broadcasts).toHaveBeenCalled();
+      });
+
+      expect(screen.queryByLabelText('Secondary Navigation')).not.toBeInTheDocument();
     });
 
     it('in self-hosted-errors-only mode, only shows links to basic features', async function () {
@@ -436,4 +430,43 @@ describe('Sidebar', function () {
       expect(await screen.findByTestId('floating-accordion')).toBeInTheDocument();
     });
   });
+
+  describe('Stacked navigation with navigation-sidebar-v2 flag', () => {
+    it('renders all primary nav items with visible text', async function () {
+      renderSidebarWithFeatures(['navigation-sidebar-v2']);
+
+      const nav = await screen.findByLabelText('Primary Navigation');
+      const links = nav.querySelectorAll('a');
+      const labels = [...links].map(link => link.textContent);
+      expect(labels).toStrictEqual([
+        'Issues',
+        'Projects',
+        'Explore',
+        'Alerts',
+        'Help',
+        'New',
+        'Service status',
+        'Stats',
+        'Settings',
+      ]);
+    });
+
+    it('renders a secondary subnav', async function () {
+      renderSidebarWithFeatures(['navigation-sidebar-v2']);
+
+      const subnav = await screen.findByLabelText('Secondary Navigation');
+      expect(subnav).toBeInTheDocument();
+    });
+
+    it('does not render collapse with navigation-sidebar-v2 flag', async function () {
+      renderSidebarWithFeatures(['navigation-sidebar-v2']);
+
+      expect(await screen.findByText('Issues')).toBeInTheDocument();
+      // Check that the user name is no longer visible
+      expect(screen.queryByText(user.name)).not.toBeInTheDocument();
+      // Check that the organization name is no longer visible
+      expect(screen.queryByText(organization.name)).not.toBeInTheDocument();
+      expect(screen.queryByTestId('sidebar-collapse')).not.toBeInTheDocument();
+    });
+  });
 });