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

package/compodoc/components/LayoutComponent.html

@@ -180,9 +180,12 @@
                             <code>NgOptimizedImage</code>
                                 <code><a href="../components/NavigationComponent.html" target="_self" >NavigationComponent</a></code>
                             <code>RouterOutlet</code>
-                            <code>StatusIndicatorComponent</code>
                             <code>NgStyle</code>
                             <code>NgClass</code>
+                                <code><a href="../components/SidenavComponent.html" target="_self" >SidenavComponent</a></code>
+                                <code><a href="../components/ReleaseInfoComponent.html" target="_self" >ReleaseInfoComponent</a></code>
+                                <code><a href="../directives/SidenavFooterDirective.html" target="_self" >SidenavFooterDirective</a></code>
+                                <code><a href="../components/NavigationProgressBarComponent.html" target="_self" >NavigationProgressBarComponent</a></code>
                 </td>
             </tr>
 
@@ -224,22 +227,7 @@
                             <li>
                                     <span class="modifier">Public</span>
                                     <span class="modifier">Readonly</span>
-                                <a href="#collapsable" >collapsable</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="#fixedTopGap" >fixedTopGap</a>
-                            </li>
-                            <li>
-                                    <span class="modifier">Public</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#layoutComponentService" >layoutComponentService</a>
+                                <a href="#logoHeight" >logoHeight</a>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
@@ -251,31 +239,6 @@
                                     <span class="modifier">Readonly</span>
                                 <a href="#logoWidth" >logoWidth</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">Public</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#release" >release</a>
-                            </li>
-                            <li>
-                                    <span class="modifier"></span>
-                                    <span class="modifier">Public</span>
-                                <a href="#sidenav" >sidenav</a>
-                            </li>
-                            <li>
-                                    <span class="modifier">Public</span>
-                                    <span class="modifier">Readonly</span>
-                                <a href="#sidenavMode" >sidenavMode</a>
-                            </li>
                         </ul>
                     </td>
                 </tr>
@@ -289,78 +252,6 @@
     </table>
 </section>
 
-    <section data-compodoc="block-constructor">
-    <h3 id="constructor">Constructor</h3>
-        <table class="table table-sm table-bordered">
-            <tbody>
-                <tr>
-                    <td class="col-md-4">
-<code>constructor(layoutComponentService: <a href="../injectables/LayoutComponentService.html" target="_self">LayoutComponentService</a>, environment: Environment, iconLoaderService: IconLoaderService)</code>
-                    </td>
-                </tr>
-                        <tr>
-                            <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/lib/layout/layout.component.ts:88</a></div>
-                            </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>layoutComponentService</td>
-                                                  
-                                                        <td>
-                                                                        <code><a href="../injectables/LayoutComponentService.html" target="_self" >LayoutComponentService</a></code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>environment</td>
-                                                  
-                                                        <td>
-                                                                    <code>Environment</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                                <tr>
-                                                        <td>iconLoaderService</td>
-                                                  
-                                                        <td>
-                                                                    <code>IconLoaderService</code>
-                                                        </td>
-                                                  
-                                                    <td>
-                                                            No
-                                                    </td>
-                                                    
-                                                </tr>
-                                        </tbody>
-                                    </table>
-                            </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-</section>
 
 
 
@@ -376,68 +267,12 @@
         <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>
-
-                    </td>
-                </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="79" class="link-to-prism">src/lib/layout/layout.component.ts:79</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">
-                                <div class="io-line">Defined in <a href="" data-line="76" class="link-to-prism">src/lib/layout/layout.component.ts:76</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="fixedTopGap"></a>
+                    <a name="logoHeight"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>fixedTopGap</b></span>
-                        <a href="#fixedTopGap"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>logoHeight</b></span>
+                        <a href="#logoHeight"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
@@ -447,37 +282,14 @@
 
                     </td>
                 </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="77" class="link-to-prism">src/lib/layout/layout.component.ts:77</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="layoutComponentService"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                            <span class="modifier">Readonly</span>
-                        <span ><b>layoutComponentService</b></span>
-                        <a href="#layoutComponentService"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../injectables/LayoutComponentService.html" target="_self" >LayoutComponentService</a></code>
-
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.logoService.height())</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="91" class="link-to-prism">src/lib/layout/layout.component.ts:91</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/lib/layout/layout.component.ts:75</a></div>
                         </td>
                     </tr>
 
@@ -499,69 +311,18 @@
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                        <i>Type : </i>    <code>Signal&lt;string&gt;</code>
 
                     </td>
                 </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="80" class="link-to-prism">src/lib/layout/layout.component.ts:80</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="logoWidth"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                            <span class="modifier">Readonly</span>
-                        <span ><b>logoWidth</b></span>
-                        <a href="#logoWidth"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
-
-                    </td>
-                </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="81" class="link-to-prism">src/lib/layout/layout.component.ts:81</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="opened"></a>
-                    <span class="name">
-                            <span class="modifier">Public</span>
-                            <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>
-
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.logoService.src())</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/layout/layout.component.ts:83</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="73" class="link-to-prism">src/lib/layout/layout.component.ts:73</a></div>
                         </td>
                     </tr>
 
@@ -572,117 +333,29 @@
         <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>Signal&lt;boolean&gt;</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/layout/layout.component.ts:78</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="release"></a>
+                    <a name="logoWidth"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
                             <span class="modifier">Readonly</span>
-                        <span ><b>release</b></span>
-                        <a href="#release"><span class="icon ion-ios-link"></span></a>
-                    </span>
-                </td>
-            </tr>
-                <tr>
-                    <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
-
-                    </td>
-                </tr>
-                    <tr>
-                        <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="82" class="link-to-prism">src/lib/layout/layout.component.ts:82</a></div>
-                        </td>
-                    </tr>
-
-
-        </tbody>
-    </table>
-    <table class="table table-sm table-bordered">
-        <tbody>
-            <tr>
-                <td class="col-md-4">
-                    <a name="sidenav"></a>
-                    <span class="name">
-                            <span class="modifier"></span>
-                            <span class="modifier">Public</span>
-                        <span ><b>sidenav</b></span>
-                        <a href="#sidenav"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>logoWidth</b></span>
+                        <a href="#logoWidth"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>MatSidenav</code>
+                        <i>Type : </i>    <code>Signal&lt;number&gt;</code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <b>Decorators : </b>
-                        <br />
-                        <code>
-                            @ViewChild(MatSidenav, {static: true})<br />
-                        </code>
+                        <i>Default value : </i><code>computed(() &#x3D;&gt; this.logoService.width())</code>
                     </td>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="85" class="link-to-prism">src/lib/layout/layout.component.ts:85</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">
-                                <div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/lib/layout/layout.component.ts:75</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="74" class="link-to-prism">src/lib/layout/layout.component.ts:74</a></div>
                         </td>
                     </tr>
 
@@ -705,32 +378,20 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   inject,
-  Inject,
   OnDestroy,
   OnInit,
   Signal,
-  ViewChild,
 } from &#x27;@angular/core&#x27;;
 import { MatButtonModule } from &#x27;@angular/material/button&#x27;;
 import { MatIconModule } from &#x27;@angular/material/icon&#x27;;
 import { MatMenuModule } from &#x27;@angular/material/menu&#x27;;
-import {
-  MatDrawerMode,
-  MatSidenav,
-  MatSidenavModule,
-} from &#x27;@angular/material/sidenav&#x27;;
+import { MatSidenavModule } from &#x27;@angular/material/sidenav&#x27;;
 import {
   RouterLink,
   RouterOutlet,
 } from &#x27;@angular/router&#x27;;
-import {
-  DetermineReleaseName,
-  Environment,
-  RXAP_ENVIRONMENT,
-} from &#x27;@rxap/environment&#x27;;
-import { IconLoaderService } from &#x27;@rxap/icon&#x27;;
-import { StatusIndicatorComponent } from &#x27;@rxap/ngx-status-check&#x27;;
 import { ThemeService } from &#x27;@rxap/ngx-theme&#x27;;
 import {
   IsThemeDensity,
@@ -739,8 +400,12 @@ import {
 } from &#x27;@rxap/ngx-user&#x27;;
 import { FooterComponent } from &#x27;../footer/footer.component&#x27;;
 import { HeaderComponent } from &#x27;../header/header.component&#x27;;
+import { NavigationProgressBarComponent } from &#x27;../navigation-progress-bar/navigation-progress-bar.component&#x27;;
+import { LogoService } from &#x27;../logo.service&#x27;;
 import { NavigationComponent } from &#x27;../navigation/navigation.component&#x27;;
-import { LayoutComponentService } from &#x27;./layout.component.service&#x27;;
+import { ReleaseInfoComponent } from &#x27;../release-info/release-info.component&#x27;;
+import { SidenavFooterDirective } from &#x27;../sidenav/sidenav-footer.directive&#x27;;
+import { SidenavComponent } from &#x27;../sidenav/sidenav.component&#x27;;
 
 
 @Component({
@@ -762,62 +427,41 @@ import { LayoutComponentService } from &#x27;./layout.component.service&#x27;;
     NgOptimizedImage,
     NavigationComponent,
     RouterOutlet,
-    StatusIndicatorComponent,
     NgStyle,
     NgClass,
+    SidenavComponent,
+    ReleaseInfoComponent,
+    SidenavFooterDirective,
+    NavigationProgressBarComponent,
   ],
 })
 export class LayoutComponent implements OnInit, OnDestroy {
 
-  public readonly sidenavMode: Signal&lt;MatDrawerMode&gt;;
-  public readonly fixedBottomGap: Signal&lt;number&gt;;
-  public readonly fixedTopGap: Signal&lt;number&gt;;
-  public readonly pinned: Signal&lt;boolean&gt;;
-  public readonly collapsable: Signal&lt;boolean&gt;;
-  public readonly logoSrc: string;
-  public readonly logoWidth: number;
-  public readonly release: string;
-  public readonly opened: Signal&lt;boolean&gt;;
-
-  @ViewChild(MatSidenav, { static: true }) public sidenav!: MatSidenav;
-
   private readonly userSettingsThemeService &#x3D; inject(UserSettingsThemeService);
   private readonly themeService &#x3D; inject(ThemeService);
+  private readonly logoService &#x3D; inject(LogoService);
+  public readonly logoSrc: Signal&lt;string&gt; &#x3D; computed(() &#x3D;&gt; this.logoService.src());
+  public readonly logoWidth: Signal&lt;number&gt; &#x3D; computed(() &#x3D;&gt; this.logoService.width());
+  public readonly logoHeight: Signal&lt;number&gt; &#x3D; computed(() &#x3D;&gt; this.logoService.height());
 
-  constructor(
-    public readonly layoutComponentService: LayoutComponentService,
-    @Inject(RXAP_ENVIRONMENT)
-    private readonly environment: Environment,
-    iconLoaderService: IconLoaderService,
-  ) {
-    iconLoaderService.load();
-    this.fixedBottomGap &#x3D; layoutComponentService.fixedBottomGap;
-    this.fixedTopGap &#x3D; layoutComponentService.fixedTopGap;
-    this.pinned &#x3D; layoutComponentService.pinned;
-    this.collapsable &#x3D; layoutComponentService.collapsable;
-    this.opened &#x3D; layoutComponentService.opened;
-    this.sidenavMode &#x3D; layoutComponentService.mode;
-    this.logoSrc &#x3D; this.layoutComponentService.logo.src ?? &#x27;https://via.placeholder.com/256x128px&#x27;;
-    this.logoWidth &#x3D; this.layoutComponentService.logo.width ?? 256;
-    this.release &#x3D; DetermineReleaseName(this.environment);
-  }
 
   ngOnDestroy() {
     this.userSettingsThemeService.stopSync();
   }
 
   ngOnInit() {
-    this.userSettingsThemeService.startSync();
-    this.userSettingsThemeService.get().then(theme &#x3D;&gt; {
-      if (theme.preset &amp;&amp; theme.preset !&#x3D;&#x3D; &#x27;default&#x27;) {
-        this.themeService.setTheme(theme.preset, true);
-      }
-      if (theme.density &amp;&amp; IsThemeDensity(theme.density) &amp;&amp; theme.density !&#x3D;&#x3D; ThemeDensity.Normal) {
-        this.themeService.setDensity(theme.density, true);
-      }
-      if (theme.typography &amp;&amp; theme.typography !&#x3D;&#x3D; &#x27;default&#x27;) {
-        this.themeService.setTypography(theme.typography, true);
-      }
+    this.userSettingsThemeService.startSync().then(() &#x3D;&gt; {
+      this.userSettingsThemeService.get().then(theme &#x3D;&gt; {
+        if (theme.preset &amp;&amp; theme.preset !&#x3D;&#x3D; &#x27;default&#x27;) {
+          this.themeService.setTheme(theme.preset, true);
+        }
+        if (theme.density &amp;&amp; IsThemeDensity(theme.density) &amp;&amp; theme.density !&#x3D;&#x3D; ThemeDensity.Normal) {
+          this.themeService.setDensity(theme.density, true);
+        }
+        if (theme.typography &amp;&amp; theme.typography !&#x3D;&#x3D; &#x27;default&#x27;) {
+          this.themeService.setTypography(theme.typography, true);
+        }
+      });
     });
   }
 
@@ -826,64 +470,25 @@ export class LayoutComponent implements OnInit, OnDestroy {
     </div>
 
     <div class="tab-pane fade " id="templateData">
-        <pre class="line-numbers"><code class="language-html">&lt;rxap-status-indicator class&#x3D;&quot;fixed bottom-0 right-0 z-10&quot;&gt;&lt;/rxap-status-indicator&gt;
-&lt;div class&#x3D;&quot;flex flex-col h-screen justify-between&quot;&gt;
-  &lt;rxap-header class&#x3D;&quot;z-10 w-full fixed top-0&quot;&gt;&lt;/rxap-header&gt;
-  &lt;mat-sidenav-container [ngStyle]&#x3D;&quot;{
-    &#x27;margin-top.px&#x27;: fixedTopGap(),
-    &#x27;margin-bottom.px&#x27;: fixedBottomGap(),
-  }&quot; class&#x3D;&quot;grow&quot;&gt;
-    &lt;mat-sidenav
-      #matSidenav&#x3D;&quot;matSidenav&quot;
-      [fixedBottomGap]&#x3D;&quot;fixedBottomGap()&quot;
-      [fixedInViewport]&#x3D;&quot;true&quot;
-      [fixedTopGap]&#x3D;&quot;fixedTopGap()&quot;
-      [mode]&#x3D;&quot;sidenavMode()&quot;
-      [ngClass]&#x3D;&quot;{ collapsable: collapsable() }&quot;
-      class&#x3D;&quot;sidenav&quot;
-      [opened]&#x3D;&quot;opened()&quot;
-    &gt;
-      &lt;div (mouseleave)&#x3D;&quot;collapsable() &amp;&amp; !pinned() &amp;&amp; matSidenav.close()&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;layoutComponentService.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;ul
-          (mouseenter)&#x3D;&quot;collapsable() &amp;&amp; !pinned() &amp;&amp; matSidenav.open()&quot;
-          class&#x3D;&quot;grow self-stretch&quot;
-          root
-          rxap-navigation
-        &gt;
-        &lt;/ul&gt;
-
-        &lt;img
-          [src]&#x3D;&quot;logoSrc&quot;
-          [routerLink]&#x3D;&quot;[&#x27;/&#x27;]&quot;
-          [width]&#x3D;&quot;logoWidth&quot;
-          alt&#x3D;&quot;logo&quot;
-          class&#x3D;&quot;grow-0 mx-16&quot;
-        /&gt;
-        &lt;div class&#x3D;&quot;grow-0 px-16&quot;&gt;
-          &lt;span&gt;{{release}}&lt;/span&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;router-outlet&gt;&lt;/router-outlet&gt;
-    &lt;/mat-sidenav-content&gt;
-  &lt;/mat-sidenav-container&gt;
-  &lt;rxap-footer class&#x3D;&quot;z-10 w-full fixed bottom-0&quot;&gt;&lt;/rxap-footer&gt;
-&lt;/div&gt;
-&lt;!--&lt;rxap-window-task-bar-container&gt;&lt;/rxap-window-task-bar-container&gt;--&gt;
+        <pre class="line-numbers"><code class="language-html">&lt;rxap-header class&#x3D;&quot;z-10 w-full fixed top-0&quot;&gt;&lt;/rxap-header&gt;
+&lt;rxap-navigation-progress-bar&gt;&lt;/rxap-navigation-progress-bar&gt;
+&lt;rxap-sidenav&gt;
+  &lt;router-outlet&gt;&lt;/router-outlet&gt;
+  &lt;ng-template rxapSidenavFooter&gt;
+    &lt;img
+      [src]&#x3D;&quot;logoSrc()&quot;
+      [routerLink]&#x3D;&quot;[&#x27;/&#x27;]&quot;
+      [width]&#x3D;&quot;logoWidth()&quot;
+      [height]&#x3D;&quot;logoHeight()&quot;
+      alt&#x3D;&quot;logo&quot;
+      class&#x3D;&quot;grow-0 mx-16 cursor-pointer&quot;
+    /&gt;
+    &lt;div class&#x3D;&quot;grow-0 px-16 mt-4&quot;&gt;
+      &lt;rxap-release-info&gt;&lt;/rxap-release-info&gt;
+    &lt;/div&gt;
+  &lt;/ng-template&gt;
+&lt;/rxap-sidenav&gt;
+&lt;rxap-footer class&#x3D;&quot;z-10 w-full fixed bottom-0&quot;&gt;&lt;/rxap-footer&gt;
 </code></pre>
     </div>
 
@@ -892,7 +497,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
                     <code>./layout.component.scss</code>
                 </p>
                 <pre class="line-numbers"><code class="language-scss">:host {
-  .sidenav.collapsable {
+  .collapsable {
 
     &amp;:not(.mat-drawer-opened) {
       transform: translateX(calc(-100% + 64px)) !important;
@@ -938,9 +543,9 @@ export class LayoutComponent implements OnInit, OnDestroy {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><rxap-status-indicator class="fixed bottom-0 right-0 z-10"></rxap-status-indicator><div class="flex flex-col h-screen justify-between">  <rxap-header class="z-10 w-full fixed top-0"></rxap-header>  <mat-sidenav-container [ngStyle]="{    \'margin-top.px\': fixedTopGap(),    \'margin-bottom.px\': fixedBottomGap(),  }" class="grow">    <mat-sidenav      #matSidenav="matSidenav"      [fixedBottomGap]="fixedBottomGap()"      [fixedInViewport]="true"      [fixedTopGap]="fixedTopGap()"      [mode]="sidenavMode()"      [ngClass]="{ collapsable: collapsable() }"      class="sidenav"      [opened]="opened()"    >      <div (mouseleave)="collapsable() && !pinned() && matSidenav.close()"           class="h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch">        <div (click)="layoutComponentService.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>        <ul          (mouseenter)="collapsable() && !pinned() && matSidenav.open()"          class="grow self-stretch"          root          rxap-navigation        >        </ul>        <img          [src]="logoSrc"          [routerLink]="[\'/\']"          [width]="logoWidth"          alt="logo"          class="grow-0 mx-16"        />        <div class="grow-0 px-16">          <span>{{release}}</span>        </div>      </div>    </mat-sidenav>    <mat-sidenav-content [ngClass]="{ \'ml-16\': collapsable() }" class="p-4">      <router-outlet></router-outlet>    </mat-sidenav-content>  </mat-sidenav-container>  <rxap-footer class="z-10 w-full fixed bottom-0"></rxap-footer></div><!--<rxap-window-task-bar-container></rxap-window-task-bar-container>--></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><rxap-header class="z-10 w-full fixed top-0"></rxap-header><rxap-navigation-progress-bar></rxap-navigation-progress-bar><rxap-sidenav>  <router-outlet></router-outlet>  <ng-template rxapSidenavFooter>    <img      [src]="logoSrc()"      [routerLink]="[\'/\']"      [width]="logoWidth()"      [height]="logoHeight()"      alt="logo"      class="grow-0 mx-16 cursor-pointer"    />    <div class="grow-0 px-16 mt-4">      <rxap-release-info></rxap-release-info>    </div>  </ng-template></rxap-sidenav><rxap-footer class="z-10 w-full fixed bottom-0"></rxap-footer></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': 'LayoutComponent'};
 </script>
 <script src="../js/tree.js"></script>