From 434cce25f242c5240e1dd82e1c4ae4d73b08c7af Mon Sep 17 00:00:00 2001
From: peter <peter.millauer@gmail.com>
Date: Wed, 14 Aug 2019 10:53:23 +0200
Subject: [PATCH] layouting (I LIKE BIG BOXES)

---
 .../apiclient-consumptions.component.ts       |  74 ++++++-------
 .../apiclient-settings-form.component.ts      | 100 +++++++++---------
 .../apiclient-subscriptions.component.ts      |  83 ++++++++-------
 .../app/PluginManager/plugins.component.ts    |  16 ++-
 .../dashboard/src/app/app.component.html      |   9 +-
 .../dashboard/src/app/app.component.scss      |   3 +
 .../src/app/content-area/main.component.html  |   3 +-
 .../dynamic-loader.component.html             |   5 +-
 .../dynamic-loader.component.scss             |   3 +
 .../dynamic-loader.component.ts               |  17 +--
 .../app/header-bar/header-bar.component.html  |   6 +-
 .../app/header-bar/header-bar.component.ts    |   4 +-
 .../src/app/sidebar/sidebar.component.html    |   3 +-
 .../src/app/sidebar/sidebar.component.ts      |   2 +
 14 files changed, 163 insertions(+), 165 deletions(-)

diff --git a/src/frontend/dashboard/src/app/ApiClient/apiclient-consumptions.component.ts b/src/frontend/dashboard/src/app/ApiClient/apiclient-consumptions.component.ts
index e2a3a50..480536f 100644
--- a/src/frontend/dashboard/src/app/ApiClient/apiclient-consumptions.component.ts
+++ b/src/frontend/dashboard/src/app/ApiClient/apiclient-consumptions.component.ts
@@ -31,45 +31,47 @@ const fb = !isDevMode() ? window["fb"] : {
 @Component({
   selector: 'consumptions',
   template: `
-  <div class="card">
-    <div class="card-header">
-    Consumptions
-    </div>
-    <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
-        <clr-alert-item>
-            <span class="alert-text">
-                {{entry.message}}
-            </span>
-        </clr-alert-item>
-    </clr-alert>
+  <div class="clr-row">
+    <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-12 clr-col-xl-12">
+        <div class="card-header">
+        Consumptions
+        </div>
+        <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
+            <clr-alert-item>
+                <span class="alert-text">
+                    {{entry.message}}
+                </span>
+            </clr-alert-item>
+        </clr-alert>
 
-    <div *ngIf="loading" class="card-block">
-    <span class="spinner spinner-inline"></span>
-    </div>
-    <div *ngIf="entries.length !== 0 && !loading" class="card-block">
-        <div class="card-text">
-            <clr-datagrid>
-                <clr-dg-column>UUID</clr-dg-column>
-                <clr-dg-column>Expiry</clr-dg-column>
-                <clr-dg-column>Creation</clr-dg-column>
-                <clr-dg-column> </clr-dg-column>
+        <div *ngIf="loading" class="card-block">
+        <span class="spinner spinner-inline"></span>
+        </div>
+        <div *ngIf="entries.length !== 0 && !loading" class="card-block">
+            <div class="card-text">
+                <clr-datagrid>
+                    <clr-dg-column>UUID</clr-dg-column>
+                    <clr-dg-column>Expiry</clr-dg-column>
+                    <clr-dg-column>Creation</clr-dg-column>
 
-                <clr-dg-row *ngFor="let line of entries">
-                    <clr-dg-cell>{{line.uid}}</clr-dg-cell>
-                    <clr-dg-cell>{{line.expiry}}</clr-dg-cell>
-                    <clr-dg-cell>{{line.created | date}}</clr-dg-cell>
-                    <clr-dg-cell><button class="btn btn-sm btn-link" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon></button></clr-dg-cell>
-                </clr-dg-row>
-
-                <clr-dg-footer>
-
-                {{entries.length}} entries</clr-dg-footer>
-            </clr-datagrid>
+                    <clr-dg-row *ngFor="let line of entries">
+                        <clr-dg-cell>{{line.uid}}</clr-dg-cell>
+                        <clr-dg-cell>{{line.expiry}}</clr-dg-cell>
+                        <clr-dg-cell>{{line.created | date}}</clr-dg-cell>
+                        
+                        <clr-dg-row-detail *clrIfExpanded>
+                            <button class="btn btn-icon btn-danger-outline" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon> Quit</button>
+                        </clr-dg-row-detail>
+                    </clr-dg-row>
+                    <clr-dg-footer>
+                        {{entries.length}} entries
+                    </clr-dg-footer>
+                </clr-datagrid>
+            </div>
+        </div>
+        <div class="card-footer">
+            <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
         </div>
-    </div>
-    <div class="card-footer">
-        <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
-    </div>
     </div>
   `
 })
diff --git a/src/frontend/dashboard/src/app/ApiClient/apiclient-settings-form.component.ts b/src/frontend/dashboard/src/app/ApiClient/apiclient-settings-form.component.ts
index d6e4b27..5f0ba9a 100644
--- a/src/frontend/dashboard/src/app/ApiClient/apiclient-settings-form.component.ts
+++ b/src/frontend/dashboard/src/app/ApiClient/apiclient-settings-form.component.ts
@@ -17,58 +17,58 @@ const fb = !isDevMode ? window["fb"] : {
 @Component({
     selector: 'settings',
     template: `
-    <div class="card">
-        <div class="card-header">
-        Settings
-        </div>
-        <div class="card-block">
-            <div class="card-text">
-                <form clrForm clrLayout="horizontal">
-                    <div class="clr-row clr-form-control ng-star-inserted">
-                        <label class="clr-col-12 clr-col-md-4 clr-control-label">testnet</label>
-                        <div class="clr-col-12 clr-col-md-8">
-                            <input type="checkbox" [(ngModel)]="testnet"  (change)="updateTestnet($event)" name="testnetToggle" clrToggle  />
-                        </div>
-                    </div>
-                    
-                    <clr-input-container *ngIf="!testnet">
-                        <label class="clr-col-12 clr-col-md-4">API key</label>
-                        <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="apiKey" required />
-                    </clr-input-container>
-                
-                    <clr-input-container *ngIf="advanced">
-                        <label class="clr-col-12 clr-col-md-4">API address</label>
-                        <input class="clr-col-12 clr-col-md-8" type="text" [(ngModel)]="data.apiHost" (change)="updatePort($event)" clrInput name="apiHost" required />
-                        <clr-control-error>This field is required!</clr-control-error>
-                    </clr-input-container>
-
-                    <div class="clr-row clr-form-control ng-star-inserted" *ngIf="advanced">
-                        <label class="clr-col-12 clr-col-md-4 clr-control-label">Use TLS</label>
-                        <div class="clr-col-12 clr-col-md-8">
-                            <input class="clr-col-12 clr-col-md-8" [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
-                        </div>
-                    </div>
-                    
-                    <clr-input-container class="clr-row" *ngIf="advanced">
-                        <label class="clr-col-12 clr-col-md-4">Port</label>
-                        <input class="clr-col-12 clr-col-md-8" [(ngModel)]="data.apiPort" clrInput type="number" name="lastName" required />
-                        <clr-control-error>Valid range 1024 - 65536 
-                        </clr-control-error>
-                    </clr-input-container>
-                    
-                    
-                </form>
+    <div class="clr-row">
+        <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-auto clr-col-xl-auto">
+            <div class="card-header">
+            Settings
             </div>
-        </div>
-        <div class="card-footer">
-            <button *ngIf="!saving" class="btn btn-success-outline" (click)="save()">
-            <span>Save</span>
-            </button>
+            <div class="card-block">
+                <div class="card-text">
+                    <form clrForm clrLayout="horizontal">
+                        <div class="clr-row clr-form-control ng-star-inserted">
+                            <label class="clr-col-12 clr-col-md-4 clr-control-label">testnet</label>
+                            <div class="clr-col-12 clr-col-md-8">
+                                <input type="checkbox" [(ngModel)]="testnet"  (change)="updateTestnet($event)" name="testnetToggle" clrToggle  />
+                            </div>
+                        </div>
+                        
+                        <clr-input-container *ngIf="!testnet">
+                            <label class="clr-col-12 clr-col-md-4">API key</label>
+                            <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="apiKey" required />
+                        </clr-input-container>
+                    
+                        <clr-input-container *ngIf="advanced" class="clr-row">
+                            <label class="clr-col-12 clr-col-md-4">API address</label>
+                            <input class="clr-col-12 clr-col-md-8" type="text" [(ngModel)]="data.apiHost" (change)="updatePort($event)" clrInput name="apiHost" required />
+                            <clr-control-error>This field is required!</clr-control-error>
+                        </clr-input-container>
 
-            <button *ngIf="saving" class="btn btn-disabled" (click)="save()" disabled>
-            <span class="spinner spinner-inline"></span>
-            </button>
-            <button *ngIf="!advanced" class="btn btn-sm btn-link" (click)="setAdvanced()">Advanced</button>
+                        <div class="clr-row clr-form-control ng-star-inserted" *ngIf="advanced">
+                            <label class="clr-col-12 clr-col-md-4 clr-control-label">Use TLS</label>
+                            <div class="clr-col-12 clr-col-md-8">
+                                <input [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
+                            </div>
+                        </div>
+                        
+                        <clr-input-container class="clr-row" *ngIf="advanced">
+                            <label class="clr-col-12 clr-col-md-4">Port</label>
+                            <input class="clr-col-12 clr-col-md-8" [(ngModel)]="data.apiPort" clrInput type="number" name="lastName" required />
+                            <clr-control-error>Valid range 1024 - 65536 
+                            </clr-control-error>
+                        </clr-input-container>
+                    </form>
+                </div>
+            </div>
+            <div class="card-footer">
+                <button *ngIf="!saving" class="btn btn-success-outline" (click)="save()">
+                <span>Save</span>
+                </button>
+
+                <button *ngIf="saving" class="btn btn-disabled" (click)="save()" disabled>
+                <span class="spinner spinner-inline"></span>
+                </button>
+                <button *ngIf="!advanced" class="btn btn-sm btn-link" (click)="setAdvanced()">Advanced</button>
+            </div>
         </div>
     </div>
   `
diff --git a/src/frontend/dashboard/src/app/ApiClient/apiclient-subscriptions.component.ts b/src/frontend/dashboard/src/app/ApiClient/apiclient-subscriptions.component.ts
index 1eec5b3..3508009 100644
--- a/src/frontend/dashboard/src/app/ApiClient/apiclient-subscriptions.component.ts
+++ b/src/frontend/dashboard/src/app/ApiClient/apiclient-subscriptions.component.ts
@@ -32,46 +32,49 @@ const fb = !isDevMode() ? window["fb"] : {
 @Component({
     selector: 'subscriptions',
     template: `
-    <div class="card">
-      <div class="card-header">
-      Subscriptions
-      </div>
-      <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
-          <clr-alert-item>
-              <span class="alert-text">
-                  {{entry.message}}
-              </span>
-          </clr-alert-item>
-      </clr-alert>
-  
-      <div *ngIf="loading" class="card-block">
-      <span class="spinner spinner-inline"></span>
-      </div>
-      <div *ngIf="entries.length !== 0 && !loading" class="card-block">
-          <div class="card-text">
-              <clr-datagrid>
-                  <clr-dg-column>UUID</clr-dg-column>
-                  <clr-dg-column>Expiry</clr-dg-column>
-                  <clr-dg-column>Creation</clr-dg-column>
-                  <clr-dg-column> </clr-dg-column>
-  
-                  <clr-dg-row *ngFor="let line of entries">
-                      <clr-dg-cell>{{line.uid}}</clr-dg-cell>
-                      <clr-dg-cell>{{line.expiry}}</clr-dg-cell>
-                      <clr-dg-cell>{{line.created | date}}</clr-dg-cell>
-                      <clr-dg-cell><button class="btn btn-sm btn-link" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon></button></clr-dg-cell>
-                  </clr-dg-row>
-  
-                  <clr-dg-footer>
-  
-                  {{entries.length}} entries</clr-dg-footer>
-              </clr-datagrid>
-          </div>
-      </div>
-      <div class="card-footer">
-          <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
-  
-      </div>
+    <div class="clr-row">
+        <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-12 clr-col-xl-12">
+            <div class="card-header">
+            Subscriptions
+            </div>
+            <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
+                <clr-alert-item>
+                    <span class="alert-text">
+                        {{entry.message}}
+                    </span>
+                </clr-alert-item>
+            </clr-alert>
+        
+            <div *ngIf="loading" class="card-block">
+            <span class="spinner spinner-inline"></span>
+            </div>
+            <div *ngIf="entries.length !== 0 && !loading" class="card-block">
+                <div class="card-text">
+                    <clr-datagrid>
+                        <clr-dg-column>UUID</clr-dg-column>
+                        <clr-dg-column>Expiry</clr-dg-column>
+                        <clr-dg-column>Creation</clr-dg-column>
+        
+                        <clr-dg-row *ngFor="let line of entries">
+                            <clr-dg-cell>{{line.uid}}</clr-dg-cell>
+                            <clr-dg-cell>{{line.expiry}}</clr-dg-cell>
+                            <clr-dg-cell>{{line.created | date}}</clr-dg-cell>
+                            
+                            <clr-dg-row-detail *clrIfExpanded>
+                                <button class="btn btn-icon btn-danger-outline" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon> Unsubscribe</button>
+                            </clr-dg-row-detail>
+                        </clr-dg-row>
+                        <clr-dg-footer>
+                            {{entries.length}} entries
+                        </clr-dg-footer>
+                    </clr-datagrid>
+                </div>
+            </div>
+            <div class="card-footer">
+                <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
+        
+            </div>
+        </div>
     </div>
 `
 })
diff --git a/src/frontend/dashboard/src/app/PluginManager/plugins.component.ts b/src/frontend/dashboard/src/app/PluginManager/plugins.component.ts
index 99a47a7..0bb93ad 100644
--- a/src/frontend/dashboard/src/app/PluginManager/plugins.component.ts
+++ b/src/frontend/dashboard/src/app/PluginManager/plugins.component.ts
@@ -26,15 +26,13 @@ declare const fb
                         <clr-accordion-panel *ngFor="let entry of plugins">
                             <clr-accordion-title>{{entry.name}}</clr-accordion-title>
                             <clr-accordion-content *clrIfExpanded>
-                            <div class="btn-group btn-primary">
-                                <button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-success-outline" (click)="start(entry.name)"><clr-icon shape="play"></clr-icon></button>
-                                <button *ngIf="entry.status === 'Running'" class="btn btn-icon btn-warning-outline" (click)="stop(entry.name)"><clr-icon shape="stop"></clr-icon></button>
-                                <button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-danger-outline" (click)="delete(entry.name)"><clr-icon shape="trash"></clr-icon></button>
-                                <button *ngIf="entry.status === 'Available'" class="btn btn-icon btn-info-outline" (click)="showConfirmation(entry.name)"><clr-icon shape="download"></clr-icon></button>
-                                <button *ngIf="entry.available !== entry.installed && entry.status === 'Stopped'" class="btn btn-icon btn-outline " (click)="showConfirmation(entry.name)">
-                                    <clr-icon shape="sync"></clr-icon>
-                                </button>
-                            </div>
+                            <button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-success-outline" (click)="start(entry.name)"><clr-icon shape="play"></clr-icon></button>
+                            <button *ngIf="entry.status === 'Running'" class="btn btn-icon btn-warning-outline" (click)="stop(entry.name)"><clr-icon shape="stop"></clr-icon></button>
+                            <button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-danger-outline" (click)="delete(entry.name)"><clr-icon shape="trash"></clr-icon></button>
+                            <button *ngIf="entry.status === 'Available'" class="btn btn-icon btn-info-outline" (click)="showConfirmation(entry.name)"><clr-icon shape="download"></clr-icon></button>
+                            <button *ngIf="entry.available !== entry.installed && entry.status === 'Stopped'" class="btn btn-icon btn-outline " (click)="showConfirmation(entry.name)">
+                                <clr-icon shape="sync"></clr-icon>
+                            </button>
                             </clr-accordion-content>
                         </clr-accordion-panel>
                     </clr-accordion>
diff --git a/src/frontend/dashboard/src/app/app.component.html b/src/frontend/dashboard/src/app/app.component.html
index 709f08f..a9c930a 100644
--- a/src/frontend/dashboard/src/app/app.component.html
+++ b/src/frontend/dashboard/src/app/app.component.html
@@ -1,8 +1,5 @@
-<div class="main-container">
+<clr-main-container >
     <header-bar></header-bar>
     <subnav></subnav>
-    <div class="content-container">
-        <sidebar></sidebar>
-        <dynamic-loader></dynamic-loader>
-    </div>
-</div>
\ No newline at end of file
+    <dynamic-loader style="height:  100%;"></dynamic-loader>
+</clr-main-container>
diff --git a/src/frontend/dashboard/src/app/app.component.scss b/src/frontend/dashboard/src/app/app.component.scss
index e69de29..b3c8c89 100644
--- a/src/frontend/dashboard/src/app/app.component.scss
+++ b/src/frontend/dashboard/src/app/app.component.scss
@@ -0,0 +1,3 @@
+.heightmax{
+    height: 100%
+}
\ No newline at end of file
diff --git a/src/frontend/dashboard/src/app/content-area/main.component.html b/src/frontend/dashboard/src/app/content-area/main.component.html
index 786f275..717dc5e 100644
--- a/src/frontend/dashboard/src/app/content-area/main.component.html
+++ b/src/frontend/dashboard/src/app/content-area/main.component.html
@@ -1,4 +1,3 @@
-
-<div class="content-area">
+<div class="content-area clr-col-12 clr-col-sm-12 clr-col-lg-12 clr-col-xl-12">
     <router-outlet></router-outlet>
 </div>
diff --git a/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.html b/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.html
index 070e254..7220eed 100644
--- a/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.html
+++ b/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.html
@@ -1,3 +1,4 @@
-<div class="content-container">
-    <content-area></content-area>
+<div class="content-container" style="height:  100%;">
+    <sidebar></sidebar>
+    <content-area style="height:  100%; width: 100%"></content-area>
 </div>
\ No newline at end of file
diff --git a/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.scss b/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.scss
index e69de29..878d184 100644
--- a/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.scss
+++ b/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.scss
@@ -0,0 +1,3 @@
+.heightmax{
+    height: 100%!important;
+}
\ No newline at end of file
diff --git a/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts b/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
index b9897db..9d100e2 100644
--- a/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
+++ b/src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
@@ -35,7 +35,7 @@ SystemJS.set('frontblock-generic/Types', SystemJS.newModule(frontblockGenericTyp
 SystemJS.config({ meta: { '*': { authorization: true } } });
 /** --------- */
 
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { SidebarComponent } from '../sidebar/sidebar.component';
 import { Router } from '@angular/router';
 import { FrontendPlugin, SidebarEntries, SidebarEntry } from "frontblock-generic/Plugin"
@@ -54,25 +54,16 @@ const fb = environment.production ? window["fb"] : {
   styleUrls: ['./dynamic-loader.component.scss']
 })
 export class DynamicLoaderComponent implements AfterViewInit {
-  sidebar: SidebarComponent
+  @ViewChild(SidebarComponent, {static:false})
+  private sidebar:SidebarComponent
 
   constructor(
     private router: Router,
-    private sidebarService: SidebarEntryService
   ) {
   }
 
   ngAfterViewInit() {
-    const _this = this;
-    (function awaitSidebar() {
-      const sb = _this.sidebarService.getSidebar()
-      if (sb != null) {
-        _this.sidebar = sb
-        _this.loadWidgets()
-        return
-      }
-      setTimeout(awaitSidebar, 25)
-    })()
+      this.loadWidgets()
   }
 
   private async loadWidgets() {
diff --git a/src/frontend/dashboard/src/app/header-bar/header-bar.component.html b/src/frontend/dashboard/src/app/header-bar/header-bar.component.html
index 1372a16..258258d 100644
--- a/src/frontend/dashboard/src/app/header-bar/header-bar.component.html
+++ b/src/frontend/dashboard/src/app/header-bar/header-bar.component.html
@@ -1,4 +1,4 @@
-<header class="header header-1">
+<clr-header class="header header-1">
     <div class="branding">
         <span class="title">Frontblock</span>
         
@@ -6,7 +6,7 @@
     <div class="header-actions">
         <a class="nav-link nav-icon-text">
             <clr-icon shape="bug"></clr-icon> 
-            <span class="nav-text">ALPHA</span>
+            <span class="nav-text">ALPHA {{devmode}}</span>
         </a>
     </div>
-</header>
+</clr-header>
diff --git a/src/frontend/dashboard/src/app/header-bar/header-bar.component.ts b/src/frontend/dashboard/src/app/header-bar/header-bar.component.ts
index d3310d0..6dda03f 100644
--- a/src/frontend/dashboard/src/app/header-bar/header-bar.component.ts
+++ b/src/frontend/dashboard/src/app/header-bar/header-bar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, isDevMode } from '@angular/core';
 
 @Component({
   selector: 'header-bar',
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./header-bar.component.scss']
 })
 export class HeaderBarComponent implements OnInit {
-
+  devmode = isDevMode()?"{ DEV }":""
   constructor() { }
 
   ngOnInit() {
diff --git a/src/frontend/dashboard/src/app/sidebar/sidebar.component.html b/src/frontend/dashboard/src/app/sidebar/sidebar.component.html
index 8caf06a..7170ac0 100644
--- a/src/frontend/dashboard/src/app/sidebar/sidebar.component.html
+++ b/src/frontend/dashboard/src/app/sidebar/sidebar.component.html
@@ -1,4 +1,4 @@
-<clr-vertical-nav style="height: 100%" class="nav-trigger--bottom" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed">
+<clr-vertical-nav [clr-nav-level]="1" class="nav-trigger--bottom" style="height:  100%;" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed" >
     <clr-vertical-nav-group *ngFor="let e of multientires" routerLinkActive="active">
         <clr-icon [attr.shape]="e.icon" clrVerticalNavIcon></clr-icon>
         {{e.text}}
@@ -16,5 +16,4 @@
         <clr-icon [attr.shape]="entry.icon" clrVerticalNavIcon></clr-icon>
         {{entry.text}}
     </a>
-
 </clr-vertical-nav>
\ No newline at end of file
diff --git a/src/frontend/dashboard/src/app/sidebar/sidebar.component.ts b/src/frontend/dashboard/src/app/sidebar/sidebar.component.ts
index 715a058..50a9c3e 100644
--- a/src/frontend/dashboard/src/app/sidebar/sidebar.component.ts
+++ b/src/frontend/dashboard/src/app/sidebar/sidebar.component.ts
@@ -9,6 +9,8 @@ import { environment } from 'src/environments/environment';
 })
 export class SidebarComponent implements OnInit {
 
+  collapsed = true
+
   entries:SidebarEntry[] = [
   ]