diff --git a/src/components/developDocsHeader.tsx b/src/components/developDocsHeader.tsx new file mode 100644 index 0000000000000..3416995e9c9d6 --- /dev/null +++ b/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: () => ( +
+ ), +}); + +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..f96234cb6ff79 100644 --- a/src/components/docPage/index.tsx +++ b/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 (
-
+ {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