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

@@ -1,5 +1,5 @@
 ---
-id: component-api
+id: component
 title: Component
 sidebar_label: Component
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: events-api
+id: events
 title: Events
 sidebar_label: Events
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: modal-api
+id: modal
 title: Modal
 sidebar_label: Modal
 ---
@@ -9,7 +9,7 @@ Show a screen as a 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

@@ -1,5 +1,5 @@
 ---
-id: overlay-api
+id: overlay
 title: Overlay
 sidebar_label: Overlay
 ---
@@ -9,7 +9,7 @@ Shows a component as an 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

@@ -1,5 +1,5 @@
 ---
-id: root-api
+id: root
 title: Root
 sidebar_label: Root
 ---
@@ -8,12 +8,12 @@ import Tabs from '@theme/Tabs';
 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

@@ -1,5 +1,5 @@
 ---
-id: stack-api
+id: stack
 title: Stack
 sidebar_label: Stack
 ---
@@ -128,7 +128,7 @@ Reset the stack to the given layout (accepts multiple children).
 | 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

@@ -1,5 +1,5 @@
 ---
-id: bottomTabs-layout
+id: layout-bottomTabs
 title: Bottom Tabs
 sidebar_label: Bottom Tabs
 ---
@@ -41,7 +41,7 @@ A container view for managing a radio-style selection interface, where a selecti
 
 | 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

@@ -1,5 +1,5 @@
 ---
-id: component-layout
+id: layout-component
 title: Component
 sidebar_label: Component
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: layout
+id: layout-layout
 title: Layout
 sidebar_label: Layout
 ---
@@ -20,4 +20,4 @@ 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

@@ -1,5 +1,5 @@
 ---
-id: sideMenu-layout
+id: layout-sideMenu
 title: Side Menu
 sidebar_label: Side Menu
 ---
@@ -29,16 +29,16 @@ This layout allows implementing sidemenus, which can be opened by swiping from o
 
 | 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

@@ -1,5 +1,5 @@
 ---
-id: splitView
+id: layout-splitView
 title: SplitView
 sidebar_label: SplitView
 ---
@@ -35,13 +35,13 @@ Currently implemented only in iOS.
 
 | 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

@@ -1,5 +1,5 @@
 ---
-id: stack-layout
+id: layout-stack
 title: Stack
 sidebar_label: Stack
 ---
@@ -30,7 +30,7 @@ A stack is a container layout promoting a hierarchical navigation. It is used to
 
 | 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

@@ -0,0 +1,5 @@
+---
+id: options-animations
+title: Animations
+sidebar_label: Animations
+---

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

@@ -1,5 +1,5 @@
 ---
-id: backButton-options
+id: options-backButton
 title: Back Button Options
 sidebar_label: Back Button
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: background-options
+id: options-background
 title: Background Options
 sidebar_label: Background
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: bottomTab-options
+id: options-bottomTab
 title: Bottom Tab Options
 sidebar_label: Bottom Tab
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: bottomTabs-options
+id: options-bottomTabs
 title: Bottom Tabs Options
 sidebar_label: Bottom Tabs
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: button-options
+id: options-button
 title: Button Options
 sidebar_label: Button
 ---

website/api/options-fab.mdx

@@ -0,0 +1,5 @@
+---
+id: options-fab
+title: Fab
+sidebar_label: Fab
+---

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

@@ -1,5 +1,5 @@
 ---
-id: iconInsets-options
+id: options-iconInsets
 title: IconInsets Options
 sidebar_label: IconInsets
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: largeTitle-options
+id: options-largeTitle
 title: Large Title Options
 sidebar_label: Large Title
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: layout-options
+id: options-layout
 title: Layout Options
 sidebar_label: Layout
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: overlay-options
+id: options-overlay
 title: Overlay
 sidebar_label: Overlay
 ---

website/api/options-preview.mdx

@@ -0,0 +1,5 @@
+---
+id: options-preview
+title: Preview (iOS)
+sidebar_label: Preview (iOS)
+---

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

@@ -39,7 +39,7 @@ Controls the Stack top bar styling.
 
 | Type                           | Required | Platform |
 | ------------------------------ | -------- | -------- |
-| [TopBarOptions](stack-options.mdx) |          | No       |
+| [TopBarOptions](options-stack.mdx) |          | No       |
 
 ## `statusBar`
 
@@ -47,13 +47,13 @@ Controls the system status bar styling.
 
 | 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`
 
@@ -83,7 +83,7 @@ Controls the system status bar styling.
 
 | Type                              | Required | Platform |
 | --------------------------------- | -------- | -------- |
-| [PreviewOptions](preview-options.mdx) | No       | iOS      |
+| [PreviewOptions](options-preview.mdx) | No       | iOS      |
 
 ## `splitView`
 
@@ -95,7 +95,7 @@ Controls the system status bar styling.
 
 | 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

@@ -1,5 +1,5 @@
 ---
-id: sideMenu-options
+id: options-sideMenu
 title: Side Menu Options
 sidebar_label: Side Menu
 ---

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

@@ -1,5 +1,5 @@
 ---
-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

@@ -1,5 +1,5 @@
 ---
-id: splitView-options
+id: options-splitView
 title: SplitView Options
 sidebar_label: SplitView
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: stack-options
+id: options-stack
 title: Top Bar Options
 sidebar_label: Top Bar
 ---
@@ -32,7 +32,7 @@ Controls the top bar title.
 
 | Type                   | Required | Platform |
 | ---------------------- | -------- | -------- |
-| [Title](title-options.mdx) | No       | Both     |
+| [Title](options-title.mdx) | No       | Both     |
 
 ### `subtitle`
 
@@ -40,7 +40,7 @@ Controls the top bar 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

@@ -1,5 +1,5 @@
 ---
-id: statusBar-options
+id: options-statusBar
 title: Status Bar Options
 sidebar_label: Status Bar
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: subtitle-options
+id: options-subtitle
 title: Subtitle Options
 sidebar_label: Subtitle
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: title-options
+id: options-title
 title: Title Options
 sidebar_label: Title
 ---

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

@@ -42,16 +42,16 @@ import App from "./App";
 +   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
@@ -313,30 +313,6 @@ Now that you're done, don't forget to update the `index.js` file, as [shown abov
 
 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

@@ -10,7 +10,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 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

@@ -92,7 +92,7 @@ In the previous section we created a stack and initialized it with a single chil
 
 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

@@ -8,5 +8,5 @@ React Native Navigation is a module, dependent on and intended to be used alongs
 
 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

@@ -1,5 +1,5 @@
 ---
-id: docs-bottomTabs
+id: bottomTabs
 title: Bottom tabs
 sidebar_label: Bottom tabs
 ---

website/docs/docs-externalComponent.mdx

@@ -1,5 +1,5 @@
 ---
-id: docs-externalComponent
+id: externalComponent
 title: External Component
 sidebar_label: External Component
 ---

website/docs/docs-modal.mdx

@@ -1,5 +1,5 @@
 ---
-id: docs-modal
+id: modal
 title: Modal
 sidebar_label: Modal
 ---

website/docs/docs-overlay.mdx

@@ -1,5 +1,5 @@
 ---
-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

@@ -6,7 +6,7 @@ sidebar_label: Passing data to components
 
 ## 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:
 
@@ -33,7 +33,7 @@ Each component can have a static options property which is used to configure the
 
 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 {
@@ -51,7 +51,7 @@ 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

@@ -13,5 +13,5 @@ If you want to have a quick look around and test things out, you can run the pla
     - `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

@@ -1,5 +1,5 @@
 ---
-id: docs-root
+id: root
 title: Root
 sidebar_label: Root
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: docs-sideMenu
+id: sideMenu
 title: Side Menu
 sidebar_label: Side Menu
 ---

website/docs/docs-stack.mdx

@@ -1,5 +1,5 @@
 ---
-id: docs-stack
+id: stack
 title: Stack
 sidebar_label: Stack
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: docs-animations
+id: style-animations
 title: Animations
 sidebar_label: Animations
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: constants-docs
+id: style-constants
 title: Constants
 sidebar_label: Constants
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: fonts
+id: style-fonts
 title: Changing fonts
 sidebar_label: Changing fonts
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: orientation
+id: style-orientation
 title: Orientation
 sidebar_label: Orientation
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: statusBar-docs
+id: style-statusBar
 title: StatusBar
 sidebar_label: StatusBar
 ---

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

@@ -1,5 +1,5 @@
 ---
-id: theme
+id: style-theme
 title: Themes
 sidebar_label: Themes
 ---

website/docusaurus.config.js

@@ -19,8 +19,8 @@ module.exports = {
         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',
@@ -77,10 +77,10 @@ module.exports = {
               label: 'GitHub',
               href: 'https://github.com/wix/react-native-navigation',
             },
-            // {
-            //   label: 'Twitter',
-            //   href: 'https://twitter.com/docusaurus',
-            // },
+            {
+              label: 'Twitter',
+              href: 'https://twitter.com/ReactNativeNav',
+            },
           ],
         },
       ]
@@ -92,6 +92,8 @@ module.exports = {
       {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
+          routeBasePath: 'docs',
+          path: 'docs',
           editUrl:
             'https://github.com/wix/react-native-navigation/edit/master/website/docs'
         },
@@ -100,5 +102,20 @@ module.exports = {
         },
       },
     ],
+    [
+      '@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

@@ -9,8 +9,8 @@
     "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

@@ -1,95 +1,39 @@
 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

@@ -0,0 +1,58 @@
+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

@@ -2,7 +2,7 @@ import React from 'react';
 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;