Fixed sidebar to support responsive mode #1.1.0.rc6

kdb-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "1.1.0.rc5",
+    "version": "1.1.0.rc6",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",

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();

kdb-web/src/assets/version.json

@@ -2,6 +2,6 @@
     "WebVersion": {
         "Major": "1",
         "Minor": "1",
-        "Micro": "0.rc5"
+        "Micro": "0.rc6"
     }
 }

kdb-web/src/styles.scss

@@ -115,8 +115,14 @@ header {
   display: flex;
   flex: 1;
 
-  .sidebar {
+  .sidebar-open {
     height: 100%;
+    width: 175px;
+  }
+
+  .sidebar-closed {
+    height: 100%;
+    width: 75px;
   }
 
   h1 {
@@ -372,19 +378,23 @@ header {
                         flex-wrap: wrap;
                         gap: 10px;
 
+                        .client-info-small {
+                          flex: 0.25 !important;
+                        }
+
                         .client-info {
                           display: flex;
                           flex-direction: column;
-                          margin-left: 2%;
+                          flex: 1;
 
                           .client-info-header {
                             margin-bottom: 5px;
-                            white-space: nowrap;
+                            white-space: break-spaces;
                             font-weight: bold
                           }
 
                           .client-info-value {
-                            white-space: nowrap;
+                            word-break: break-word;
                           }
                         }
                       }
@@ -654,7 +664,23 @@ p-inputNumber {
       }
     }
   }
+
+
+  .p-panelmenu {
+    .p-menuitem-text {
+      display: none;
+    }
+  }
+
   .app {
+    .sidebar-open {
+      width: 65px;
+    }
+
+    .sidebar-closed {
+      display: none;
+    }
+
     .component-wrapper {
       .component {
         .content-wrapper {
@@ -749,6 +775,7 @@ p-inputNumber {
   .p-column-title {
     min-width: 50%;
     font-weight: 600;
+    word-break: break-word;
   }
 
   p-cellEditor {

kdb-web/src/styles/primeng-fixes.scss

@@ -40,6 +40,7 @@ header,
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: normal !important;
   }
 
   .p-panelmenu-header > a {
@@ -53,10 +54,6 @@ header,
     border: none !important;
     background: none !important;
   }
-
-  .p-menuitem-text {
-    line-height: normal !important;
-  }
 }
 
 ui-menu .ui-menu-parent .ui-menu-child {