docs: update order

Author: bbohlender

docs/getting-started/all-components.md

@@ -1,7 +1,7 @@
 ---
 title: All Components
 description: Overview of all components offered by @react-three/xr.
-nav: 3
+nav: 4
 ---
 
 ### `XR`

docs/getting-started/all-hooks.md

@@ -1,7 +1,7 @@
 ---
 title: All Hooks
 description: Overview of all hooks offered by @react-three/xr.
-nav: 4
+nav: 5
 ---
 
 ### `useXR`

docs/getting-started/convert-to-xr.md

@@ -1,14 +1,14 @@
 ---
 title: Convert to XR
 description: How to convert an existing react-three-fiber app into an interactive immersive experience.
-nav: 0
+nav: 1
 ---
 
 In case your app is already an R3F app build with natuerlich or @react-three/xr v5. Check out the migration guides for [natuerlich](../migration/from-natuerlich.md) and [@react-three/xr v5](../migration/from-react-three-xr-5.md).
 
 The first step is to install the latest version of react-three/xr.
 
-```
+```bash
 npm install @react-three/xr@latest
 ```
 
@@ -35,7 +35,6 @@ Using the `store`, we can set up a way for the user to enter the XR experience.
 Lastly, use the `store` to setup the `XR` component to wrap your scene. 
 
 ```tsx
-
 <>
     <button onClick={() => store.enterVR()}>Enter VR</button>
     <button onClick={() => store.enterAR()}>Enter AR</button>

docs/getting-started/examples.md

@@ -1,7 +1,7 @@
 ---
 title: Examples
 description: Examples made with @react-three/xr
-nav: 1
+nav: 2
 ---
 
 <Grid cols={2}>

docs/getting-started/showcases.md

@@ -1,7 +1,7 @@
 ---
 title: Showcases
 description: Public products build with @react-three/xr
-nav: 2
+nav: 3
 ---
 
 

docs/tutorials/custom-inputs.md

@@ -1,7 +1,7 @@
 ---
 title: Custom Hands/Controllers/...
 description: Customize interactions and style of inputs such as hands, controllers, and more
-nav: 10
+nav: 12
 ---
 
 @react-three/xr provides a set of default hands, controllers, transient pointers, gazes, and screen input that can be configured and completely exchanged with your own implementation. The following example shows how to configure the ray color of the ray pointer in the users hand.

docs/tutorials/gamepad.md

@@ -1,7 +1,7 @@
 ---
 title: Gamepad
 description: How to use the XRControllers gamepad?
-nav: 9
+nav: 10
 ---
 
 All XR controllers are part of the state inside the xr store. The existing controllers can be read using the `useXR` hook. Alternatively, a specific xr controller can be retrived using `useXRController("left")`.

docs/tutorials/guards.md

@@ -1,7 +1,7 @@
 ---
 title: Guards
 description: Render and show parts of your application conditionally using guards
-nav: 11
+nav: 13
 ---
 
 Guards allow to conditionally display or include content. For instance, the `IfInSessionMode` guard allows only displaying a background when the session is not an AR session. The `IfInSessionMode` can receive either a list of `allow` session modes or a list of `deny` session modes.

docs/tutorials/interactions.md

@@ -1,7 +1,7 @@
 ---
 title: Interactions
 description: Build interactions that work across XR and non-XR web applications
-nav: 5
+nav: 6
 ---
 
 @react-three/xr uses the same pointer events as @react-three/fiber, which allows building interactions that work on non-XR devices as well as XR devices. So, just like you'd expect from @react-three/fiber and everywhere else in react, interactions are built using

docs/tutorials/object-detection.md

@@ -1,7 +1,7 @@
 ---
 title: Object Detection
 description: Use detected objects such as meshes and planes for rendering, scene understanding, physics, and more
-nav: 8
+nav: 11
 ---
 
 @react-three/xr allows to use the devices mesh and plane detection functionality to detect the meshes and planes in the environment to modify the rendering, allow physics interactions with the environment, and more.