Skip to content

Commit 5bfb320

Browse files
yihuiliaoyihuiliao
authored
docs: side nav follow up (#9195)
* docs: side nav follow up * fix font for mobile case * update cursor * fix links, make cursor pointer
1 parent 06b3ea6 commit 5bfb320

File tree

4 files changed

+46
-23
lines changed

4 files changed

+46
-23
lines changed

‎packages/dev/s2-docs/pages/react-aria/index.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,10 @@ export const hideFromSearch = true;
7676
</a>
7777

7878
<div className="px-4 py-3 inline-flex items-center gap-4 rounded-xl bg-white/70 dark:bg-white/20 dark:backdrop-saturate-200 dark:backdrop-brightness-125 font-semibold ring-1 ring-black/5">
79-
<a href="../blog/index.html" className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Blog</a>
80-
<a href="../releases/index.html" className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Releases</a>
81-
<a href="../react-spectrum/index.html" className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">React Spectrum</a>
82-
<a href="../internationalized/index.html" className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Internationalized</a>
79+
<a href={props.pages.filter(page => page.name.includes('react-aria') && page.name.includes('blog') && page.name.includes('index.html'))[0].url} className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Blog</a>
80+
<a href={props.pages.filter(page => page.name.includes('react-aria') && page.name.includes('releases') && page.name.includes('index.html'))[0].url}className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Releases</a>
81+
<a href={props.pages.filter(page => page.name.includes('s2') && !page.name.includes('releases') && page.name.includes('index.html'))[0].url}className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">React Spectrum</a>
82+
<a href={props.pages.filter(page => page.name.includes('internationalized') && page.name.includes('date') && page.name.includes('index.html'))[0].url} className="no-underline hidden md:inline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">Internationalized</a>
8383
<a href="https://github.com/adobe/react-spectrum" target="_blank" title="GitHub" className="no-underline transition text-zinc-900/80 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white/90 rounded-md focus-ring dark:outline-white">
8484
<svg aria-hidden="true" viewBox="0 0 16 16" height="22" fill="currentColor">
8585
<path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
@@ -102,7 +102,7 @@ export const hideFromSearch = true;
102102
<p className="m-0 text-slate-800 dark:text-slate-300 text-center text-lg md:text-2xl max-w-3xl mx-auto [text-wrap:balance]">Over 50 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.</p>
103103

104104
<div className="flex flex-col md:flex-row items-center gap-4 my-10 justify-center">
105-
<a href="getting-started.html" className="no-underline bg-linear-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring dark:outline-white outline-offset-2 active:scale-95">Get Started</a>
105+
<a href="getting-started.html" className="no-underline bg-linear-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring dark:outline-white outline-offset-2 active:scale-95 cursor-pointer">Get Started</a>
106106
<SearchMenuWrapper pages={props.pages} currentPage={props.currentPage} />
107107
</div>
108108

‎packages/dev/s2-docs/src/Nav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ export function Nav({pages, currentPage}: PageProps) {
192192
);
193193
}
194194
return (
195-
<Disclosure id={name} key={name} isQuiet density="spacious" defaultExpanded={name === 'Components'} styles={style({minWidth: 185})}>
195+
<Disclosure id={name} key={name} isQuiet density="spacious" defaultExpanded={name === 'Components' || name === currentPage.exports?.section} styles={style({minWidth: 185})}>
196196
<DisclosureTitle>{name}</DisclosureTitle>
197197
<DisclosurePanel>
198198
<div className={style({paddingStart: space(18)})}>{nav}</div>

‎packages/dev/s2-docs/src/SearchMenuWrapper.tsx‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
'use client';
22

33
import '../tailwind/home.global.css';
4-
import {DialogTrigger, Modal, ModalOverlay, Pressable} from 'react-aria-components';
4+
import {Button, DialogTrigger, Modal, ModalOverlay} from 'react-aria-components';
55
import {flushSync} from 'react-dom';
66
import {preloadSearchMenu} from './SearchMenuTrigger';
7-
import React, {useState} from 'react';
7+
import React, {lazy, useState} from 'react';
8+
import {Modal as S2Modal} from '../../../@react-spectrum/s2/src/Modal';
89
import {SearchMenu} from './SearchMenu';
910
import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
1011

12+
const MobileSearchMenu = lazy(() => import('./SearchMenu').then(({MobileSearchMenu}) => ({default: MobileSearchMenu})));
13+
1114
let underlayStyle = style({
1215
position: 'absolute',
1316
top: 0,
@@ -81,20 +84,34 @@ export default function SearchMenuWrapper({pages, currentPage}) {
8184
};
8285

8386
return (
84-
<DialogTrigger isOpen={searchOpen} onOpenChange={() => {openSearchMenu();}} >
85-
<Pressable><span role="button" className="no-underline bg-white/60 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring dark:outline-white outline-offset-2 active:scale-95">Explore Components</span></Pressable>
86-
<ModalOverlay
87-
style={{zIndex: 21}}
88-
isDismissable
89-
className={underlayStyle}>
90-
<Modal className={modalStyle}>
91-
<SearchMenu
92-
pages={pages}
93-
currentPage={currentPage}
94-
onClose={closeSearchMenu}
95-
initialSearchValue="" />
96-
</Modal>
97-
</ModalOverlay>
98-
</DialogTrigger>
87+
<>
88+
<div className={style({display: {default: 'none', lg: 'flex'}})}>
89+
<DialogTrigger isOpen={searchOpen} onOpenChange={() => {openSearchMenu();}} >
90+
<Button className="font-spectrum no-underline bg-white/60 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring dark:outline-white outline-offset-2 active:scale-95 cursor-pointer">Explore Components</Button>
91+
<ModalOverlay
92+
style={{zIndex: 21}}
93+
isDismissable
94+
className={underlayStyle}>
95+
<Modal className={modalStyle}>
96+
<SearchMenu
97+
pages={pages}
98+
currentPage={currentPage}
99+
onClose={closeSearchMenu}
100+
initialSearchValue="" />
101+
</Modal>
102+
</ModalOverlay>
103+
</DialogTrigger>
104+
</div>
105+
<div className={style({display: {default: 'flex', lg: 'none'}})}>
106+
<DialogTrigger>
107+
<Button className="font-spectrum no-underline bg-white/60 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring dark:outline-white outline-offset-2 active:scale-95 cursor-pointer">Explore Components</Button>
108+
<S2Modal size="fullscreenTakeover">
109+
<MobileSearchMenu pages={pages} currentPage={currentPage} />
110+
</S2Modal>
111+
</DialogTrigger>
112+
</div>
113+
</>
99114
);
100115
}
116+
117+

‎packages/dev/s2-docs/tailwind/home.global.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,9 @@ body {
3232
--text-3xl: calc(1.875rem * 1.125);
3333
}
3434
}
35+
36+
@layer utilities {
37+
.font-spectrum {
38+
font-family: "adobe-clean-spectrum-vf", system-ui, sans-serif;
39+
}
40+
}

0 commit comments

Comments
 (0)