fix(develop-docs): Restore old header and fix sidebar collapse on sub-pages

src/components/developDocsHeader.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import {HamburgerMenuIcon, TriangleRightIcon} from '@radix-ui/react-icons';
+import * as Popover from '@radix-ui/react-popover';
+import {Box, Button, Theme} from '@radix-ui/themes';
+import dynamic from 'next/dynamic';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import SentryLogoSVG from 'sentry-docs/logos/sentry-logo-dark.svg';
+
+import mobileMenuStyles from './mobileMenu/styles.module.scss';
+import sidebarStyles from './sidebar/style.module.scss';
+
+import {NavLink} from './navlink';
+import {ThemeToggle} from './theme-toggle';
+
+// Lazy load Search to reduce initial bundle size.
+const Search = dynamic(() => import('./search').then(mod => ({default: mod.Search})), {
+  ssr: false,
+  loading: () => (
+    <div className="h-10 w-full max-w-md rounded-lg border border-[var(--gray-a5)] bg-[var(--gray-2)] animate-pulse" />
+  ),
+});
+
+export const developerDocsSidebarToggleId = sidebarStyles['navbar-menu-toggle'];
+
+type Props = {
+  pathname: string;
+  searchPlatforms: string[];
+  noSearch?: boolean;
+  useStoredSearchPlatforms?: boolean;
+};
+
+export function DevelopDocsHeader({
+  pathname,
+  searchPlatforms,
+  noSearch,
+  useStoredSearchPlatforms,
+}: Props) {
+  return (
+    <header className="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0">
+      {/* define a header-height variable for consumption by other components */}
+      <style>{':root { --header-height: 80px; }'}</style>
+      <nav className="nav-inner mx-auto px-3 py-2 flex items-center">
+        {pathname !== '/' && (
+          <button className="md:hidden mr-3">
+            <label
+              htmlFor={developerDocsSidebarToggleId}
+              aria-label="Toggle sidebar navigation"
+              className="inline-flex items-center cursor-pointer"
+            >
+              <HamburgerMenuIcon
+                className="inline dark:text-[var(--foreground)] text-[var(--gray-10)]"
+                strokeWidth="1.8"
+                width="22"
+                height="22"
+              />
+            </label>
+          </button>
+        )}
+        <Link
+          href="/"
+          title="Sentry error monitoring"
+          className="logo-slot flex flex-shrink-0 items-center lg-xl:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
+        >
+          <div className="h-full pb-[6px]">
+            <Image
+              src={SentryLogoSVG}
+              alt="Sentry's logo"
+              width={40}
+              className="h-16 dark:invert"
+            />
+          </div>
+          Docs
+        </Link>
+        {!noSearch && (
+          <div className="hidden md:flex justify-center lg-xl:justify-start max-w-md w-full px-6">
+            <Search
+              path={pathname}
+              searchPlatforms={searchPlatforms}
+              showChatBot
+              useStoredSearchPlatforms={useStoredSearchPlatforms}
+            />
+          </div>
+        )}
+        <div className="hidden lg-xl:flex justify-end flex-1 gap-6 items-center min-w-fit">
+          <NavLink href="https://sentry.io/changelog/">Changelog</NavLink>
+          <NavLink href="https://sandbox.sentry.io/">Sandbox</NavLink>
+          <NavLink href="https://sentry.io/">Go to Sentry</NavLink>
+          <NavLink
+            href="https://sentry.io/signup/"
+            className="transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-[#fa7faa] hover:via-[#ff9691] hover:to-[#ffb287]"
+          >
+            Get Started
+          </NavLink>
+          <ThemeToggle />
+        </div>
+        <div className="lg-xl:hidden ml-auto">
+          <div className="flex gap-6 items-center">
+            <Popover.Root>
+              <Popover.Trigger asChild>
+                <Button
+                  variant="ghost"
+                  size="4"
+                  color="gray"
+                  radius="medium"
+                  className="font-medium text-[var(--foreground)]"
+                >
+                  Menu
+                  <TriangleRightIcon />
+                </Button>
+              </Popover.Trigger>
+              <Popover.Portal>
+                <Theme accentColor="iris">
+                  <Popover.Content
+                    className={mobileMenuStyles.PopoverContent}
+                    sideOffset={5}
+                  >
+                    <Box display={{xs: 'block', sm: 'none'}}>
+                      <li className={mobileMenuStyles.MenuItem}>
+                        <Search path={pathname} searchPlatforms={searchPlatforms} />
+                      </li>
+                      <div className={mobileMenuStyles.MenuSeparator} />
+                    </Box>
+                    <li className={mobileMenuStyles.MenuItem}>
+                      <Link href="https://sentry.io/changelog/">Changelog</Link>
+                    </li>
+                    <li className={mobileMenuStyles.MenuItem}>
+                      <Link href="https://sandbox.sentry.io/">Sandbox</Link>
+                    </li>
+                    <li className={mobileMenuStyles.MenuItem}>
+                      <Link href="https://sentry.io/">Go to Sentry</Link>
+                    </li>
+                    <li className={mobileMenuStyles.MenuItem}>
+                      <Link href="https://sentry.io/signup/">Get Started</Link>
+                    </li>
+                  </Popover.Content>
+                </Theme>
+              </Popover.Portal>
+            </Popover.Root>
+          </div>
+        </div>
+      </nav>
+      <style>{`
+        /* Align header width with content + sidebars at wide screens */
+        @media (min-width: 2057px) {
+          header .nav-inner {
+            /* total layout width = sidebar + gap + content + gap + toc */
+            max-width: calc(
+              var(--sidebar-width, 300px)
+              + var(--gap, 24px)
+              + var(--doc-content-w, 1200px)
+              + var(--gap, 24px)
+              + var(--toc-w, 250px)
+            );
+            margin-left: auto;
+            margin-right: auto;
+            /* center, then compensate if sidebar != toc */
+            transform: translateX(calc((var(--toc-w, 250px) - var(--sidebar-width, 300px)) / 2));
+            /* restore small internal padding (≈ Tailwind px-3) */
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
+          }
+          /* Ensure the left logo area equals sidebar width */
+          header .nav-inner .logo-slot {
+            width: var(--sidebar-width, 300px);
+          }
+        }
+      `}</style>
+    </header>
+  );
+}

src/components/docPage/index.tsx

@@ -7,6 +7,7 @@ import {
   getCurrentPlatformOrGuide,
   nodeForPath,
 } from 'sentry-docs/docTree';
+import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs';
 import {serverContext} from 'sentry-docs/serverContext';
 import {FrontMatter} from 'sentry-docs/types';
 import {PaginationNavNode} from 'sentry-docs/types/paginationNavNode';
@@ -20,6 +21,7 @@ import {Breadcrumbs} from '../breadcrumbs';
 import {buildBreadcrumbs} from '../breadcrumbs/utils';
 import {CodeContextProvider} from '../codeContext';
 import {CopyMarkdownButton} from '../copyMarkdownButton';
+import {DevelopDocsHeader} from '../developDocsHeader';
 import {DocFeedback} from '../docFeedback';
 import {GitHubCTA} from '../githubCTA';
 import {Header} from '../header';
@@ -72,11 +74,15 @@ export async function DocPage({
 
   return (
     <div className="tw-app">
-      <Header
-        pathname={pathname}
-        searchPlatforms={searchPlatforms}
-        platforms={platforms}
-      />
+      {isDeveloperDocs ? (
+        <DevelopDocsHeader pathname={pathname} searchPlatforms={searchPlatforms} />
+      ) : (
+        <Header
+          pathname={pathname}
+          searchPlatforms={searchPlatforms}
+          platforms={platforms}
+        />
+      )}
       <section className="px-0 flex relative">
         {sidebar ?? (
           <Sidebar path={unversionedPath.split('/')} versions={frontMatter.versions} />

src/components/sidebar/dynamicNav.tsx

@@ -296,9 +296,9 @@ export function DynamicNav({
   }
 
   const {path} = serverContext();
-  const isActive = getUnversionedPath(path, false) === root;
-  const linkPath = `/${path.join('/')}/`;
   const unversionedPath = getUnversionedPath(path, false);
+  const isActive = unversionedPath === root || unversionedPath.startsWith(root + '/');
+  const linkPath = `/${path.join('/')}/`;
 
   // For platform sidebars (SDK documentation), we want to show a "Quick Start" link
   // instead of making the section header itself selectable