fix mobile header icon and library label

Author: LFDanLu

packages/dev/s2-docs/src/Layout.tsx

@@ -117,6 +117,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
           <TitleResizer />
           <Header pages={pages} currentPage={currentPage} />
           <MobileHeader
+            currentPage={currentPage}
             toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}
             nav={<MobileNav key="nav" pages={pages} currentPage={currentPage} />} />
           <div className={style({display: 'flex', width: 'full', marginTop: 12})}>

packages/dev/s2-docs/src/MobileHeader.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import {ActionButton, CloseButton, DialogTrigger} from '@react-spectrum/s2';
-import {AdobeLogo} from './AdobeLogo';
 import {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
+import {getCurrentLibrary, TAB_DEFS} from './SearchMenu';
 import {keyframes} from '../../../@react-spectrum/s2/style/style-macro' with {type: 'macro'};
 import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger';
 import {Modal} from '../../../@react-spectrum/s2/src/Modal';
@@ -107,7 +107,7 @@ const MobileCustomDialog = forwardRef<HTMLDivElement, MobileDialogProps>(functio
   );
 });
 
-export function MobileHeader({toc, nav}) {
+export function MobileHeader({toc, nav, currentPage}) {
   let ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -129,6 +129,9 @@ export function MobileHeader({toc, nav}) {
     }
   }, []);
 
+  let currentLibrary = getCurrentLibrary(currentPage);
+  let icon = TAB_DEFS[currentLibrary].icon;
+
   return (
     <div
       ref={ref}
@@ -172,7 +175,7 @@ export function MobileHeader({toc, nav}) {
           alignItems: 'center',
           flexGrow: 1
         })}>
-        <AdobeLogo />
+        {icon}
         <h2
           className={style({
             font: 'heading-sm',
@@ -184,7 +187,7 @@ export function MobileHeader({toc, nav}) {
             animationTimeline: 'scroll()',
             animationRange
           } as CSSProperties}>
-          React Aria
+          {TAB_DEFS[currentLibrary].label}
         </h2>
       </div>
       <div

packages/dev/s2-docs/src/client.tsx

@@ -12,7 +12,7 @@ let updateRoot = hydrate({
 });
 
 // A very simple router. When we navigate, we'll fetch a new RSC payload from the server,
-// and in a React transition, stream in the new page. Once complete, we'll pushState to 
+// and in a React transition, stream in the new page. Once complete, we'll pushState to
 // update the URL in the browser.
 async function navigate(pathname: string, push = false) {
   let res = fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));

packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, {useId} from 'react';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 
 export const ReactAriaLogo = () => {
+  const clipPathId = `react-aria-logo-clip-${useId()}`;
+
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" className={style({margin: 0, height: 40, width: 40})}>
       <defs>
-        <clipPath id="a">
+        <clipPath id={clipPathId}>
           <path
             d="M80 136c30.93 0 56-25.07 56-56s-25.07-56-56-56-56 25.07-56 56 25.07 56 56 56Zm8.48-86.3c0 4.69-3.8 8.48-8.48 8.48s-8.48-3.8-8.48-8.48 3.8-8.48 8.48-8.48 8.48 3.8 8.48 8.48ZM51.09 61.78c.52-1.8 2.39-2.85 4.2-2.33a89.865 89.865 0 0 0 48.82.17l.64-.18c1.81-.5 3.68.55 4.18 2.36a3.39 3.39 0 0 1-2.36 4.18l-.64.18a97.139 97.139 0 0 1-15.51 2.98c-1.03.11-1.82.97-1.82 2.01v14.89c0 .18.03.37.08.55 1.37 4.83 2.94 10.39 4.32 15.27.98 3.46 1.86 6.58 2.49 8.85.32 1.14.58 2.06.76 2.71l.04.15c.13.48.27.97.31 1.16a3.38 3.38 0 0 1-2.66 3.99 3.38 3.38 0 0 1-3.99-2.66c.02.09 0 .04-.08-.27-.04-.13-.09-.31-.15-.54-.18-.65-.44-1.57-.76-2.7-.64-2.27-1.52-5.39-2.49-8.85l-3.74-13.21a1.992 1.992 0 0 0-1.92-1.45h-1.6c-.89 0-1.68.59-1.92 1.45-1.22 4.3-2.55 9.01-3.74 13.21-.98 3.46-1.85 6.58-2.49 8.85-.32 1.13-.58 2.06-.76 2.7-.06.23-.11.41-.15.54-.09.31-.1.36-.08.27a3.39 3.39 0 1 1-6.65-1.33c.04-.18.18-.68.31-1.16l.04-.15c.18-.65.44-1.58.76-2.71.64-2.27 1.52-5.39 2.49-8.85 1.38-4.88 2.95-10.44 4.32-15.27.05-.18.08-.36.08-.55V71.16c0-1.04-.79-1.9-1.82-2.01a96.504 96.504 0 0 1-16.17-3.17 3.395 3.395 0 0 1-2.33-4.2Z"
             style={{
@@ -22,7 +24,7 @@ export const ReactAriaLogo = () => {
         }} />
       <g
         style={{
-          clipPath: 'url(#a)'
+          clipPath: `url(#${clipPathId})`
         }}>
         <path
           d="M15.79 17.64H147v126.14H15.79z"