docs: restructure oryx sidenav

CODEOWNERS

@@ -1,10 +1,10 @@
 * @spryker/docs
 
 /docs/scos/dev/front-end-development/*/oryx/* @andriitserkovnyi
-docs/scos/dev/front-end-development/*/oryx/oryx-localization.md @andriitserkovnyi @tobi-or-not-tobi @tolerants
+docs/scos/dev/front-end-development/*/oryx/building-applications/oryx-localization.md @andriitserkovnyi @tobi-or-not-tobi @tolerants
 /docs/scos/dev/front-end-development/*/oryx/feature-sets.md @tobi-or-not-tobi @andriitserkovnyi
-/docs/scos/dev/front-end-development/*/oryx/dependency-injection/* @dunqan @andriitserkovnyi
-/docs/scos/dev/front-end-development/*/oryx/styling/* @tobi-or-not-tobi @andriitserkovnyi @tolerants
-/docs/scos/dev/front-end-development/*/oryx/styling/oryx-icon-system.md @supproduction @tobi-or-not-tobi @andriitserkovnyi
-/docs/scos/dev/front-end-development/*/oryx/styling/oryx-design-tokens.md @tolerants @tobi-or-not-tobi @andriitserkovnyi
+/docs/scos/dev/front-end-development/*/oryx/architecture/dependency-injection/* @dunqan @andriitserkovnyi
+/docs/scos/dev/front-end-development/*/oryx/building-applications/styling/* @tobi-or-not-tobi @andriitserkovnyi @tolerants
+/docs/scos/dev/front-end-development/*/oryx/building-applications/styling/oryx-icon-system.md @supproduction @tobi-or-not-tobi @andriitserkovnyi
+/docs/scos/dev/front-end-development/*/oryx/building-applications/styling/oryx-design-tokens.md @tolerants @tobi-or-not-tobi @andriitserkovnyi
 /docs/scos/dev/set-up-spryker-locally/* @andriitserkovnyi

_data/sidebars/scos_dev_sidebar.yml

@@ -3331,78 +3331,89 @@ entries:
       - "202212.0"
       - "202307.0"
       nested:
-        - title: Set up
-          url: /docs/scos/dev/front-end-development/oryx/set-up-oryx.html
-        - title: Boilerplate
-          url: /docs/scos/dev/front-end-development/oryx/oryx-boilerplate.html
-        - title: Feature sets
-          url: /docs/scos/dev/front-end-development/oryx/oryx-feature-sets.html
-        - title: Presets
-          url: /docs/scos/dev/front-end-development/oryx/oryx-presets.html
-        - title: Packages
-          url: /docs/scos/dev/front-end-development/oryx/oryx-packages.html
-        - title: Versioning
-          url: /docs/scos/dev/front-end-development/oryx/oryx-versioning.html
-        - title: "Pages"
-          url: /docs/scos/dev/front-end-development/oryx/building-pages/oryx-pages.html
-        - title: "Compositions"
-          url: /docs/scos/dev/front-end-development/oryx/building-pages/oryx-compositions.html
-        - title: Routing
-          url: /docs/scos/dev/front-end-development/oryx/building-pages/oryx-routing.html
-        - title: Server-side rendering
-          url: /docs/scos/dev/front-end-development/oryx/oryx-server-side-rendering.html
-        - title: Localization
-          url: /docs/scos/dev/front-end-development/oryx/oryx-localization.html
-        - title: Supported browsers
-          url: /docs/scos/dev/front-end-development/oryx/oryx-supported-browsers.html
-        - title: Dependency injection
-          url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection.html
+        - title: Getting started
           nested:
-            - title: Oryx service layer
-              url: /docs/scos/dev/front-end-development/oryx/dependency-injection/oryx-service-layer.html
-            - title: Using services
-              url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection-using-services.html
-            - title: Defining services
-              url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection-defining-services.html
-            - title: Providing services
-              url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection-providing-services.html
-            - title: Advanced strategies
-              url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection-advanced-strategies.html
-        - title: Application orchestration
-          url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application-orchestration.html
+            - title: Set up
+              url: /docs/scos/dev/front-end-development/oryx/getting-started/set-up-oryx.html
+            - title: Boilerplate
+              url: /docs/scos/dev/front-end-development/oryx/getting-started/oryx-boilerplate.html
+            - title: Packages
+              url: /docs/scos/dev/front-end-development/oryx/getting-started/oryx-packages.html
+            - title: Versioning
+              url: /docs/scos/dev/front-end-development/oryx/getting-started/oryx-versioning.html
+            - title: Supported browsers
+              url: /docs/scos/dev/front-end-development/oryx/getting-started/oryx-supported-browsers.html
+
+        - title: Building applications
           nested:
-            - title: Application
-              url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application.html
-            - title: Application environment
-              url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application-environment.html
-            - title: Application feature
-              url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application-feature.html
-            - title: Application plugins
-              url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application-plugins.html
-        - title: Reactivity
-          url: /docs/scos/dev/front-end-development/oryx/reactivity/reactivity.html
+          - title: Presets
+            url: /docs/scos/dev/front-end-development/oryx/building-applications/oryx-presets.html
+          - title: Feature sets
+            url: /docs/scos/dev/front-end-development/oryx/building-applications/oryx-feature-sets.html
+          - title: Application orchestration
+            url: /docs/scos/dev/front-end-development/oryx/building-applications/oryx-application-orchestration/oryx-application-orchestration.html
+            nested:
+              - title: Application
+                url: /docs/scos/dev/front-end-development/oryx/building-applications/oryx-application-orchestration/oryx-application.html
+              - title: Application environment
+                url: /docs/scos/dev/front-end-development/oryx/building-applications/oryx-application-orchestration/oryx-application-environment.html
+              - title: Application feature
+                url: /docs/scos/dev/front-end-development/oryx/building-applications/oryx-application-orchestration/oryx-application-feature.html
+              - title: Application plugins
+                url: /docs/scos/dev/front-end-development/oryx/building-applications/oryx-application-orchestration/oryx-application-plugins.html
+          - title: Localization
+            url: /docs/scos/dev/front-end-development/oryx/building-applications/oryx-localization.html
+          - title: Styling
+            include_versions:
+            - "202212.0"
+            - "202307.0"
+            nested:
+              - title: Color system
+                url: /docs/scos/dev/front-end-development/oryx/building-applications/styling/oryx-color-system.html
+              - title: Design tokens
+                url: /docs/scos/dev/front-end-development/oryx/building-applications/styling/oryx-design-tokens.html
+              - title: Icon system
+                url: /docs/scos/dev/front-end-development/oryx/building-applications/styling/oryx-icon-system.html
+              - title: Typography
+                url: /docs/scos/dev/front-end-development/oryx/building-applications/styling/oryx-typography.html
+
+        - title: Building pages
           nested:
-            - title: Key concepts
-              url: /docs/scos/dev/front-end-development/oryx/reactivity/key-concepts-of-reactivity.html
-            - title: Reactive components
-              url: /docs/scos/dev/front-end-development/oryx/reactivity/reactive-components.html
-            - title: Integration of backend APIs
-              url: /docs/scos/dev/front-end-development/oryx/reactivity/oryx-integration-of-backend-apis.html
-            - title: Signals
-              url: /docs/scos/dev/front-end-development/oryx/reactivity/signals.html
-        - title: Styling
-          include_versions:
-          - "202212.0"
-          - "202307.0"
+            - title: "Pages"
+              url: /docs/scos/dev/front-end-development/oryx/building-pages/oryx-pages.html
+            - title: "Compositions"
+              url: /docs/scos/dev/front-end-development/oryx/building-pages/oryx-compositions.html
+            - title: Routing
+              url: /docs/scos/dev/front-end-development/oryx/building-pages/oryx-routing.html
+
+        - title: Architecture
           nested:
-            - title: Color system
-              url: /docs/scos/dev/front-end-development/oryx/styling/oryx-color-system.html
-            - title: Design tokens
-              url: /docs/scos/dev/front-end-development/oryx/styling/oryx-design-tokens.html
-            - title: Icon system
-              url: /docs/scos/dev/front-end-development/oryx/styling/oryx-icon-system.html
-            - title: Typography
-              url: /docs/scos/dev/front-end-development/oryx/styling/oryx-typography.html
+            - title: Dependency injection
+              url: /docs/scos/dev/front-end-development/oryx/architecture/dependency-injection/dependency-injection.html
+              nested:
+                - title: Oryx service layer
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/dependency-injection/oryx-service-layer.html
+                - title: Using services
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/dependency-injection/dependency-injection-using-services.html
+                - title: Defining services
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/dependency-injection/dependency-injection-defining-services.html
+                - title: Providing services
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/dependency-injection/dependency-injection-providing-services.html
+                - title: Advanced strategies
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/dependency-injection/dependency-injection-advanced-strategies.html
+            - title: Reactivity
+              url: /docs/scos/dev/front-end-development/oryx/architecture/reactivity/reactivity.html
+              nested:
+                - title: Key concepts
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/reactivity/key-concepts-of-reactivity.html
+                - title: Reactive components
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/reactivity/reactive-components.html
+                - title: Integration of backend APIs
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/reactivity/oryx-integration-of-backend-apis.html
+                - title: Signals
+                  url: /docs/scos/dev/front-end-development/oryx/architecture/reactivity/signals.html
+            - title: Server-side rendering
+              url: /docs/scos/dev/front-end-development/oryx/architecture/oryx-server-side-rendering.html
 
     - title: Marketplace
       include_versions:

docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-advanced-strategies.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/dependency-injection/dependency-injection-advanced-strategies.md

@@ -5,7 +5,7 @@ template: concept-topic-template
 last_updated: Apr 13, 2023
 ---
 
-This document describes advanced strategies of using [dependency injection (DI)](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html).
+This document describes advanced strategies of using [dependency injection (DI)](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/dependency-injection/dependency-injection.html).
 
 
 ## The INJECTOR token

docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-defining-services.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/dependency-injection/dependency-injection-defining-services.md

@@ -56,4 +56,4 @@ export class DefaultCartService implements CartService {
 
 ## Next step
 
-[Providing services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-providing-services.html)
+[Providing services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/dependency-injection/dependency-injection-providing-services.html)

docs/scos/dev/front-end-development/202307.0/oryx/dependency-injection/dependency-injection-providing-services.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/dependency-injection/dependency-injection-providing-services.md

@@ -38,4 +38,4 @@ In this example, the customized cart service is provided by specifying the provi
 
 ## Next steps
 
-[Advanced strategies](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-advanced-strategies.html)
+[Advanced strategies](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/dependency-injection/dependency-injection-advanced-strategies.html)

docs/scos/dev/front-end-development/202307.0/oryx/dependency-injection/dependency-injection-using-services.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/dependency-injection/dependency-injection-using-services.md

@@ -37,4 +37,4 @@ A typical Oryx application usually uses one global DI container, which is set up
 
 ## Next steps
 
-[Defining services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-defining-services.html)
+[Defining services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/dependency-injection/dependency-injection-defining-services.html)

docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/dependency-injection/dependency-injection.md

@@ -13,4 +13,4 @@ The key advantage of using Oryx's DI implementation is that it is vanilla JavaSc
 
 ## Next step
 
-[Oryx service layer](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/oryx-service-layer.html)
+[Oryx service layer](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/dependency-injection/oryx-service-layer.html)

docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/oryx-service-layer.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/dependency-injection/oryx-service-layer.md

@@ -22,4 +22,4 @@ In a typical Oryx application, the application orchestrator automatically handle
 
 ## Next steps
 
-[Using services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-using-services.html)
+[Using services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/dependency-injection/dependency-injection-using-services.html)

docs/scos/dev/front-end-development/202212.0/oryx/reactivity/key-concepts-of-reactivity.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/reactivity/key-concepts-of-reactivity.md

@@ -65,4 +65,4 @@ Oryx offers a signals implementation and the @signalAware decorator for Lit comp
 
 ## Next steps
 
-[Reactive components](/docs/scos/dev/front-end-development/{{page.version}}/oryx/reactivity/reactive-components.html)
+[Reactive components](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/reactivity/reactive-components.html)

docs/scos/dev/front-end-development/202212.0/oryx/reactivity/reactive-components.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/reactivity/reactive-components.md

@@ -26,7 +26,7 @@ export class ProductPriceComponent extends LitElement {
 }
 ```
 
-To emit values, [observables](/docs/scos/dev/front-end-development/{{page.version}}/oryx/reactivity/key-concepts-of-reactivity.html) require to be subscribed to and unsubscribed when the values are no longer needed. To avoid such boilerplate code, you can use a decorator to subscribe and unsubscribe from observables. The decorator subscribes to the observable but also unsubscribes when the component is destroyed. This ensures that there's no leaking memory in the application. In the following snippet, an observable is assigned to the local `product$` field.
+To emit values, [observables](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/reactivity/key-concepts-of-reactivity.html) require to be subscribed to and unsubscribed when the values are no longer needed. To avoid such boilerplate code, you can use a decorator to subscribe and unsubscribe from observables. The decorator subscribes to the observable but also unsubscribes when the component is destroyed. This ensures that there's no leaking memory in the application. In the following snippet, an observable is assigned to the local `product$` field.
 
 ```ts
 export class ProductPriceComponent {
@@ -97,4 +97,4 @@ In the preceding example, the product data is observed from `ProductService` by
 
 ## Next steps
 
-[Integration of backend APIs](/docs/scos/dev/front-end-development/{{page.version}}/oryx/reactivity/oryx-integration-of-backend-apis.html)
+[Integration of backend APIs](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/reactivity/oryx-integration-of-backend-apis.html)

docs/scos/dev/front-end-development/202212.0/oryx/reactivity/reactivity.md → docs/scos/dev/front-end-development/202212.0/oryx/architecture/reactivity/reactivity.md

@@ -38,4 +38,4 @@ The following steps are identified in the diagram:
 
 ## Next steps
 
-[Key concepts of reactivity](/docs/scos/dev/front-end-development/{{page.version}}/oryx/reactivity/key-concepts-of-reactivity.html)
+[Key concepts of reactivity](/docs/scos/dev/front-end-development/{{page.version}}/oryx/architecture/reactivity/key-concepts-of-reactivity.html)

docs/scos/dev/front-end-development/202307.0/oryx/oryx-application-orchestration/oryx-application-feature.md → docs/scos/dev/front-end-development/202212.0/oryx/building-applications/oryx-application-orchestration/oryx-application-feature.md

@@ -4,18 +4,17 @@ description: Feature of the Oryx Application
 template: concept-topic-template
 ---
 
-
 `AppFeature` is a higher level collection of lower-level primitives, such as the following:
 
 <!-- TODO: Link to components -->
 - Components
 <!-- TODO: Link to providers -->
 - Providers
-- [Plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-plugins.html)
+- [Plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/building-applications/oryx-application-orchestration/oryx-application-plugins.html)
 <!-- TODO: Link to resources -->
 - Resources
 - [Feature options](#feature-options)
-- [Builder options](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-orchestration.html#customization-of-options)
+- [Builder options](/docs/scos/dev/front-end-development/{{page.version}}/oryx/building-applications/oryx-application-orchestration/oryx-application-orchestration.html#customization-of-options)
 
 Features are useful to structure and organize code and functionality into logical groups and to make them easier to reuse in different scenarios.