docs: add RTL docs

kyletsang · kyletsang · commit 75e564dcf250 · 2021-08-10T17:09:44.000-07:00
diff --git a/www/src/components/SideNav.js b/www/src/components/SideNav.js
@@ -104,6 +104,7 @@ const gettingStarted = [
   'why-react-bootstrap',
   'theming',
   'support',
+  'rtl',
 ];
 
 const layout = ['grid'];
@@ -154,6 +155,12 @@ function attachSearch(ref) {
     });
 }
 
+const nameOverrides = {
+  'why-react-bootstrap': 'Why React-Bootstrap',
+  rtl: 'RTL',
+  'restart-ui': '@restart/ui',
+};
+
 function NavSection({ heading, location: { pathname }, items, path }) {
   let active = pathname.startsWith(path);
   return (
@@ -174,10 +181,7 @@ function NavSection({ heading, location: { pathname }, items, path }) {
           {items.map((name) => (
             <Nav.Item key={`${path}/${name}/`}>
               <TocSubLink href={`${path}/${name}/`}>
-                {startCase(name.toLowerCase()).replace(
-                  'React Bootstrap',
-                  'React-Bootstrap',
-                )}
+                {nameOverrides[name] || startCase(name.toLowerCase())}
               </TocSubLink>
             </Nav.Item>
           ))}
diff --git a/www/src/pages/getting-started/rtl.mdx b/www/src/pages/getting-started/rtl.mdx
@@ -0,0 +1,21 @@
+import DocLink from '../../components/DocLink';
+import DismissibleControlled from '../../examples/Alert/DismissibleControlled';
+import ReactPlayground from '../../components/ReactPlayground';
+
+# RTL
+
+We recommend first reading <DocLink path="/getting-started/rtl">Bootstrap's documentation</DocLink>
+to become familiar with how Bootstrap's RTL support works.
+
+In order to enable RTL support with React-Bootstrap, follow these steps:
+
+1. Set `dir="rtl"` on the `<html>` element.
+2. Add an appropriate lang attribute, like `lang="ar"`, on the `<html>` element.
+3. Include the RTL version of the CSS `bootstrap.rtl.min.css` in your project.
+4. Set `dir="rtl"` in a `ThemeProvider`:
+
+```jsx
+<ThemeProvider dir="rtl">
+  <App />
+</ThemeProvider>
+```
