Repository: adobe/react-spectrum
File: packages/dev/s2-docs/src/Header.tsx (TypeScript)

Code before:
  }

  return (
    <>
      <header className={style({width: 'full', display: {default: 'none', lg: 'flex'}, justifyContent: 'center'})}>
        <div
          className={style({
            width: 'full', 
            display: 'grid',
            // @eslint-disable-next-line
            gridTemplateColumns: '1fr auto 1fr',
            alignItems: 'center'
          })}>
          <div className={style({justifySelf: 'start'})}>
            <Link
              aria-label="Open menu and search"
              aria-expanded={searchOpen}
              aria-controls={searchOpen ? searchMenuId : undefined}
              href={homepage}
              onKeyDown={handleActionButtonKeyDown}
              // @ts-ignore
              // onHoverStart={() => preloadSearchMenu()}
              ref={ref}
              style={pressScale(ref)}
              className={renderProps => libraryStyles({...renderProps})}>
              <div className={style({display: 'flex', alignItems: 'center'})}>
                <div className={style({marginTop: 4})} style={{viewTransitionName: !searchOpen ? 'search-menu-icon' : 'none'} as CSSProperties}>
                  {getButtonIcon(currentPage)}
                </div>
                <span className={style({font: 'ui-2xl', marginStart: 8})} style={{viewTransitionName: !searchOpen ? 'search-menu-label' : 'none'} as CSSProperties}>
                  {getButtonText(currentPage)}
                </span>
              </div>
            </Link>
          </div>
          <SearchMenuTrigger
            pages={pages}
            currentPage={currentPage}
            onOpen={openSearchMenu}
            onClose={closeSearchMenu}
            isSearchOpen={searchOpen}
            overlayId={searchMenuId} />
          <div className={style({display: 'flex', alignItems: 'center', gap: 4, justifySelf: 'end'})}>
            <Link className={renderProps => linkStyles({...renderProps})} href={docs} ref={docsRef} style={pressScale(docsRef)} >Docs</Link>
            <Link className={renderProps => linkStyles({...renderProps})} href={release} ref={releasesRef} style={pressScale(releasesRef)} >Releases</Link>
            <Link className={renderProps => linkStyles({...renderProps})} href={blog} target={subdirectory === 's2' ? '_blank' : ''} rel="noopener noreferrer" ref={blogRef} style={pressScale(blogRef)} >Blog</Link>
            <ActionButton aria-label="React Spectrum GitHub repo" size="L" isQuiet onPress={() => window.open('https://github.com/adobe/react-spectrum', '_blank', 'noopener,noreferrer')}>
              <GithubLogo />
            </ActionButton>
          </div>
        </div>

Review comment (suggestion):
<img width="349" height="127" alt="Image" src="https://github.com/user-attachments/assets/baeebaf7-0890-44f1-8d5e-097f27550671" />

We might want to update the layout so the button is more aligned with the side nav content visually.

Code after:
      homepage = page.url;
    }
    if (page.name.includes(subdirectory) && page.name.includes('getting-started.html')) {
      docs = page.url;
    }
    if (page.name.includes(subdirectory) && page.name.includes('index.html') && page.name.includes('releases')) {
      release = page.url;
    }
    if (page.name.includes('react-aria') && page.name.includes('index.html') && page.name.includes('blog')) {
      blog = page.url;
    }
  }

  return (
    <>
      <header className={style({width: 'full', display: {default: 'none', lg: 'flex'}, justifyContent: 'center'})}>
        <div
          className={style({
            width: 'full', 
            display: 'grid',
            // @eslint-disable-next-line
            gridTemplateColumns: '1fr auto 1fr',
            alignItems: 'center'
          })}>
          <div className={style({justifySelf: 'start'})}>
            <Link
              aria-label="Open menu and search"
              aria-expanded={searchOpen}
              aria-controls={searchOpen ? searchMenuId : undefined}
              href={homepage}
              onKeyDown={handleActionButtonKeyDown}
              // @ts-ignore
              // onHoverStart={() => preloadSearchMenu()}
              ref={ref}
              style={pressScale(ref)}
              className={renderProps => libraryStyles({...renderProps})}>
              <div className={style({display: 'flex', alignItems: 'center'})}>
                <div className={style({marginTop: 4})} style={{viewTransitionName: !searchOpen ? 'search-menu-icon' : 'none'} as CSSProperties}>
                  {getButtonIcon(currentPage)}
                </div>
                <span className={style({font: 'ui-2xl', marginStart: 8})} style={{viewTransitionName: !searchOpen ? 'search-menu-label' : 'none'} as CSSProperties}>
                  {getButtonText(currentPage)}
                </span>
              </div>
            </Link>
          </div>
          <SearchMenuTrigger
            pages={pages}
            currentPage={currentPage}
            onOpen={openSearchMenu}
            onClose={closeSearchMenu}