[15.x.x] Updated doc with sidenav mode

_data/components/formLayoutManager.yml

@@ -8,7 +8,7 @@ attributes: [{
   name: "attr"
 },{
   name: "mode",
-  type: "tab | dialog | split-pane",
+  type: "tab | dialog | split-pane | sidenav",
   default: "dialog",
   required: "",
   description: "Form layout manager mode"
@@ -78,6 +78,18 @@ attributes: [{
   default: "",
   required: "",
   description: "<b><i>Deprecated</i></b>. The dialog maximum height"
+},{
+  name: "sidenav-position",
+  type: "start | end",
+  default: "end",
+  required: "",
+  description: "Position of the sidenav when the layout manager is in sidenav mode"
+},{
+  name: "sidenav-width",
+  type: "string",
+  default: "60%",
+  required: "",
+  description: "Width of the sidenav when the layout manager is in sidenav mode"
 },{
   name: "store-state"
 }]
@@ -102,5 +114,8 @@ directives: [
   },
   {
     name: "o-form-layout-tabgroup-options"
+  },
+  {
+    name: "o-form-layout-sidenav-options"
   }
 ]

_data/components/formLayoutManagerComponents/formLayoutSidenavOptions.yml

@@ -0,0 +1,28 @@
+directive: "o-form-layout-sidenav-options"
+title: "Sidenav mode"
+
+attributes: [{
+  name: "width",
+  type: "string",
+  default: "",
+  required: "",
+  description: "Width of the sidenav panel"
+},{
+  name: "position",
+  type: "start | end",
+  default: "end",
+  required: "",
+  description: "Position of the sidenav"
+},{
+  name: "label-columns",
+  type: "string",
+  default: "",
+  required: "",
+  description: "Form data columns used in the detail form title. Separated by ';'"
+},{
+  name: "separator",
+  type: "string",
+  default: "' ' (blank space)",
+  required: "",
+  description: "Separator between multiple label columns values"
+}]

docs/components/layout/57-o-form-layout-manager.component.md

@@ -106,6 +106,32 @@ It is possible to configure split pane mode options with the `o-form-layout-spli
 </o-form-layout-manager>
 ```
 
+### Sidenav mode
+
+Select the *sidenav* mode to display the detail form inside a side navigation panel that slides over the collection component.
+
+This mode is especially useful when you want a modern master–detail interaction without leaving the current view. The detail component is rendered dynamically inside a `mat-sidenav`, allowing a smooth and contextual user experience.
+
+You can select this mode setting the value **sidenav** to the `mode` input. You can see a working example of this mode in the [OntimizeWeb Playground](https://try.imatia.com/ontimizeweb/v15/playground/main/layout-manager/sidenav){:target="_blank"}.
+
+![Form layout manager in *sidenav* mode]({{ base_path }}/assets/images/layouts/form-layout-manager/formLayoutManagerSIDENAV.png){: .align-center; width="800px"}
+
+
+#### Options
+It is possible to configure sidenav mode options with the `o-form-layout-sidenav-options` component. This attributes are explained on the **API** section of this page.
+
+<h3 class="grey-color">Example</h3>
+
+```html
+<o-form-layout-manager mode="sidenav" attr="o-form-layout-sidenav-form">
+
+  <o-form-layout-sidenav-options width="600px"></o-form-layout-sidenav-options>
+
+  ...
+
+</o-form-layout-manager>
+```
+
 ### Options definition
 
 The different available modes options can be setted in two ways: using the mode option tag or including the mode inputs in the `o-form-layout-manager` tag.