@rxap/layout 18.0.3-dev.0 → 18.1.0-dev.0

package/compodoc/components/SidenavComponent.html

@@ -142,10 +142,6 @@
 
 
 
-            <tr>
-                <td class="col-md-3">host</td>
-                <td class="col-md-9"><code>{<br>}</code></td>
-            </tr>
 
 
 
@@ -165,14 +161,19 @@
             <tr>
                 <td class="col-md-3">imports</td>
                 <td class="col-md-9">
-                            <code>NgClass</code>
+                            <code>MatIcon</code>
+                            <code>MatIconButton</code>
+                            <code>MatSidenav</code>
+                            <code>MatSidenavContainer</code>
+                            <code>MatSidenavContent</code>
+                                <code><a href="../components/NavigationComponent.html" target="_self" >NavigationComponent</a></code>
                             <code>NgIf</code>
+                            <code>RouterOutlet</code>
+                            <code>NgClass</code>
+                            <code>NgStyle</code>
+                            <code>MatDivider</code>
                             <code>NgTemplateOutlet</code>
-                            <code>MatDividerModule</code>
-                                <code><a href="../components/NavigationComponent.html" target="_self" >NavigationComponent</a></code>
-                            <code>MatButtonModule</code>
-                            <code>MatIconModule</code>
-                            <code>AsyncPipe</code>
+                            <code>MatButton</code>
                 </td>
             </tr>
 
@@ -214,20 +215,76 @@
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#sidenav" >sidenav</a>
+                                <a href="#collapsable" >collapsable</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#collapsed" >collapsed</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#fixedBottomGap" >fixedBottomGap</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#fixedInViewport" >fixedInViewport</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#fixedTopGap" >fixedTopGap</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#opened" >opened</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#pinned" >pinned</a>
                             </li>
                             <li>
-                                    <span class="modifier"></span>
                                     <span class="modifier">Public</span>
-                                    <span class="modifier">Optional</span>
+                                    <span class="modifier">Readonly</span>
                                 <a href="#sidenavFooterDirective" >sidenavFooterDirective</a>
                             </li>
                             <li>
-                                    <span class="modifier"></span>
                                     <span class="modifier">Public</span>
-                                    <span class="modifier">Optional</span>
+                                    <span class="modifier">Readonly</span>
                                 <a href="#sidenavHeaderDirective" >sidenavHeaderDirective</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Public</span>
+                                    <span class="modifier">Readonly</span>
+                                <a href="#sidenavMode" >sidenavMode</a>
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td class="col-md-4">
+                        <h6><b>Methods</b></h6>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <ul class="index-list">
+                            <li>
+                                    <span class="modifier">Async</span>
+                                <a href="#closeSidenav" >closeSidenav</a>
+                            </li>
+                            <li>
+                                    <span class="modifier">Async</span>
+                                <a href="#openSidenav" >openSidenav</a>
+                            </li>
+                            <li>
+                                <a href="#togglePinned" >togglePinned</a>
+                            </li>
                         </ul>
                     </td>
                 </tr>
@@ -236,92 +293,300 @@
 
 
 
+        </tbody>
+    </table>
+</section>
+
+
+
+
+
+
+    <section data-compodoc="block-methods">
+    
+    <h3 id="methods">
+        Methods
+    </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="closeSidenav"></a>
+                    <span class="name">
+                            <span class="modifier">Async</span>
+                        <span ><b>closeSidenav</b></span>
+                        <a href="#closeSidenav"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                        <span class="modifier-icon icon ion-ios-reset"></span>
+                    <code>closeSidenav()</code>
+                </td>
+            </tr>
+
+
+                    <tr>
+                        <td class="col-md-4">
+                            <div class="io-line">Defined in <a href="" data-line="83"
+                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:83</a></div>
+                        </td>
+                    </tr>
+
+
+            <tr>
+                <td class="col-md-4">
+
+                        <div class="io-description">
+                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                        </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="openSidenav"></a>
+                    <span class="name">
+                            <span class="modifier">Async</span>
+                        <span ><b>openSidenav</b></span>
+                        <a href="#openSidenav"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                        <span class="modifier-icon icon ion-ios-reset"></span>
+                    <code>openSidenav()</code>
+                </td>
+            </tr>
+
+
+                    <tr>
+                        <td class="col-md-4">
+                            <div class="io-line">Defined in <a href="" data-line="78"
+                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:78</a></div>
+                        </td>
+                    </tr>
+
+
+            <tr>
+                <td class="col-md-4">
+
+                        <div class="io-description">
+                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
+
+                        </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="togglePinned"></a>
+                    <span class="name">
+                        <span ><b>togglePinned</b></span>
+                        <a href="#togglePinned"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+<code>togglePinned()</code>
+                </td>
+            </tr>
+
+
+                    <tr>
+                        <td class="col-md-4">
+                            <div class="io-line">Defined in <a href="" data-line="74"
+                                    class="link-to-prism">src/lib/sidenav/sidenav.component.ts:74</a></div>
+                        </td>
+                    </tr>
+
+
+            <tr>
+                <td class="col-md-4">
+
+                        <div class="io-description">
+                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
 
+                        </div>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
+    <section data-compodoc="block-properties">
+    
+    <h3 id="inputs">
+        Properties
+    </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="collapsable"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>collapsable</b></span>
+                        <a href="#collapsable"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Signal&lt;boolean&gt;</code>
 
-    <section data-compodoc="block-constructor">
-    <h3 id="constructor">Constructor</h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
+                    </td>
+                </tr>
                 <tr>
                     <td class="col-md-4">
-<code>constructor(sidenav: <a href="../injectables/SidenavComponentService.html" target="_self">SidenavComponentService</a>)</code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.collapsable())</code>
                     </td>
                 </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="47" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:47</a></div>
-                            </td>
-                        </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:69</a></div>
+                        </td>
+                    </tr>
+
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="collapsed"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>collapsed</b></span>
+                        <a href="#collapsed"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
                 <tr>
                     <td class="col-md-4">
-                            <div>
-                                    <b>Parameters :</b>
-                                    <table class="params">
-                                        <thead>
-                                            <tr>
-                                                <td>Name</td>
-                                                    <td>Type</td>
-                                                <td>Optional</td>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                                <tr>
-                                                        <td>sidenav</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="../injectables/SidenavComponentService.html" target="_self" >SidenavComponentService</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
+                        <i>Type : </i>    <code>Signal&lt;boolean&gt;</code>
+
                     </td>
                 </tr>
-            </tbody>
-        </table>
-</section>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.collapsed())</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="68" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:68</a></div>
+                        </td>
+                    </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="fixedBottomGap"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>fixedBottomGap</b></span>
+                        <a href="#fixedBottomGap"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Signal&lt;number&gt;</code>
 
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.fixedBottomGap())</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="64" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:64</a></div>
+                        </td>
+                    </tr>
 
 
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="fixedInViewport"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>fixedInViewport</b></span>
+                        <a href="#fixedInViewport"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Signal&lt;boolean&gt;</code>
 
-    <section data-compodoc="block-properties">
-    
-    <h3 id="inputs">
-        Properties
-    </h3>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.fixedInViewport())</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="66" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:66</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="sidenav"></a>
+                    <a name="fixedTopGap"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>sidenav</b></span>
-                        <a href="#sidenav"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>fixedTopGap</b></span>
+                        <a href="#fixedTopGap"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../injectables/SidenavComponentService.html" target="_self" >SidenavComponentService</a></code>
+                        <i>Type : </i>    <code>Signal&lt;number&gt;</code>
 
                     </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.fixedTopGap())</code>
+                    </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="49" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:49</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="65" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:65</a></div>
                         </td>
                     </tr>
 
@@ -332,34 +597,89 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="sidenavFooterDirective"></a>
+                    <a name="opened"></a>
                     <span class="name">
-                            <span class="modifier"></span>
                             <span class="modifier">Public</span>
-                            <span class="modifier">Optional</span>
-                        <span ><b>sidenavFooterDirective</b></span>
-                        <a href="#sidenavFooterDirective"><span class="icon ion-ios-link"></span></a>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>opened</b></span>
+                        <a href="#opened"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Signal&lt;boolean&gt;</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.opened())</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="70" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:70</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="pinned"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>pinned</b></span>
+                        <a href="#pinned"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../directives/SidenavFooterDirective.html" target="_self" >SidenavFooterDirective</a></code>
+                        <i>Type : </i>    <code>Signal&lt;boolean&gt;</code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @ContentChild(SidenavFooterDirective)<br />
-                        </code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.pinned())</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:67</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="sidenavFooterDirective"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>sidenavFooterDirective</b></span>
+                        <a href="#sidenavFooterDirective"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>contentChild(SidenavFooterDirective)</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:44</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:71</a></div>
                         </td>
                     </tr>
 
@@ -372,9 +692,8 @@
                 <td class="col-md-4">
                     <a name="sidenavHeaderDirective"></a>
                     <span class="name">
-                            <span class="modifier"></span>
                             <span class="modifier">Public</span>
-                            <span class="modifier">Optional</span>
+                            <span class="modifier">Readonly</span>
                         <span ><b>sidenavHeaderDirective</b></span>
                         <a href="#sidenavHeaderDirective"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -382,22 +701,45 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../directives/SidenavHeaderDirective.html" target="_self" >SidenavHeaderDirective</a></code>
+                        <i>Default value : </i><code>contentChild(SidenavHeaderDirective)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="72" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:72</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="sidenavMode"></a>
+                    <span class="name">
+                            <span class="modifier">Public</span>
+                            <span class="modifier">Readonly</span>
+                        <span ><b>sidenavMode</b></span>
+                        <a href="#sidenavMode"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Signal&lt;MatDrawerMode&gt;</code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @ContentChild(SidenavHeaderDirective)<br />
-                        </code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.layoutService.mode())</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="47" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:47</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/lib/sidenav/sidenav.component.ts:63</a></div>
                         </td>
                     </tr>
 
@@ -411,54 +753,90 @@
 
     <div class="tab-pane fade  tab-source-code" id="source">
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
+  NgClass,
+  NgIf,
+  NgStyle,
+  NgTemplateOutlet,
+} from &#x27;@angular/common&#x27;;
+import {
   ChangeDetectionStrategy,
   Component,
-  ContentChild,
+  computed,
+  contentChild,
+  inject,
+  Signal,
+  viewChild,
 } from &#x27;@angular/core&#x27;;
+import {
+  MatButton,
+  MatIconButton,
+} from &#x27;@angular/material/button&#x27;;
+import { MatDivider } from &#x27;@angular/material/divider&#x27;;
+import { MatIcon } from &#x27;@angular/material/icon&#x27;;
+import {
+  MatDrawerMode,
+  MatSidenav,
+  MatSidenavContainer,
+  MatSidenavContent,
+} from &#x27;@angular/material/sidenav&#x27;;
+import { RouterOutlet } from &#x27;@angular/router&#x27;;
+import { LayoutService } from &#x27;../layout.service&#x27;;
+import { NavigationComponent } from &#x27;../navigation/navigation.component&#x27;;
 import { SidenavFooterDirective } from &#x27;./sidenav-footer.directive&#x27;;
 import { SidenavHeaderDirective } from &#x27;./sidenav-header.directive&#x27;;
-import { SidenavComponentService } from &#x27;./sidenav.component.service&#x27;;
-import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
-import { MatButtonModule } from &#x27;@angular/material/button&#x27;;
-import { NavigationComponent } from &#x27;../navigation/navigation.component&#x27;;
-import { MatDividerModule } from &#x27;@angular/material/divider&#x27;;
-import {
-  AsyncPipe,
-  NgClass,
-  NgIf,
-  NgTemplateOutlet,
-} from &#x27;@angular/common&#x27;;
 
 @Component({
   selector: &#x27;rxap-sidenav&#x27;,
   templateUrl: &#x27;./sidenav.component.html&#x27;,
   styleUrls: [ &#x27;./sidenav.component.scss&#x27; ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    class: &#x27;rxap-layout-sidenav&#x27;,
-  },
   standalone: true,
   imports: [
-    NgClass,
+    MatIcon,
+    MatIconButton,
+    MatSidenav,
+    MatSidenavContainer,
+    MatSidenavContent,
+    NavigationComponent,
     NgIf,
+    RouterOutlet,
+    NgClass,
+    NgStyle,
+    MatDivider,
     NgTemplateOutlet,
-    MatDividerModule,
-    NavigationComponent,
-    MatButtonModule,
-    MatIconModule,
-    AsyncPipe,
+    MatButton,
   ],
 })
 export class SidenavComponent {
 
-  @ContentChild(SidenavFooterDirective)
-  public sidenavFooterDirective?: SidenavFooterDirective;
+  private readonly layoutService &#x3D; inject(LayoutService);
+
+
+  private readonly sidenav &#x3D; viewChild(MatSidenav);
 
-  @ContentChild(SidenavHeaderDirective)
-  public sidenavHeaderDirective?: SidenavHeaderDirective;
+  public readonly sidenavMode: Signal&lt;MatDrawerMode&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.mode());
+  public readonly fixedBottomGap: Signal&lt;number&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.fixedBottomGap());
+  public readonly fixedTopGap: Signal&lt;number&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.fixedTopGap());
+  public readonly fixedInViewport: Signal&lt;boolean&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.fixedInViewport());
+  public readonly pinned: Signal&lt;boolean&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.pinned());
+  public readonly collapsed: Signal&lt;boolean&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.collapsed());
+  public readonly collapsable: Signal&lt;boolean&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.collapsable());
+  public readonly opened: Signal&lt;boolean&gt; &#x3D; computed(() &#x3D;&gt; this.layoutService.opened());
+  public readonly sidenavFooterDirective &#x3D; contentChild(SidenavFooterDirective);
+  public readonly sidenavHeaderDirective &#x3D; contentChild(SidenavHeaderDirective);
 
-  constructor(public readonly sidenav: SidenavComponentService) {
+  togglePinned() {
+    this.layoutService.togglePinned();
+  }
+
+  async openSidenav() {
+    await this.sidenav()?.open();
+    this.layoutService.openSidenav();
+  }
+
+  async closeSidenav() {
+    await this.sidenav()?.close();
+    this.layoutService.closeSidenav();
   }
 
 }
@@ -466,34 +844,59 @@ export class SidenavComponent {
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;div [ngClass]&#x3D;&quot;{ &#x27;collapsed&#x27;: sidenav.collapsed$ | async }&quot; class&#x3D;&quot;rxap-container&quot;&gt;
-  &lt;div class&#x3D;&quot;inner flex flex-col justify-between items-stretch&quot;&gt;
-    &lt;ng-template [ngIf]&#x3D;&quot;sidenavHeaderDirective?.template&quot;&gt;
-      &lt;div [ngClass]&#x3D;&quot;{ hidden: sidenav.collapsed$ | async }&quot; class&#x3D;&quot;header grow-0&quot;&gt;
-        &lt;ng-container *ngTemplateOutlet&#x3D;&quot;sidenavHeaderDirective?.template ?? null&quot;&gt;&lt;/ng-container&gt;
+        <pre class="line-numbers"><code class="language-html">&lt;mat-sidenav-container [ngStyle]&#x3D;&quot;{
+    &#x27;padding-top.px&#x27;: fixedTopGap(),
+    &#x27;padding-bottom.px&#x27;: fixedBottomGap(),
+  }&quot; class&#x3D;&quot;h-full&quot;&gt;
+  &lt;mat-sidenav
+    [fixedBottomGap]&#x3D;&quot;fixedBottomGap()&quot;
+    [fixedInViewport]&#x3D;&quot;fixedInViewport()&quot;
+    [fixedTopGap]&#x3D;&quot;fixedTopGap()&quot;
+    [mode]&#x3D;&quot;sidenavMode()&quot;
+    [ngClass]&#x3D;&quot;{ collapsable: collapsable() }&quot;
+    [opened]&#x3D;&quot;opened()&quot;
+  &gt;
+    &lt;div (mouseleave)&#x3D;&quot;collapsable() &amp;&amp; !pinned() &amp;&amp; closeSidenav()&quot;
+         class&#x3D;&quot;h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch&quot;&gt;
+
+      &lt;div (click)&#x3D;&quot;togglePinned()&quot; *ngIf&#x3D;&quot;collapsable()&quot;
+           class&#x3D;&quot;pl-2 self-stretch grow-0 flex flex-row justify-between items-center&quot;&gt;
+        &lt;span class&#x3D;&quot;text-lg&quot; i18n&gt;Navigation&lt;/span&gt;
+        &lt;div class&#x3D;&quot;flex flex-row items-center justify-center&quot; style&#x3D;&quot;width: 64px&quot;&gt;
+          &lt;button mat-icon-button&gt;
+            &lt;mat-icon *ngIf&#x3D;&quot;!pinned()&quot;&gt;radio_button_unchecked&lt;/mat-icon&gt;
+            &lt;mat-icon *ngIf&#x3D;&quot;pinned()&quot;&gt;radio_button_checked&lt;/mat-icon&gt;
+          &lt;/button&gt;
+        &lt;/div&gt;
       &lt;/div&gt;
-      &lt;mat-divider [ngClass]&#x3D;&quot;{ hidden: sidenav.collapsed$ | async }&quot; class&#x3D;&quot;grow-0&quot;&gt;&lt;/mat-divider&gt;
-    &lt;/ng-template&gt;
-    &lt;div class&#x3D;&quot;nav-container grow&quot;&gt;
-      &lt;ul class&#x3D;&quot;flex flex-col&quot; root rxap-navigation&gt;&lt;/ul&gt;
+
+      @if (sidenavHeaderDirective()?.template; as template) {
+        &lt;div [ngClass]&#x3D;&quot;{ hidden: collapsed() }&quot; class&#x3D;&quot;header grow-0&quot;&gt;
+          &lt;ng-container *ngTemplateOutlet&#x3D;&quot;template&quot;&gt;&lt;/ng-container&gt;
+        &lt;/div&gt;
+        &lt;mat-divider [ngClass]&#x3D;&quot;{ hidden: collapsed() }&quot; class&#x3D;&quot;grow-0&quot;&gt;&lt;/mat-divider&gt;
+      }
+
+      &lt;ul
+        (mouseenter)&#x3D;&quot;collapsable() &amp;&amp; !pinned() &amp;&amp; openSidenav()&quot;
+        class&#x3D;&quot;grow self-stretch&quot;
+        [root]&#x3D;&quot;true&quot;
+        rxap-navigation
+      &gt;
+      &lt;/ul&gt;
+
+      @if (sidenavFooterDirective()?.template; as template) {
+        &lt;mat-divider [ngClass]&#x3D;&quot;{ hidden: collapsed() }&quot; class&#x3D;&quot;grow-0&quot;&gt;&lt;/mat-divider&gt;
+        &lt;div [ngClass]&#x3D;&quot;{ hidden: collapsed() }&quot; class&#x3D;&quot;footer grow-0&quot;&gt;
+          &lt;ng-container *ngTemplateOutlet&#x3D;&quot;template&quot;&gt;&lt;/ng-container&gt;
+        &lt;/div&gt;
+      }
     &lt;/div&gt;
-    &lt;mat-divider class&#x3D;&quot;grow-0&quot;&gt;&lt;/mat-divider&gt;
-    &lt;button (click)&#x3D;&quot;sidenav.toggleNavigationCollapse()&quot; [ngClass]&#x3D;&quot;{ &#x27;collapsed&#x27;: sidenav.collapsed$ | async }&quot;
-            class&#x3D;&quot;sidebar-toggle grow-0&quot;
-            mat-button&gt;
-      &lt;span class&#x3D;&quot;sidebar-toggle-inner flex flex-row items-center gap-4&quot;&gt;
-        &lt;mat-icon class&#x3D;&quot;arrow grow-0&quot;&gt;double_arrow&lt;/mat-icon&gt;
-        &lt;span [ngClass]&#x3D;&quot;{ hidden: sidenav.collapsed$ | async }&quot; class&#x3D;&quot;label grow-0&quot; i18n&gt;Collapse sidebar&lt;/span&gt;
-      &lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ng-template [ngIf]&#x3D;&quot;sidenavFooterDirective?.template ?? null&quot;&gt;
-      &lt;mat-divider [ngClass]&#x3D;&quot;{ hidden: sidenav.collapsed$ | async }&quot; class&#x3D;&quot;grow-0&quot;&gt;&lt;/mat-divider&gt;
-      &lt;div [ngClass]&#x3D;&quot;{ hidden: sidenav.collapsed$ | async }&quot; class&#x3D;&quot;footer grow-0&quot;&gt;
-        &lt;ng-container *ngTemplateOutlet&#x3D;&quot;sidenavFooterDirective?.template ?? null&quot;&gt;&lt;/ng-container&gt;
-      &lt;/div&gt;
-    &lt;/ng-template&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
+  &lt;/mat-sidenav&gt;
+  &lt;mat-sidenav-content [ngClass]&#x3D;&quot;{ &#x27;ml-16&#x27;: collapsable() }&quot; class&#x3D;&quot;p-4&quot;&gt;
+    &lt;ng-content&gt;&lt;/ng-content&gt;
+  &lt;/mat-sidenav-content&gt;
+&lt;/mat-sidenav-container&gt;
 </code></pre>
     </div>
 
@@ -501,7 +904,28 @@ export class SidenavComponent {
                 <p class="comment">
                     <code>./sidenav.component.scss</code>
                 </p>
-                <pre class="line-numbers"><code class="language-scss">.rxap-container {
+                <pre class="line-numbers"><code class="language-scss">:host {
+  .collapsable {
+
+    &amp;:not(.mat-drawer-opened) {
+      transform: translateX(calc(-100% + 64px)) !important;
+      visibility: visible !important;
+      box-shadow: inherit !important;
+      transition-property: transform;
+      transition-delay: 250ms;
+      display: flex;
+      border-right: solid 1px rgba(0, 0, 0, .12);
+    }
+
+    ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera*/
+    }
+
+  }
+}
+
+
+.rxap-container {
   height: 100%;
 
   .inner {
@@ -592,9 +1016,9 @@ export class SidenavComponent {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div [ngClass]="{ \'collapsed\': sidenav.collapsed$ | async }" class="rxap-container">  <div class="inner flex flex-col justify-between items-stretch">    <ng-template [ngIf]="sidenavHeaderDirective?.template">      <div [ngClass]="{ hidden: sidenav.collapsed$ | async }" class="header grow-0">        <ng-container *ngTemplateOutlet="sidenavHeaderDirective?.template ?? null"></ng-container>      </div>      <mat-divider [ngClass]="{ hidden: sidenav.collapsed$ | async }" class="grow-0"></mat-divider>    </ng-template>    <div class="nav-container grow">      <ul class="flex flex-col" root rxap-navigation></ul>    </div>    <mat-divider class="grow-0"></mat-divider>    <button (click)="sidenav.toggleNavigationCollapse()" [ngClass]="{ \'collapsed\': sidenav.collapsed$ | async }"            class="sidebar-toggle grow-0"            mat-button>      <span class="sidebar-toggle-inner flex flex-row items-center gap-4">        <mat-icon class="arrow grow-0">double_arrow</mat-icon>        <span [ngClass]="{ hidden: sidenav.collapsed$ | async }" class="label grow-0" i18n>Collapse sidebar</span>      </span>    </button>    <ng-template [ngIf]="sidenavFooterDirective?.template ?? null">      <mat-divider [ngClass]="{ hidden: sidenav.collapsed$ | async }" class="grow-0"></mat-divider>      <div [ngClass]="{ hidden: sidenav.collapsed$ | async }" class="footer grow-0">        <ng-container *ngTemplateOutlet="sidenavFooterDirective?.template ?? null"></ng-container>      </div>    </ng-template>  </div></div></div>'
-    var COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LanguageSelectorComponent', 'selector': 'rxap-language-selector'},{'name': 'LayoutComponent', 'selector': 'rxap-layout'},{'name': 'NavigationComponent', 'selector': 'ul[rxap-navigation]'},{'name': 'NavigationItemComponent', 'selector': 'li[rxap-navigation-item]'},{'name': 'NavigationProgressBarComponent', 'selector': 'rxap-navigation-progress-bar'},{'name': 'ResetButtonComponent', 'selector': 'rxap-reset-button'},{'name': 'SettingsButtonComponent', 'selector': 'rxap-settings-button'},{'name': 'SidenavComponent', 'selector': 'rxap-sidenav'},{'name': 'SidenavToggleButtonComponent', 'selector': 'rxap-sidenav-toggle-button'},{'name': 'SignOutComponent', 'selector': 'rxap-sign-out'},{'name': 'ToggleWindowSidenavButtonComponent', 'selector': 'rxap-toggle-window-sidenav-button'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'},{'name': 'VersionComponent', 'selector': 'rxap-version'},{'name': 'WindowContainerSidenavComponent', 'selector': 'rxap-window-container-sidenav'}];
-    var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
+        var COMPONENT_TEMPLATE = '<div><mat-sidenav-container [ngStyle]="{    \'padding-top.px\': fixedTopGap(),    \'padding-bottom.px\': fixedBottomGap(),  }" class="h-full">  <mat-sidenav    [fixedBottomGap]="fixedBottomGap()"    [fixedInViewport]="fixedInViewport()"    [fixedTopGap]="fixedTopGap()"    [mode]="sidenavMode()"    [ngClass]="{ collapsable: collapsable() }"    [opened]="opened()"  >    <div (mouseleave)="collapsable() && !pinned() && closeSidenav()"         class="h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch">      <div (click)="togglePinned()" *ngIf="collapsable()"           class="pl-2 self-stretch grow-0 flex flex-row justify-between items-center">        <span class="text-lg" i18n>Navigation</span>        <div class="flex flex-row items-center justify-center" style="width: 64px">          <button mat-icon-button>            <mat-icon *ngIf="!pinned()">radio_button_unchecked</mat-icon>            <mat-icon *ngIf="pinned()">radio_button_checked</mat-icon>          </button>        </div>      </div>      @if (sidenavHeaderDirective()?.template; as template) {        <div [ngClass]="{ hidden: collapsed() }" class="header grow-0">          <ng-container *ngTemplateOutlet="template"></ng-container>        </div>        <mat-divider [ngClass]="{ hidden: collapsed() }" class="grow-0"></mat-divider>      }      <ul        (mouseenter)="collapsable() && !pinned() && openSidenav()"        class="grow self-stretch"        [root]="true"        rxap-navigation      >      </ul>      @if (sidenavFooterDirective()?.template; as template) {        <mat-divider [ngClass]="{ hidden: collapsed() }" class="grow-0"></mat-divider>        <div [ngClass]="{ hidden: collapsed() }" class="footer grow-0">          <ng-container *ngTemplateOutlet="template"></ng-container>        </div>      }    </div>  </mat-sidenav>  <mat-sidenav-content [ngClass]="{ \'ml-16\': collapsable() }" class="p-4">    <ng-content></ng-content>  </mat-sidenav-content></mat-sidenav-container></div>'
+    var COMPONENTS = [{'name': 'AppsButtonComponent', 'selector': 'rxap-apps-button'},{'name': 'BaseLayoutComponent', 'selector': 'rxap-base-layout'},{'name': 'DefaultHeaderComponent', 'selector': 'rxap-default-header'},{'name': 'FooterComponent', 'selector': 'rxap-footer'},{'name': 'HeaderComponent', 'selector': 'rxap-header'},{'name': 'LayoutComponent', 'selector': 'rxap-layout'},{'name': 'MinimalLayoutComponent', 'selector': 'rxap-minimal-layout'},{'name': 'NavigationComponent', 'selector': 'ul[rxap-navigation]'},{'name': 'NavigationItemComponent', 'selector': 'li[rxap-navigation-item]'},{'name': 'NavigationProgressBarComponent', 'selector': 'rxap-navigation-progress-bar'},{'name': 'ReleaseInfoComponent', 'selector': 'rxap-release-info'},{'name': 'SettingsButtonComponent', 'selector': 'rxap-settings-button'},{'name': 'SidenavComponent', 'selector': 'rxap-sidenav'},{'name': 'SidenavToggleButtonComponent', 'selector': 'rxap-sidenav-toggle-button'},{'name': 'UserProfileIconComponent', 'selector': 'rxap-user-profile-icon'}];
+    var DIRECTIVES = [{'name': 'FooterDirective', 'selector': '[rxapFooter]'},{'name': 'HeaderDirective', 'selector': '[rxapHeader]'},{'name': 'SidenavFooterDirective', 'selector': '[rxapSidenavFooter]'},{'name': 'SidenavHeaderDirective', 'selector': '[rxapSidenavHeader]'}];
     var ACTUAL_COMPONENT = {'name': 'SidenavComponent'};
 </script>
 <script src="../js/tree.js"></script>