amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-25 23:05:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

layouts

Browse Source
This commit is contained in:
Dan Abramov
2023-02-05 22:35:24 +00:00
parent 7a8ae32c95
commit a5842f9adf
3 changed files with 59 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
beta/src/components/Layout/Page.tsx
View File

@@ -26,7 +26,7 @@ interface PageProps {
toc: Array<TocItem>;
routeTree: RouteItem;
meta: {title?: string; description?: string};
section: 'learn' | 'reference' | 'community' | 'blog' | 'home';
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
}
export function Page({children, toc, routeTree, meta, section}: PageProps) {
@@ -66,6 +66,19 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
);
}
let hasColumns = true;
if (section === 'home') {
hasColumns = false;
}
let showSidebar = true;
let showToc = true;
if (section === 'home' || section === 'blog') {
showSidebar = false;
}
if (cleanedPath === '/blog') {
showToc = false;
}
return (
<>
<Seo title={title} isHomePage={isHomePage} />
@@ -77,13 +90,19 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
/>
<div
className={
isHomePage
? ''
: 'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
hasColumns
? 'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
: ''
}>
<div className={'lg:-mt-20 ' + (isHomePage ? 'hidden' : '')}>
<div className="lg:-mt-20">
<div className="lg:pt-20 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
<SidebarNav routeTree={routeTree} breadcrumbs={breadcrumbs} />
{showSidebar && (
<SidebarNav
key={section}
routeTree={routeTree}
breadcrumbs={breadcrumbs}
/>
)}
</div>
</div>
{/* No fallback UI so need to be careful not to suspend directly inside. */}
@@ -96,7 +115,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
</main>
</Suspense>
<div className="-mt-20 hidden lg:max-w-xs 2xl:block">
{toc.length > 0 && <Toc headings={toc} key={asPath} />}
{showToc && toc.length > 0 && <Toc headings={toc} key={asPath} />}
</div>
</div>
</>

46
beta/src/components/Layout/TopNav/TopNav.tsx
View File

@@ -125,17 +125,17 @@ function Link({href, children, ...props}: JSX.IntrinsicElements['a']) {
);
}
function NavItem({url, section, title}: any) {
function NavItem({url, isActive, children}: any) {
return (
<div className="block">
<Link
href={`${url}`}
href={url}
className={cn(
'outline-link p-2 rounded-lg capitalize',
section != title && 'hover:bg-card hover:dark:bg-card-dark',
section === title && 'bg-highlight dark:bg-highlight-dark text-link'
!isActive && 'hover:bg-card hover:dark:bg-card-dark',
isActive && 'bg-highlight dark:bg-highlight-dark text-link'
)}>
{title}
{children}
</Link>
</div>
);
@@ -148,7 +148,7 @@ export default function TopNav({
}: {
routeTree: RouteItem;
breadcrumbs: RouteItem[];
section: 'learn' | 'reference' | 'community' | 'blog' | 'home';
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
}) {
const [isOpen, setIsOpen] = useState(false);
const [showFeedback, setShowFeedback] = useState(false);
@@ -264,26 +264,34 @@ export default function TopNav({
)}>
{isOpen ? <IconClose /> : <IconHamburger />}
</button>
<NextLink href="/">
<a className="3xl:flex-1 mr-0 sm:mr-2.5 3xl:mr-0 inline-flex text-lg font-normal items-center text-primary dark:text-primary-dark py-1 whitespace-nowrap outline-link p-2.5 rounded-lg">
<Logo className="text-sm mr-2 w-8 h-8 text-link dark:text-link-dark" />
React
</a>
</NextLink>
<div className="3xl:flex-1 mr-0 sm:mr-2.5 3xl:mr-0">
<NextLink href="/">
<a className="inline-flex text-lg font-normal items-center text-primary dark:text-primary-dark py-1 whitespace-nowrap outline-link p-2.5 rounded-lg">
<Logo className="text-sm mr-2 w-8 h-8 text-link dark:text-link-dark" />
React
</a>
</NextLink>
</div>
</div>
<div className="hidden md:flex flex-1 justify-center items-center w-full 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
<Search />
</div>
<div className="text-base justify-center items-center flex 3xl:flex-1 flex-row 3xl:justify-end">
<div className="ml-2.5 mr-5 hidden lg:flex gap-5">
<NavItem section={section} url="/learn" title="learn" />
<NavItem isActive={section === 'learn'} url="/learn">
Learn
</NavItem>
<NavItem
section={section}
url="/reference/react"
title="reference"
/>
<NavItem section={section} url="/community" title="community" />
<NavItem section={section} url="/blog" title="blog" />
isActive={section === 'reference'}
url="/reference/react">
Reference
</NavItem>
<NavItem isActive={section === 'community'} url="/community">
Community
</NavItem>
<NavItem isActive={section === 'blog'} url="/blog">
Blog
</NavItem>
</div>
<div className="flex w-full md:hidden"></div>
<div className="flex items-center -space-x-2.5 xs:space-x-0 ">

8
beta/src/pages/[[...markdownPath]].js
View File

@@ -22,6 +22,7 @@ export default function Layout({content, toc, meta}) {
let routeTree;
switch (section) {
case 'home':
case 'unknown':
routeTree = sidebarHome;
break;
case 'learn':
@@ -46,7 +47,10 @@ export default function Layout({content, toc, meta}) {
function useActiveSection() {
const {asPath} = useRouter();
if (asPath.startsWith('/reference')) {
const cleanedPath = asPath.split(/[\?\#]/)[0];
if (cleanedPath === '/') {
return 'home';
} else if (cleanedPath.startsWith('/reference')) {
return 'reference';
} else if (asPath.startsWith('/learn')) {
return 'learn';
@@ -55,7 +59,7 @@ function useActiveSection() {
} else if (asPath.startsWith('/blog')) {
return 'blog';
} else {
return 'home';
return 'unknown';
}
}