Fixed sidebar to support responsive mode #1.1.0.rc6

kdb-web/src/app/app.component.html

@@ -5,7 +5,7 @@
 
     <section class="app">
       <div>
-        <section class="sidebar" [style.width]="sidebarWidth">
+        <section [ngClass]="{'sidebar-open': isSidebarOpen, 'sidebar-closed': !isSidebarOpen}">
           <app-sidebar></app-sidebar>
         </section>
       </div>

kdb-web/src/app/app.component.ts

@@ -16,7 +16,7 @@ import { takeUntil } from "rxjs/operators";
 export class AppComponent implements OnInit, OnDestroy {
 
   themeName: string = Themes.Default;
-  sidebarWidth: string = '175px';
+  isSidebarOpen: boolean = true;
 
   isLoggedIn: boolean = false;
 
@@ -29,10 +29,10 @@ export class AppComponent implements OnInit, OnDestroy {
     private translateService: TranslateService,
     private config: PrimeNGConfig,
   ) {
-    this.themeService.sidebarWidth$.pipe(
+    this.themeService.isSidebarOpen$.pipe(
       takeUntil(this.unsubscriber)
     ).subscribe(value => {
-      this.sidebarWidth = value;
+      this.isSidebarOpen = value;
     });
     this.themeService.themeName$.pipe(
       takeUntil(this.unsubscriber)

kdb-web/src/app/modules/view/server/server-dashboard/components/client/client.component.html

@@ -1,5 +1,5 @@
 <div class="client">
-  <div class="client-info">
+  <div class="client-info client-info-small">
     <label class="client-info-header">{{'common.id' | translate}}</label>
     <label class="client-info-value">{{client.id}}</label>
   </div>

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html

@@ -30,7 +30,6 @@
 
             <div class="client-data"
                  *ngFor="let client of server.clients">
-              <i class="pi pi-discord"></i>
               <app-client class="client-component" [client]="client"></app-client>
             </div>
           </div>

kdb-web/src/app/services/sidebar/sidebar.service.ts

@@ -69,7 +69,7 @@ export class SidebarService {
 
   async buildMenu(user: UserDTO | null, hasPermission: boolean, isTechnician: boolean = false) {
     this.dashboard = {
-      label: this.isSidebarOpen ? this.translateService.instant("sidebar.dashboard") : "",
+      label: this.translateService.instant("sidebar.dashboard"),
       icon: "pi pi-th-large",
       routerLink: "dashboard"
     };

kdb-web/src/app/services/theme/theme.service.ts

@@ -9,13 +9,10 @@ import { AuthService } from "../auth/auth.service";
 export class ThemeService {
 
   themeName: string = Themes.Default;
-
-  sidebarWidth = "150px";
   isSidebarOpen = false;
 
   themeName$ = new BehaviorSubject<string>(Themes.Default);
   isSidebarOpen$ = new BehaviorSubject<boolean>(true);
-  sidebarWidth$ = new BehaviorSubject<string>("175px");
 
   constructor(
     private authService: AuthService
@@ -25,10 +22,6 @@ export class ThemeService {
     });
     this.isSidebarOpen$.subscribe(isSidebarOpen => {
       this.isSidebarOpen = isSidebarOpen;
-      this.sidebarWidth$.next(isSidebarOpen ? "175px" : "75px");
-    });
-    this.sidebarWidth$.subscribe(sidebarWidth => {
-      this.sidebarWidth = sidebarWidth;
     });
 
     this.loadTheme();