Documentation fixes (#6108)

* Update installing doc

* Rename style articles

* add docs prefix to getting started articles

* Rename all the things. Consistent id format

* Split docs and api

* Fix links

Co-authored-by: Guy Carmeli <guyc@wix.com>

website/docs/api-component.mdx → website/api/api-component.mdx

 ---
-id: component-api
+id: component
 title: Component
 sidebar_label: Component
 ---

website/docs/api-events.mdx → website/api/api-events.mdx

 ---
-id: events-api
+id: events
 title: Events
 sidebar_label: Events
 ---

website/docs/api-modal.mdx → website/api/api-modal.mdx

 ---
-id: modal-api
+id: modal
 title: Modal
 sidebar_label: Modal
 ---
 #### Parameters
 | Name   | Required | Type                | Description                                                                                                            |
 | ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| layout | Yes      | [Layout](Layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](stack-layout.mdx), [SideMenu](sideMenu-layout.mdx), [Component](layout-component.mdx) |
+| layout | Yes      | [Layout](layout-layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](layout-stack.mdx), [SideMenu](layout-sideMenu.mdx), [Component](layout-component.mdx) |
 
 ```js
 Navigation.showModal({

website/docs/api-overlay.mdx → website/api/api-overlay.mdx

 ---
-id: overlay-api
+id: overlay
 title: Overlay
 sidebar_label: Overlay
 ---
 
 | Name   | Required | Type                | Description                                                                                                                                                                                                         |
 | ------ | -------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| layout | Yes      | [Layout](Layout.mdx) | Any type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout ([BottomTabs](layout-BottomTabs.mdx), [Stack](stack-layout.mdx), [SideMenu](sideMenu-layout.mdx), [Component](layout-component.mdx)) |
+| layout | Yes      | [Layout](layout-layout.mdx) | Any type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout ([BottomTabs](layout-BottomTabs.mdx), [Stack](layout-stack.mdx), [SideMenu](layout-sideMenu.mdx), [Component](layout-component.mdx)) |
 
 ```js
 Navigation.showOverlay({

website/docs/api-root.mdx → website/api/api-root.mdx

 ---
-id: root-api
+id: root
 title: Root
 sidebar_label: Root
 ---
 import TabItem from '@theme/TabItem';
 
 ## `setRoot()`
-Used to set the UI of the application. Read more about the root hierarchy level in the [docs section](docs-root.mdx).
+Used to set the UI of the application. Read more about the root hierarchy level in the [docs section](../docs/root).
 
 #### Parameters
 | Name   | Required | Type                | Description                                                                                                            |
 | ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| layout | Yes      | [Layout](Layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](stack-layout.mdx), [SideMenu](sideMenu-layout.mdx), [Component](layout-component.mdx) |
+| layout | Yes      | [Layout](layout-layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](layout-stack.mdx), [SideMenu](layout-sideMenu.mdx), [Component](layout-component.mdx) |
 
 #### Example
 

website/docs/stack-api.mdx → website/api/api-stack.mdx

 ---
-id: stack-api
+id: stack
 title: Stack
 sidebar_label: Stack
 ---
 | Name        | Required | Type                                                     | Description                                                           |
 | ----------- | -------- | -------------------------------------------------------- | --------------------------------------------------------------------- |
 | componentId | Yes      | string                                                   | The componentId of a screen pushed into the stack, or the stack id. |
-| layout      | Yes      | [layout](Layout.mdx) or [layout](Layout.mdx)[] | A single Component or array of components.                            |
+| layout      | Yes      | [layout](layout-layout.mdx) or [layout](layout-layout.mdx)[] | A single Component or array of components.                            |
 
 
 #### Example

website/docs/layout-BottomTabs.mdx → website/api/layout-BottomTabs.mdx

 ---
-id: bottomTabs-layout
+id: layout-bottomTabs
 title: Bottom Tabs
 sidebar_label: Bottom Tabs
 ---
 
 | Type               | Required | Description                   |
 | ------------------ | -------- | ----------------------------- |
-| [Layout[]](Layout.mdx) | YES      | Child layouts of any kind. |
+| [Layout[]](layout-layout.mdx) | YES      | Child layouts of any kind. |
 
 ## `options`
 

website/docs/layout-component.mdx → website/api/layout-component.mdx

 ---
-id: component-layout
+id: layout-component
 title: Component
 sidebar_label: Component
 ---

website/docs/Layout.mdx → website/api/layout-layout.mdx

 ---
-id: layout
+id: layout-layout
 title: Layout
 sidebar_label: Layout
 ---
 
 | Type               | Required | Description                   |
 | ------------------ | -------- | ----------------------------- |
-| [Layout[]](Layout.mdx) | YES      | Child layouts of any kind. |
+| [Layout[]](layout-layout.mdx) | YES      | Child layouts of any kind. |

website/docs/sideMenu-layout.mdx → website/api/layout-sideMenu.mdx

 ---
-id: sideMenu-layout
+id: layout-sideMenu
 title: Side Menu
 sidebar_label: Side Menu
 ---
 
 | Type             | Required | Description                                      |
 | ---------------- | -------- | ------------------------------------------------ |
-| [Layout](Layout.mdx) | Yes      | Center component, contains the main application. |
+| [Layout](layout-layout.mdx) | Yes      | Center component, contains the main application. |
 
 ## `left`
 
 | Type             | Required | Description                        |
 | ---------------- | -------- | ---------------------------------- |
-| [Layout](Layout.mdx) | No       | Contains the left component layout. |
+| [Layout](layout-layout.mdx) | No       | Contains the left component layout. |
 
 ## `right`
 
 | Type             | Required | Description                         |
 | ---------------- | -------- | ----------------------------------- |
-| [Layout](Layout.mdx) | No       | Contains the right component layout. |
+| [Layout](layout-layout.mdx) | No       | Contains the right component layout. |

website/docs/SplitView.mdx → website/api/layout-splitView.mdx

 ---
-id: splitView
+id: layout-splitView
 title: SplitView
 sidebar_label: SplitView
 ---
 
 | Type               | Required | Description                                     |
 | ------------------ | -------- | ----------------------------------------------- |
-| [Layout](Layout.mdx) | YES      | Set master layout (the smaller screen, sidebar) |
+| [Layout](layout-layout.mdx) | YES      | Set master layout (the smaller screen, sidebar) |
 
 ## `detail`
 
 | Type               | Required | Description                                   |
 | ------------------ | -------- | --------------------------------------------- |
-| [Layout](Layout.mdx) | YES      | Set detail layout (the larger screen, flexes) |
+| [Layout](layout-layout.mdx) | YES      | Set detail layout (the larger screen, flexes) |
 
 ## `options`
 

website/docs/stack-layout.mdx → website/api/layout-stack.mdx

 ---
-id: stack-layout
+id: layout-stack
 title: Stack
 sidebar_label: Stack
 ---
 
 | Type               | Required | Description                   |
 | ------------------ | -------- | ----------------------------- |
-| [Layout[]](Layout.mdx) | YES      | Child layouts of any kind. |
+| [Layout[]](layout-layout.mdx) | YES      | Child layouts of any kind. |
 
 ## `options`
 

website/api/options-animations.mdx

+---
+id: options-animations
+title: Animations
+sidebar_label: Animations
+---

website/docs/options-backButton.mdx → website/api/options-backButton.mdx

 ---
-id: backButton-options
+id: options-backButton
 title: Back Button Options
 sidebar_label: Back Button
 ---

website/docs/options-background.mdx → website/api/options-background.mdx

 ---
-id: background-options
+id: options-background
 title: Background Options
 sidebar_label: Background
 ---

website/docs/options-bottomTab.mdx → website/api/options-bottomTab.mdx

 ---
-id: bottomTab-options
+id: options-bottomTab
 title: Bottom Tab Options
 sidebar_label: Bottom Tab
 ---

website/docs/options-bottomTabs.mdx → website/api/options-bottomTabs.mdx

 ---
-id: bottomTabs-options
+id: options-bottomTabs
 title: Bottom Tabs Options
 sidebar_label: Bottom Tabs
 ---

website/docs/options-button.mdx → website/api/options-button.mdx

 ---
-id: button-options
+id: options-button
 title: Button Options
 sidebar_label: Button
 ---

website/api/options-fab.mdx

+---
+id: options-fab
+title: Fab
+sidebar_label: Fab
+---

website/docs/options-iconInsets.mdx → website/api/options-iconInsets.mdx

 ---
-id: iconInsets-options
+id: options-iconInsets
 title: IconInsets Options
 sidebar_label: IconInsets
 ---

website/docs/options-largeTitle.mdx → website/api/options-largeTitle.mdx

 ---
-id: largeTitle-options
+id: options-largeTitle
 title: Large Title Options
 sidebar_label: Large Title
 ---

website/docs/layout-options.mdx → website/api/options-layout.mdx

 ---
-id: layout-options
+id: options-layout
 title: Layout Options
 sidebar_label: Layout
 ---

website/docs/options-overlay.mdx → website/api/options-overlay.mdx

 ---
-id: overlay-options
+id: options-overlay
 title: Overlay
 sidebar_label: Overlay
 ---

website/api/options-preview.mdx

+---
+id: options-preview
+title: Preview (iOS)
+sidebar_label: Preview (iOS)
+---

website/docs/options-root.mdx → website/api/options-root.mdx

 
 | Type                           | Required | Platform |
 | ------------------------------ | -------- | -------- |
-| [TopBarOptions](stack-options.mdx) |          | No       |
+| [TopBarOptions](options-stack.mdx) |          | No       |
 
 ## `statusBar`
 
 
 | Type                                  | Required | Platform |
 | ------------------------------------- | -------- | -------- |
-| [StatusBarOptions](statusBar-options.mdx) | No       | Both     |
+| [StatusBarOptions](options-statusBar.mdx) | No       | Both     |
 
 ## `layout`
 
 | Type                            | Required | Platform |
 | ------------------------------- | -------- | -------- |
-| [LayoutOptions](layout-options.mdx) | No       | Both     |
+| [LayoutOptions](options-layout.mdx) | No       | Both     |
 
 ## `sideMenu`
 
 
 | Type                              | Required | Platform |
 | --------------------------------- | -------- | -------- |
-| [PreviewOptions](preview-options.mdx) | No       | iOS      |
+| [PreviewOptions](options-preview.mdx) | No       | iOS      |
 
 ## `splitView`
 
 
 | Type               | Required | Platform |
 | ------------------ | -------- | -------- |
-| [Fab](fab-options.mdx) | No       | Android  |
+| [Fab](options-fab.mdx) | No       | Android  |
 
 ## `modalPresentationStyle`
 

website/docs/options-sideMenu.mdx → website/api/options-sideMenu.mdx

 ---
-id: sideMenu-options
+id: options-sideMenu
 title: Side Menu Options
 sidebar_label: Side Menu
 ---

website/docs/options-sideMenuSide.mdx → website/api/options-sideMenuSide.mdx

 ---
-id: sideMenuSide-options
+id: options-sideMenuSide
 title: Side Menu Side Options
 sidebar_label: Side Menu Side
 ---

website/docs/options-splitView.mdx → website/api/options-splitView.mdx

 ---
-id: splitView-options
+id: options-splitView
 title: SplitView Options
 sidebar_label: SplitView
 ---

website/docs/stack-options.mdx → website/api/options-stack.mdx

 ---
-id: stack-options
+id: options-stack
 title: Top Bar Options
 sidebar_label: Top Bar
 ---
 
 | Type                   | Required | Platform |
 | ---------------------- | -------- | -------- |
-| [Title](title-options.mdx) | No       | Both     |
+| [Title](options-title.mdx) | No       | Both     |
 
 ### `subtitle`
 
 
 | Type                         | Required | Platform |
 | ---------------------------- | -------- | -------- |
-| [Subitle](subtitle-options.mdx) | No       | Both     |
+| [Subitle](options-subtitle.mdx) | No       | Both     |
 
 ### `backButton`
 

website/docs/statusBar-options.mdx → website/api/options-statusBar.mdx

 ---
-id: statusBar-options
+id: options-statusBar
 title: Status Bar Options
 sidebar_label: Status Bar
 ---

website/docs/subtitle-options.mdx → website/api/options-subtitle.mdx

 ---
-id: subtitle-options
+id: options-subtitle
 title: Subtitle Options
 sidebar_label: Subtitle
 ---

website/docs/title-options.mdx → website/api/options-title.mdx

 ---
-id: title-options
+id: options-title
 title: Title Options
 sidebar_label: Title
 ---

website/docs/Installing.mdx → website/docs/docs-Installing.mdx

 +   Navigation.setRoot({
 +     root: {
 +       stack: {
-+         component: {
-+           name: 'com.myApp.WelcomeScreen'
-+         }
++         children: [
++           component: {
++             name: 'com.myApp.WelcomeScreen'
++           }
++         ]
 +       }
 +     }
 +  });
 +});
 ```
-
-⚠️ we use the layout type `component` here, which renders a React component but does not allow you to navigate to others. See [Usage](docs/Usage.md) and [LayoutTypes](docs/layout-types.md) for more options.
 ___
 
 ## Manual Installation
 
 Now run `npm run android` to build your application
 
-### Ignore other RNN flavors
-If you don't want to run `npm run android` and want to keep the default `react-native run-android` command, you need to instruct gradle to ignore the other flavors RNN provides.
-
-To do so edit `android/build.gradle` and add:
-
-```diff
-+subprojects { subproject ->
-+    afterEvaluate {
-+        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
-+            android {
-+                variantFilter { variant ->
-+                    def names = variant.flavors*.name
-+                    if (names.contains("reactNative51") || names.contains("reactNative55")) {
-+                        setIgnore(true)
-+                    }
-+                }
-+            }
-+        }
-+    }
-+}
-```
-
-**Note**: As more build variants become available in the future, you will need to adjust the list (`names.contains("reactNative51") || names.contains("reactNative55")`). This is why we recommend the first solution.
-
 ### Force the same support library version across all dependencies
 Some of your dependencies might require a different version of one of Google's support library packages. This results in compilation errors similar to this:
 

website/docs/advanced-navigation.mdx → website/docs/docs-advanced-navigation.mdx

 
 As mobile applications become bigger and more complex, they usually end up containing multiple primary high-level destinations, which are logically independent from one another. The `BottomTabs` layout is often used when an app contains three to five top-level destinations which should be accessible from anywhere in the app.
 
-Lets return to the example code from the previous section ([Basic navigation](basic-navigation.mdx)) and see how we can convert it to a tab-based application. We'll use the BottomTabs layout to display tabs at the bottom of the screen. Similarly to `Stack` layout, The BottomTabs layout also contains a `children` property where each child will be displayed in a tab.
+Lets return to the example code from the previous section ([Basic navigation](basic-navigation)) and see how we can convert it to a tab-based application. We'll use the BottomTabs layout to display tabs at the bottom of the screen. Similarly to `Stack` layout, The BottomTabs layout also contains a `children` property where each child will be displayed in a tab.
 
 Lets change our code to the following and reload the app.
 

website/docs/basic-navigation.mdx → website/docs/docs-basic-navigation.mdx

 
 In order to push another screen to the stack, we will add a button to the home screen and call `Navigation.push`. The 'push' command accepts two parameters, the first is the id used to indicate into which stack to push the screen and the second is the screen we're pushing. After pushing a screen, a back button is added automatically to the TopBar so the users can navigate easily back to the previous screen.
 
-You can read more about the stack layout [here](stack-doc.mdx) or dive right into the API [here](stack-api.mdx).
+You can read more about the stack layout [here](stack.mdx) or dive right into the API [here](../api/layout-stack).
 
 :::info componentId
 Each React component registered with `Navigation.registerComponent` is assigned a unique `componentId` by Navigation. This unique id is used with Navigation commands (like the push command) to indicate into which stack we'd like to push. In this case, by using the componentId of the Home screen, we are telling Navigation to push into the stack containing the Home screen.

website/docs/before-you-start.mdx → website/docs/docs-before-you-start.mdx

 
 We also assume you are working on a Mac with XCode and Android Studio installed and setup. You can also make it work in a Linux distribution, of course, but in that case bare in mind that some sections of the docs that deal with iOS might not be relevant to you.
 
-If you want to dig right into it, start with [installing](Installing.mdx) the library. If you're just looking around, we suggest checking out [basic navigation](basic-navigation.mdx) first.
+If you want to dig right into it, start with [installing](installing) the library. If you're just looking around, we suggest checking out [basic navigation](basic-navigation) first.
 

website/docs/docs-bottomTabs.mdx

 ---
-id: docs-bottomTabs
+id: bottomTabs
 title: Bottom tabs
 sidebar_label: Bottom tabs
 ---

website/docs/docs-externalComponent.mdx

 ---
-id: docs-externalComponent
+id: externalComponent
 title: External Component
 sidebar_label: External Component
 ---

website/docs/docs-modal.mdx

 ---
-id: docs-modal
+id: modal
 title: Modal
 sidebar_label: Modal
 ---

website/docs/docs-overlay.mdx

 ---
-id: docs-overlay
+id: overlay
 title: Overlay
 sidebar_label: Overlay
 ---

website/docs/passing-data-to-components.mdx → website/docs/docs-passing-data-to-components.mdx

 
 ## Initial props
 
-React components use [props](https://facebook.github.io/react-native/docs/props) to receive data when they are created. When displaying the [component](component.mdx) layout, you can pass initial props to components using the `passProps` property.
+React components use [props](https://facebook.github.io/react-native/docs/props) to receive data when they are created. When displaying the [component](../api/layout-component) layout, you can pass initial props to components using the `passProps` property.
 
 In this example, we push the `UserProfile` screen and pass two initial props to it:
 
 
 Static options can either be a simple object, or a function which accepts `passProps` as an argument. Sometimes when declaring components, not all style properties are known. For example, a user profile screen will usually have the user's name as the TopBar title text. Therefore the title must be configured dynamically when pushing the screen.
 
-Following the code example [above](passing-data-to-components.mdx#initial-props), lets see how to use props passed in the push command to set the TopBar title.
+Following the code example [above](passing-data-to-components#initial-props), lets see how to use props passed in the push command to set the TopBar title.
 
 ```jsx
 class UserProfileScreen extends React.Component {
 
 ## Updating props
 
-To update a component's props, use the [Navigation.updateProps()](component-api.mdx#updateprops) command. Updating props triggers the component lifecycle methods related to [updating](https://reactjs.org/docs/react-component.html#updating).
+To update a component's props, use the [Navigation.updateProps()](../api/component#updateprops) command. Updating props triggers the component lifecycle methods related to [updating](https://reactjs.org/docs/react-component.html#updating).
 
 Notice that we're using the component `id` in order to update props of this specific instance of the component.
 

website/docs/playground-app.mdx → website/docs/docs-playground-app.mdx

     - `npm run start` to get the packager running in the terminal, leave it open
     - **iOS**: open `./playground/ios` in Xcode and run it
     - **Android**: open `./playground/android` in Android Studio and run it
-3. You can run tests if / when you need to (list of scripts [available here](contributing.mdx#scripts)). Before you start changing things, make sure everything works.
+3. You can run tests if / when you need to (list of scripts [available here](contributing#scripts)). Before you start changing things, make sure everything works.
 	- To easily run all tests in parallel `npm run test-all`

website/docs/docs-root.mdx

 ---
-id: docs-root
+id: root
 title: Root
 sidebar_label: Root
 ---

website/docs/sideMenu-docs.mdx → website/docs/docs-sideMenu.mdx

 ---
-id: docs-sideMenu
+id: sideMenu
 title: Side Menu
 sidebar_label: Side Menu
 ---

website/docs/docs-stack.mdx

 ---
-id: docs-stack
+id: stack
 title: Stack
 sidebar_label: Stack
 ---

website/docs/animations.mdx → website/docs/style-animations.mdx

 ---
-id: docs-animations
+id: style-animations
 title: Animations
 sidebar_label: Animations
 ---

website/docs/docs-constants.mdx → website/docs/style-constants.mdx

 ---
-id: constants-docs
+id: style-constants
 title: Constants
 sidebar_label: Constants
 ---

website/docs/styling-fonts.mdx → website/docs/style-fonts.mdx

 ---
-id: fonts
+id: style-fonts
 title: Changing fonts
 sidebar_label: Changing fonts
 ---

website/docs/orientation.mdx → website/docs/style-orientation.mdx

 ---
-id: orientation
+id: style-orientation
 title: Orientation
 sidebar_label: Orientation
 ---

website/docs/statusbar-docs.mdx → website/docs/style-statusbar.mdx

 ---
-id: statusBar-docs
+id: style-statusBar
 title: StatusBar
 sidebar_label: StatusBar
 ---

website/docs/theme.mdx → website/docs/style-theme.mdx

 ---
-id: theme
+id: style-theme
 title: Themes
 sidebar_label: Themes
 ---

website/docusaurus.config.js

         src: 'img/logo.png',
       },
       links: [
-        {to: 'docs/installing', label: 'Docs', position: 'left'},
-        {to: 'docs/component-api', label: 'API', position: 'left'},
+        {to: 'docs/before-you-start', label: 'Docs', position: 'left', activeBasePath: 'docs'},
+        {to: 'api/component', label: 'API', position: 'left', activeBasePath: 'api'},
         {
           href: 'https://github.com/wix/react-native-navigation',
           label: 'GitHub',
               label: 'GitHub',
               href: 'https://github.com/wix/react-native-navigation',
             },
-            // {
-            //   label: 'Twitter',
-            //   href: 'https://twitter.com/docusaurus',
-            // },
+            {
+              label: 'Twitter',
+              href: 'https://twitter.com/ReactNativeNav',
+            },
           ],
         },
       ]
       {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
+          routeBasePath: 'docs',
+          path: 'docs',
           editUrl:
             'https://github.com/wix/react-native-navigation/edit/master/website/docs'
         },
         },
       },
     ],
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          routeBasePath: 'api',
+          path: 'api',
+          sidebarPath: require.resolve('./sidebarsApi.js'),
+          editUrl:
+            'https://github.com/wix/react-native-navigation/edit/master/website/docs'
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      },
+    ]
   ],
 };

website/package.json

     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.48",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.48",
+    "@docusaurus/core": "^2.0.0-alpha.50",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.50",
     "classnames": "^2.2.6",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"

website/sidebars.js

 module.exports = {
   docs: {
     'Getting Started': [
-      'before-you-start',
-      'installing',
-      'playground-app',
-      'showcases'
+       'before-you-start',
+       'installing',
+       'playground-app',
+       'showcases'
     ],
     'Using the app': [
-      'app-launch',
-      'basic-navigation',
-      'advanced-navigation',
-      'screen-lifecycle',
-      'passing-data-to-components',
+       'app-launch',
+       'basic-navigation',
+       'advanced-navigation',
+       'screen-lifecycle',
+       'passing-data-to-components',
     ],
     Layouts: [
-      'docs-stack',
-      'docs-bottomTabs',
-      'docs-sideMenu',
-      'docs-externalComponent',
+       'stack',
+       'bottomTabs',
+       'sideMenu',
+       'externalComponent',
     ],
     Hierarchy: [
-      'docs-root',
-      'docs-modal',
-      'docs-overlay'
+       'root',
+       'modal',
+       'overlay'
     ],
     Styling: [
-      'theme',
-      'statusBar-docs',
-      'orientation',
-      'docs-animations',
-      'fonts',
-      'constants-docs'
+      'style-theme',
+      'style-statusBar',
+      'style-orientation',
+      'style-animations',
+      'style-fonts',
+      'style-constants'
     ],
     Meta: [
       'meta-contributing'
     ]
-  },
-  api: [
-    {
-      type: 'category',
-      label: 'Navigation',
-      items: [
-        'component-api',
-        'root-api',
-        'stack-api',
-        'modal-api',
-        'overlay-api'
-      ]
-    },
-    {
-      type: 'category',
-      label: 'Layouts',
-      items: [
-        'layout',
-        'component-layout',
-        'stack-layout',
-        'bottomTabs-layout',
-        'sideMenu-layout',
-        'splitView'
-      ]
-    },
-    {
-      type: 'category',
-      label: 'Options',
-      items: [
-        'options-api',
-        'options-root',
-        'bottomTabs-options',
-        'bottomTab-options',
-        {
-          'type': 'category',
-          'label': 'Stack',
-          'items': [
-            'stack-options',
-            'title-options',
-            'subtitle-options',
-            'background-options',
-            'backButton-options',
-            'button-options',
-            'iconInsets-options',
-            'largeTitle-options'
-          ]
-        },
-        'statusBar-options',
-        'layout-options',
-        'overlay-options',
-        'sideMenu-options',
-        'sideMenuSide-options',
-        'splitView-options'
-      ]
-    },
-    'events-api'
-  ]
+  }
 };

website/sidebarsApi.js

+module.exports = {
+  api: [
+    {
+      type: 'category',
+      label: 'Navigation',
+      items: [
+        'component',
+        'root',
+        'stack',
+        'modal',
+        'overlay'
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Layouts',
+      items: [
+        'layout-layout',
+        'layout-component',
+        'layout-stack',
+        'layout-bottomTabs',
+        'layout-sideMenu',
+        'layout-splitView'
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Options',
+      items: [
+        'options-api',
+        'options-root',
+        'options-bottomTabs',
+        'options-bottomTab',
+        {
+          'type': 'category',
+          'label': 'Stack',
+          'items': [
+            'options-stack',
+            'options-title',
+            'options-subtitle',
+            'options-background',
+            'options-backButton',
+            'options-button',
+            'options-iconInsets',
+            'options-largeTitle'
+          ]
+        },
+        'options-statusBar',
+        'options-layout',
+        'options-overlay',
+        'options-sideMenu',
+        'options-sideMenuSide',
+        'options-splitView'
+      ]
+    },
+    'events'
+  ]
+};

website/src/pages/index.js

 import {Redirect} from '@docusaurus/router';
 
 function Home() {
-  return <Redirect to="/react-native-navigation/docs/before-you-start" />;
+  return <Redirect to="/react-native-navigation/docs/before-you-start/" />;
 }
 
 export default Home;