From b74fcb1d74c130d3677dd4f5fbc850ceb45a9670 Mon Sep 17 00:00:00 2001 From: Stephanie Anderson Date: Mon, 2 Mar 2026 12:51:15 +0100 Subject: [PATCH 1/6] fix(develop-docs): Restore old header and fix sidebar collapse on sub-pages The nav refresh (fb3c1e192) added the new top navigation header unconditionally to all doc pages, including developer docs which should use the simpler original header. This also broke the sidebar on developer docs sub-pages because the collapsible section `isActive` check used exact path equality instead of prefix matching. - Add DevelopDocsHeader component with the original header layout - Conditionally render DevelopDocsHeader vs Header based on isDeveloperDocs - Fix DynamicNav isActive to use startsWith so child pages expand their parent section Co-Authored-By: Claude --- src/components/developDocsHeader.tsx | 138 ++++++++++++++++++++++++++ src/components/docPage/index.tsx | 16 ++- src/components/sidebar/dynamicNav.tsx | 4 +- 3 files changed, 151 insertions(+), 7 deletions(-) create mode 100644 src/components/developDocsHeader.tsx diff --git a/src/components/developDocsHeader.tsx b/src/components/developDocsHeader.tsx new file mode 100644 index 0000000000000..28bee20cb3ff5 --- /dev/null +++ b/src/components/developDocsHeader.tsx @@ -0,0 +1,138 @@ +'use client'; + +import {HamburgerMenuIcon} from '@radix-ui/react-icons'; +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 sidebarStyles from './sidebar/style.module.scss'; + +import {NavLink} from './navlink'; +import {ThemeToggle} from './theme-toggle'; + +// Lazy load MobileMenu since it's only visible on small screens +const MobileMenu = dynamic( + () => import('./mobileMenu').then(mod => ({default: mod.MobileMenu})), + { + ssr: false, + loading: () =>
, + } +); + +// Lazy load Search to reduce initial bundle size. +const Search = dynamic(() => import('./search').then(mod => ({default: mod.Search})), { + ssr: false, + loading: () => ( +
+ ), +}); + +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 ( +
+ {/* define a header-height variable for consumption by other components */} + + + +
+ ); +} diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx index 92453769331f6..bff60364ef8df 100644 --- a/src/components/docPage/index.tsx +++ b/src/components/docPage/index.tsx @@ -10,6 +10,7 @@ import { import {serverContext} from 'sentry-docs/serverContext'; import {FrontMatter} from 'sentry-docs/types'; import {PaginationNavNode} from 'sentry-docs/types/paginationNavNode'; +import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs'; import {isNotNil} from 'sentry-docs/utils'; import {getUnversionedPath} from 'sentry-docs/versioning'; @@ -22,6 +23,7 @@ import {CodeContextProvider} from '../codeContext'; import {CopyMarkdownButton} from '../copyMarkdownButton'; import {DocFeedback} from '../docFeedback'; import {GitHubCTA} from '../githubCTA'; +import {DevelopDocsHeader} from '../developDocsHeader'; import {Header} from '../header'; import Mermaid from '../mermaid'; import {PaginationNav} from '../paginationNav'; @@ -72,11 +74,15 @@ export async function DocPage({ return (
-
+ {isDeveloperDocs ? ( + + ) : ( +
+ )}
{sidebar ?? ( diff --git a/src/components/sidebar/dynamicNav.tsx b/src/components/sidebar/dynamicNav.tsx index 88287f0316fcc..ccc511566685a 100644 --- a/src/components/sidebar/dynamicNav.tsx +++ b/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 From bda95895a90b701c7f75cb11eb2957ee326c4964 Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Mon, 2 Mar 2026 11:52:55 +0000 Subject: [PATCH 2/6] [getsentry/action-github-commit] Auto commit --- src/components/docPage/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx index bff60364ef8df..f96234cb6ff79 100644 --- a/src/components/docPage/index.tsx +++ b/src/components/docPage/index.tsx @@ -7,10 +7,10 @@ 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'; -import {isDeveloperDocs} from 'sentry-docs/isDeveloperDocs'; import {isNotNil} from 'sentry-docs/utils'; import {getUnversionedPath} from 'sentry-docs/versioning'; @@ -21,9 +21,9 @@ 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 {DevelopDocsHeader} from '../developDocsHeader'; import {Header} from '../header'; import Mermaid from '../mermaid'; import {PaginationNav} from '../paginationNav'; From 4e6432e5ae0531863e145ef24272de62eaa2354e Mon Sep 17 00:00:00 2001 From: Stephanie Anderson Date: Mon, 2 Mar 2026 13:38:57 +0100 Subject: [PATCH 3/6] fix(develop-docs): Replace MobileMenu with inline menu showing only external links The MobileMenu component hardcodes mainSections from navigationData.ts which contains user-facing doc links (/platforms/, /product/, etc.) that don't exist on the developer docs site. Replace with an inline popover menu that only shows the same external links as the desktop nav (Changelog, Sandbox, Go to Sentry, Get Started). Co-Authored-By: Claude --- src/components/developDocsHeader.tsx | 61 +++++++++++++++++++++++----- 1 file changed, 50 insertions(+), 11 deletions(-) diff --git a/src/components/developDocsHeader.tsx b/src/components/developDocsHeader.tsx index 28bee20cb3ff5..6f627b825cc45 100644 --- a/src/components/developDocsHeader.tsx +++ b/src/components/developDocsHeader.tsx @@ -1,26 +1,20 @@ 'use client'; -import {HamburgerMenuIcon} from '@radix-ui/react-icons'; +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 MobileMenu since it's only visible on small screens -const MobileMenu = dynamic( - () => import('./mobileMenu').then(mod => ({default: mod.MobileMenu})), - { - ssr: false, - loading: () =>
, - } -); - // Lazy load Search to reduce initial bundle size. const Search = dynamic(() => import('./search').then(mod => ({default: mod.Search})), { ssr: false, @@ -104,7 +98,52 @@ export function DevelopDocsHeader({
- +
+ + + + + + + + +
  • + +
    • +
    + +
  • + Changelog +
    • +
  • + Sandbox +
    • +
  • + Go to Sentry +
    • +
  • + Get Started +
    • + + + + +
    -
    +
    From 0ac3c064cf481ac5ce631f3755c8f6ad05682bf6 Mon Sep 17 00:00:00 2001 From: Stephanie Anderson Date: Mon, 2 Mar 2026 14:05:20 +0100 Subject: [PATCH 6/6] fix(develop-docs): Fix mobile menu breakpoint gap and hamburger accessibility - Change mobile menu from md:hidden to lg-xl:hidden so nav links are accessible between 768-1130px (where desktop nav is still hidden) - Fix aria-label from hardcoded "Close" to "Toggle sidebar navigation" - Remove aria-hidden="true" from label so button has an accessible name Co-Authored-By: Claude --- src/components/developDocsHeader.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/developDocsHeader.tsx b/src/components/developDocsHeader.tsx index ed4fb541f1f82..3416995e9c9d6 100644 --- a/src/components/developDocsHeader.tsx +++ b/src/components/developDocsHeader.tsx @@ -47,8 +47,7 @@ export function DevelopDocsHeader({
    -
    +