More
- {/*
Tutorial */}
- {/*
Blog */}
- {/*
Acknowledgements */}
+
Blog
React Native
diff --git a/beta/src/components/Layout/HomeContent.js b/beta/src/components/Layout/HomeContent.js
new file mode 100644
index 00000000000..0a6380acfd2
--- /dev/null
+++ b/beta/src/components/Layout/HomeContent.js
@@ -0,0 +1,2767 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {
+ createContext,
+ memo,
+ useState,
+ useContext,
+ useId,
+ Fragment,
+ Suspense,
+ useEffect,
+ useRef,
+ useTransition,
+ useReducer,
+} from 'react';
+import cn from 'classnames';
+import NextLink from 'next/link';
+
+import ButtonLink from '../ButtonLink';
+import {IconRestart} from '../Icon/IconRestart';
+import BlogCard from 'components/MDX/BlogCard';
+import {IconChevron} from 'components/Icon/IconChevron';
+import {IconSearch} from 'components/Icon/IconSearch';
+import {Logo} from 'components/Logo';
+import Link from 'components/MDX/Link';
+import CodeBlock from 'components/MDX/CodeBlock';
+import {IconNavArrow} from 'components/Icon/IconNavArrow';
+import {ExternalLink} from 'components/ExternalLink';
+import sidebarBlog from '../../sidebarBlog.json';
+
+function Section({children, background = null}) {
+ return (
+
+ );
+}
+
+function Header({children}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function Para({children}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function Left({children}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function Center({children}) {
+ return (
+
+ {children}
+
+ );
+}
+
+function FullBleed({children}) {
+ return (
+
{children}
+ );
+}
+
+function CurrentTime() {
+ const msPerMinute = 60 * 1000;
+ const date = new Date();
+ let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
+
+ const currentTime = date.toLocaleTimeString([], {
+ hour: 'numeric',
+ minute: 'numeric',
+ });
+ let [, forceUpdate] = useReducer((n) => n + 1, 0);
+ useEffect(() => {
+ const timeout = setTimeout(forceUpdate, nextMinute - Date.now());
+ return () => clearTimeout(timeout);
+ }, [date]);
+ return
{currentTime};
+}
+
+const blogSidebar = sidebarBlog.routes[1];
+if (blogSidebar.path !== '/blog') {
+ throw Error('Could not find the blog route in sidebarBlog.json');
+}
+const recentPosts = blogSidebar.routes.slice(0, 4).map((entry) => ({
+ title: entry.titleForHomepage,
+ icon: entry.icon,
+ date: entry.date,
+ url: entry.path,
+}));
+
+export function HomeContent() {
+ return (
+ <>
+
+
+
+
+ React
+
+
+ The library for web and native user interfaces
+
+
+
+ Learn React
+
+
+ API Reference
+
+
+
+
+
+
+ Create user interfaces from components
+
+ React lets you build user interfaces out of individual pieces
+ called components. Create your own React components like{' '}
+ Thumbnail, LikeButton, and{' '}
+ Video. Then combine them into entire screens, pages,
+ and apps.
+
+
+
+
+
+
+
+ Whether you work on your own or with thousands of other
+ developers, using React feels the same. It is designed to let you
+ seamlessly combine components written by independent people,
+ teams, and organizations.
+
+
+
+
+
+
+ Write components with code and markup
+
+ React components are JavaScript functions. Want to show some
+ content conditionally? Use an if statement.
+ Displaying a list? Try array map(). Learning React is
+ learning programming.
+
+
+
+
+
+
+
+ This markup syntax is called JSX. It is a JavaScript syntax
+ extension popularized by React. Putting JSX markup close to
+ related rendering logic makes React components easy to create,
+ maintain, and delete.
+
+
+
+
+
+
+ Add interactivity wherever you need it
+
+ React components receive data and return what should appear on the
+ screen. You can pass them new data in response to an interaction,
+ like when the user types into an input. React will then update the
+ screen to match the new data.
+
+
+
+
+
+
+
+ You don’t have to build your whole page in React. Add React to
+ your existing HTML page, and render interactive React components
+ anywhere on it.
+
+
+
+ Add React to your page
+
+
+
+
+
+
+
+
+ Go full-stack
+ with a framework
+
+
+ React is a library. It lets you put components together, but it
+ doesn’t prescribe how to do routing and data fetching. To build an
+ entire app with React, we recommend a full-stack React framework
+ like Next.js or{' '}
+ Remix.
+
+
+
+
+
+
+
+ React is also an architecture. Frameworks that implement it let
+ you fetch data in asynchronous components that run on the server
+ or even during the build. Read data from a file or a database, and
+ pass it down to your interactive components.
+
+
+
+ Get started with a framework
+
+
+
+
+
+
+
+
Use the best from every platform
+
+ People love web and native apps for different reasons. React
+ lets you build both web apps and native apps using the same
+ skills. It leans upon each platform’s unique strengths to let
+ your interfaces feel just right on every platform.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Stay true to the web
+
+
+ People expect web app pages to load fast. On the server,
+ React lets you start streaming HTML while you’re still
+ fetching data, progressively filling in the remaining
+ content before any JavaScript code loads. On the client,
+ React can use standard web APIs to keep your UI
+ responsive even in the middle of rendering.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Go truly native
+
+
+ People expect native apps to look and feel like their
+ platform.{' '}
+
+ React Native
+ {' '}
+ and{' '}
+ Expo{' '}
+ let you build apps in React for Android, iOS, and
+ more. They look and feel native because their UIs{' '}
+ are truly native. It’s not a web view—your
+ React components render real Android and iOS views
+ provided by the platform.
+
+
+
+
+
+
+
+
+ With React, you can be a web and a native developer. Your
+ team can ship to many platforms without sacrificing the user
+ experience. Your organization can bridge the platform silos, and
+ form teams that own entire features end-to-end.
+
+
+
+ Build for native platforms
+
+
+
+
+
+
+
+
+
+
Upgrade when the future is ready
+
+ React approaches changes with care. Every React commit is
+ tested on business-critical surfaces with over a billion
+ users. Over 100,000 React components at Meta help validate
+ every migration strategy.
+
+
+
+ The React team is always researching how to improve React.
+ Some research takes years to pay off. React has a high bar
+ for taking a research idea into production. Only proven
+ approaches become a part of React.
+
+
+
+ Read more React news
+
+
+
+
+
+
+
+ Latest React News
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Read more React news
+
+
+
+
+
+
+
+
+
+
+
+ Join a community
+ of millions
+
+
+ You’re not alone. Two million developers from all over the
+ world visit the React docs every month. React is something
+ that people and teams can agree on.
+
+
+
+
+
+
+
+ This is why React is more than a library, an architecture, or
+ even an ecosystem. React is a community. It’s a place where
+ you can ask for help, find opportunities, and meet new
+ friends. You will meet both developers and designers,
+ beginners and experts, researchers and artists, teachers and
+ students. Our backgrounds may be very different, but React
+ lets us all create user interfaces together.
+
+
+
+
+
+
+ Welcome to the
+ React community
+
+
+ Get Started
+
+
+
+
+
+ );
+}
+
+function CTA({children, icon, href}) {
+ let Tag;
+ let extraProps;
+ if (href.startsWith('https://')) {
+ Tag = ExternalLink;
+ } else {
+ Tag = NextLink;
+ extraProps = {legacyBehavior: false};
+ }
+ return (
+
+ {icon === 'native' && (
+
+ )}
+ {icon === 'framework' && (
+
+ )}
+ {icon === 'code' && (
+
+ )}
+ {icon === 'news' && (
+
+ )}
+ {children}
+
+
+ );
+}
+
+const reactConf2021Cover = '/images/home/conf2021/cover.svg';
+const reactConf2019Cover = '/images/home/conf2019/cover.svg';
+const communityImages = [
+ {
+ src: '/images/home/community/react_conf_fun.webp',
+ alt: 'People singing karaoke at React Conf',
+ },
+ {
+ src: '/images/home/community/react_india_sunil.webp',
+ alt: 'Sunil Pai speaking at React India',
+ },
+ {
+ src: '/images/home/community/react_conf_hallway.webp',
+ alt: 'A hallway conversation between two people at React Conf',
+ },
+ {
+ src: '/images/home/community/react_india_hallway.webp',
+ alt: 'A hallway conversation at React India',
+ },
+ {
+ src: '/images/home/community/react_conf_elizabet.webp',
+ alt: 'Elizabet Oliveira speaking at React Conf',
+ },
+ {
+ src: '/images/home/community/react_india_selfie.webp',
+ alt: 'People taking a group selfie at React India',
+ },
+ {
+ src: '/images/home/community/react_conf_nat.webp',
+ alt: 'Nat Alison speaking at React Conf',
+ },
+ {
+ src: '/images/home/community/react_india_team.webp',
+ alt: 'Organizers greeting attendees at React India',
+ },
+];
+
+function CommunityGallery() {
+ const ref = useRef();
+
+ const [shouldPlay, setShouldPlay] = useState(false);
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ setShouldPlay(entry.isIntersecting);
+ });
+ },
+ {
+ root: null,
+ rootMargin: `${window.innerHeight}px 0px`,
+ }
+ );
+ observer.observe(ref.current);
+ return () => observer.disconnect();
+ }, []);
+
+ const [isLazy, setIsLazy] = useState(true);
+ // Either wait until we're scrolling close...
+ useEffect(() => {
+ if (!isLazy) {
+ return;
+ }
+ const rootVertical = parseInt(window.innerHeight * 2.5);
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setIsLazy(false);
+ }
+ });
+ },
+ {
+ root: null,
+ rootMargin: `${rootVertical}px 0px`,
+ }
+ );
+ observer.observe(ref.current);
+ return () => observer.disconnect();
+ }, [isLazy]);
+ // ... or until it's been a while after hydration.
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ setIsLazy(false);
+ }, 20 * 1000);
+ return () => clearTimeout(timeout);
+ }, []);
+
+ return (
+
+ );
+}
+
+const CommunityImages = memo(function CommunityImages({isLazy}) {
+ return (
+ <>
+ {communityImages.map(({src, alt}, i) => (
+
+
+
+
+
+ ))}
+
+ );
+});
+
+function ExampleLayout({
+ filename,
+ left,
+ right,
+ activeArea,
+ hoverTopOffset = 0,
+}) {
+ const contentRef = useRef(null);
+ useNestedScrollLock(contentRef);
+
+ const [overlayStyles, setOverlayStyles] = useState([]);
+ useEffect(() => {
+ if (activeArea) {
+ const nodes = contentRef.current.querySelectorAll(
+ '[data-hover="' + activeArea.name + '"]'
+ );
+ const nextOverlayStyles = Array.from(nodes)
+ .map((node) => {
+ const parentRect = contentRef.current.getBoundingClientRect();
+ const nodeRect = node.getBoundingClientRect();
+ let top = Math.round(nodeRect.top - parentRect.top) - 8;
+ let bottom = Math.round(nodeRect.bottom - parentRect.top) + 8;
+ let left = Math.round(nodeRect.left - parentRect.left) - 8;
+ let right = Math.round(nodeRect.right - parentRect.left) + 8;
+ top = Math.max(top, hoverTopOffset);
+ bottom = Math.min(bottom, parentRect.height - 12);
+ if (top >= bottom) {
+ return null;
+ }
+ return {
+ width: right - left + 'px',
+ height: bottom - top + 'px',
+ transform: `translate(${left}px, ${top}px)`,
+ };
+ })
+ .filter((s) => s !== null);
+ setOverlayStyles(nextOverlayStyles);
+ }
+ }, [activeArea]);
+ return (
+
+
+
+
+
+
+ {filename}
+
+
+ {left}
+
+
+ {right}
+
+ {overlayStyles.map((styles, i) => (
+
+ ))}
+
+
+
+
+
+ );
+}
+
+function useCodeHover(areas) {
+ const [hoverLine, setHoverLine] = useState(null);
+ const area = areas.get(hoverLine);
+ let meta;
+ if (area) {
+ const highlightLines = area.lines ?? [hoverLine];
+ meta = '```js {' + highlightLines.map((l) => l + 1).join(',') + '}';
+ }
+ return [area, meta, setHoverLine];
+}
+
+const example1Areas = new Map([
+ [2, {name: 'Video'}],
+ [3, {name: 'Thumbnail'}],
+ [4, {name: 'a'}],
+ [5, {name: 'h3'}],
+ [6, {name: 'p'}],
+ [7, {name: 'a'}],
+ [8, {name: 'LikeButton'}],
+ [9, {name: 'Video'}],
+]);
+
+function Example1() {
+ const [area, meta, onLineHover] = useCodeHover(example1Areas);
+ return (
+
+ {`function Video({ video }) {
+ return (
+
+ );
+}
+ `}
{`function VideoList({ videos, emptyHeading }) {
+ const count = videos.length;
+ let heading = emptyHeading;
+ if (count > 0) {
+ const noun = count > 1 ? 'Videos' : 'Video';
+ heading = count + ' ' + noun;
+ }
+ return (
+
+ {heading}
+ {videos.map(video =>
+
+ )}
+
+ );
+}`}
+
+ }
+ right={
+
+
+
+
+
+ }
+ />
+ );
+}
+
+const example3Areas = new Map([
+ [6, {name: 'SearchableVideoList'}],
+ [7, {name: 'SearchInput', lines: [7, 8, 9]}],
+ [8, {name: 'SearchInput', lines: [7, 8, 9]}],
+ [9, {name: 'SearchInput', lines: [7, 8, 9]}],
+ [10, {name: 'VideoList', lines: [10, 11, 12]}],
+ [11, {name: 'VideoList', lines: [10, 11, 12]}],
+ [12, {name: 'VideoList', lines: [10, 11, 12]}],
+ [13, {name: 'SearchableVideoList'}],
+]);
+
+function Example3() {
+ const [area, meta, onLineHover] = useCodeHover(example3Areas);
+ const videos = [
+ {
+ id: 'vids-0',
+ title: 'React: The Documentary',
+ description: 'The origin story of React',
+ image: '/images/home/videos/documentary.webp',
+ url: 'https://www.youtube.com/watch?v=8pDqJVdNa44',
+ },
+ {
+ id: 'vids-1',
+ title: 'Rethinking Best Practices',
+ description: 'Pete Hunt (2013)',
+ image: '/images/home/videos/rethinking.jpg',
+ url: 'https://www.youtube.com/watch?v=x7cQ3mrcKaY',
+ },
+ {
+ id: 'vids-2',
+ title: 'Introducing React Native',
+ description: 'Tom Occhino (2015)',
+ image: '/images/home/videos/rn.jpg',
+ url: 'https://www.youtube.com/watch?v=KVZ-P-ZI6W4',
+ },
+ {
+ id: 'vids-3',
+ title: 'Introducing React Hooks',
+ description: 'Sophie Alpert and Dan Abramov (2018)',
+ image: '/images/home/videos/hooks.jpg',
+ url: 'https://www.youtube.com/watch?v=V-QO-KO90iQ',
+ },
+ {
+ id: 'vids-4',
+ title: 'Introducing Server Components',
+ description: 'Dan Abramov and Lauren Tan (2020)',
+ image: '/images/home/videos/rsc.jpg',
+ url: 'https://www.youtube.com/watch?v=TQQPAU21ZUw',
+ },
+ ];
+
+ return (
+
+ {`import { useState } from 'react';
+
+function SearchableVideoList({ videos }) {
+ const [searchText, setSearchText] = useState('');
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <>
+ setSearchText(newText)} />
+
+
+ );
+}`}
+
+ }
+ right={
+
+
+
+ React Videos
+
+
+ A brief history of React
+
+
+
+
+
+
+ }
+ />
+ );
+}
+
+const example4Areas = new Map([
+ [6, {name: 'ConferenceLayout'}],
+ [7, {name: 'Suspense'}],
+ [8, {name: 'SearchableVideoList'}],
+ [9, {name: 'Suspense'}],
+ [10, {name: 'ConferenceLayout'}],
+ [17, {name: 'SearchableVideoList'}],
+]);
+
+function Example4() {
+ const [area, meta, onLineHover] = useCodeHover(example4Areas);
+ const [slug, setSlug] = useState('react-conf-2021');
+ const [animate, setAnimate] = useState(false);
+
+ function navigate(newSlug) {
+ setSlug(newSlug);
+ setAnimate(true);
+ }
+
+ return (
+
+ {`import { db } from './database.js';
+import { Suspense } from 'react';
+
+async function ConferencePage({ slug }) {
+ const conf = await db.Confs.find({ slug });
+ return (
+
+ }>
+
+
+
+ );
+}
+
+async function Talks({ confId }) {
+ const talks = await db.Talks.findAll({ confId });
+ const videos = talks.map(talk => talk.video);
+ return ;
+}`}
+
+ }
+ right={
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+ );
+}
+
+function useNestedScrollLock(ref) {
+ useEffect(() => {
+ let isLocked = false;
+ let lastScroll = performance.now();
+
+ function handleScroll() {
+ if (!isLocked) {
+ isLocked = true;
+ ref.current.style.pointerEvents = 'none';
+ }
+ lastScroll = performance.now();
+ }
+
+ function updateLock() {
+ if (isLocked && performance.now() - lastScroll > 150) {
+ isLocked = false;
+ ref.current.style.pointerEvents = '';
+ }
+ }
+
+ window.addEventListener('scroll', handleScroll);
+ const interval = setInterval(updateLock, 60);
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ clearInterval(interval);
+ };
+ }, []);
+}
+
+function ExamplePanel({
+ children,
+ noPadding,
+ noShadow,
+ height,
+ contentMarginTop,
+ activeArea,
+}) {
+ return (
+
+ );
+}
+
+const NavContext = createContext(null);
+
+function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
+ const [restartId, setRestartId] = useState(0);
+ const isPulsing = hasPulse && restartId === 0;
+ const [shouldAnimatePulse, setShouldAnimatePulse] = useState(false);
+ const refreshRef = useRef(null);
+
+ useEffect(() => {
+ if (!isPulsing) {
+ return;
+ }
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ setShouldAnimatePulse(entry.isIntersecting);
+ });
+ },
+ {
+ root: null,
+ rootMargin: `0px 0px`,
+ }
+ );
+ observer.observe(refreshRef.current);
+ return () => observer.disconnect();
+ }, [isPulsing]);
+
+ function handleRestart() {
+ confCache = new Map();
+ talksCache = new Map();
+ setRestartId((i) => i + 1);
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {domain}
+ {path != null && '/'}
+
+ {path}
+
+ {hasRefresh && (
+
+ {isPulsing && shouldAnimatePulse && (
+
+ )}
+
+
+ )}
+
+ {restartId > 0 && (
+
+ )}
+
+
+ {children}
+
+
+ }>
+
+
+
+
+ );
+}
+
+function TalksLoading() {
+ return (
+
+ );
+}
+
+function Talks({confId}) {
+ const videos = use(fetchTalks(confId));
+ return ;
+}
+
+function SearchableVideoList({videos}) {
+ const [searchText, setSearchText] = useState('');
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+
+
+
+
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(' ')
+ .filter((s) => s !== '');
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + ' ' + video.description)
+ .toLowerCase()
+ .split(' ');
+ return keywords.every((kw) => words.some((w) => w.startsWith(kw)));
+ });
+}
+
+function VideoList({videos, emptyHeading}) {
+ let heading = emptyHeading;
+ const count = videos.length;
+ if (count > 0) {
+ const noun = count > 1 ? 'Videos' : 'Video';
+ heading = count + ' ' + noun;
+ }
+ return (
+
+
+ {heading}
+
+
+ {videos.map((video) => (
+
+ ))}
+
+
+ );
+}
+
+function SearchInput({value, onChange}) {
+ const id = useId();
+ return (
+
+ );
+}
+
+function ConferenceLayout({conf, children}) {
+ const {slug, navigate} = useContext(NavContext);
+ const [isPending, startTransition] = useTransition();
+ return (
+
+
+
+
+
+ {children}
+
+
+
+ {children}
+
+
+
+ {image.speakers.map((src, i) => (
+
+ ))}
+
+
+
+ React Conf
+
+
+
+ ) : image.startsWith('/') ? null : (
+
+ )}
+
+ );
+}
+
+function ThumbnailPlaceholder() {
+ return (
+
+ );
+}
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+function SvgContainer({children}) {
+ return (
+
+ );
+}
+
+function NativeIcons() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- {isOpen && (
-
- selectTab('learn')}>
- Learn
-
- selectTab('reference')}>
- Reference
-
-
- )}
-
-
-
-
-
-
-
;
+ } else {
+ content = (
+
+ );
+ }
+
+ let hasColumns = true;
+ let showSidebar = true;
+ let showToc = true;
+ if (isHomePage || isBlogIndex) {
+ hasColumns = false;
+ showSidebar = false;
+ showToc = false;
+ } else if (section === 'blog') {
+ showToc = false;
+ hasColumns = false;
+ showSidebar = false;
+ }
+
+ return (
+ <>
+
+
+
+
+ {showSidebar && (
+
+ )}
{/* No fallback UI so need to be careful not to suspend directly inside. */}
-
-
+
-
-
- {!isHomePage && (
-
- )}
-
-
-
- {toc.length > 0 &&
}
+
+ {showToc && toc.length > 0 && }
diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
index de5ea8ea747..0d69b30be58 100644
--- a/beta/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -17,7 +17,6 @@ interface SidebarLinkProps {
level: number;
wip: boolean | undefined;
icon?: React.ReactNode;
- heading?: boolean;
isExpanded?: boolean;
isBreadcrumb?: boolean;
hideArrow?: boolean;
@@ -30,7 +29,6 @@ export function SidebarLink({
title,
wip,
level,
- heading = false,
isExpanded,
isBreadcrumb,
hideArrow,
@@ -60,18 +58,14 @@ export function SidebarLink({
target={target}
aria-current={selected ? 'page' : undefined}
className={cn(
- 'p-2 pr-2 w-full rounded-none lg:rounded-r-lg text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+ 'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
{
- 'my-6': heading,
- 'text-primary dark:text-primary-dark': heading && !isBreadcrumb,
'text-sm pl-6': level > 0,
'pl-5': level < 2,
'text-base font-bold': level === 0,
- 'dark:text-primary-dark text-primary ': level === 0 && !selected,
- 'text-base text-link dark:text-link-dark': level === 1 && selected,
- 'dark:text-primary-dark text-primary': heading,
+ 'text-primary dark:text-primary-dark': level === 0 && !selected,
'text-base text-secondary dark:text-secondary-dark':
- !selected && !heading,
+ level > 0 && !selected,
'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
selected,
'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
@@ -85,11 +79,11 @@ export function SidebarLink({
})}>
{title}
- {isExpanded != null && !heading && !hideArrow && (
+ {isExpanded != null && !hideArrow && (
diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 5a3b519c2c7..b8db801c667 100644
--- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -153,7 +153,7 @@ export function SidebarRouteTree({
)}
{sectionHeader}
diff --git a/beta/src/components/Layout/SidebarNav/SidebarNav.tsx b/beta/src/components/Layout/SidebarNav/SidebarNav.tsx
new file mode 100644
index 00000000000..7e242319c16
--- /dev/null
+++ b/beta/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {Suspense} from 'react';
+import * as React from 'react';
+import cn from 'classnames';
+import {Search} from 'components/Search';
+import {Feedback} from '../Feedback';
+import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
+import type {RouteItem} from '../getRouteMeta';
+
+declare global {
+ interface Window {
+ __theme: string;
+ __setPreferredTheme: (theme: string) => void;
+ }
+}
+
+export default function SidebarNav({
+ routeTree,
+ breadcrumbs,
+}: {
+ routeTree: RouteItem;
+ breadcrumbs: RouteItem[];
+}) {
+ // HACK. Fix up the data structures instead.
+ if ((routeTree as any).routes.length === 1) {
+ routeTree = (routeTree as any).routes[0];
+ }
+
+ return (
+
+
+
+
+